澳门新浦京娱乐场网站-www.146.net-新浦京娱乐场官网
做最好的网站

计算运用移动端布局方法,总结个人运用过的移

总结个人使用过的移动端布局方法

2017/07/20 · CSS · 1 评论 · 布局, 移动端

原文出处: yiiouo   

这篇文章,主要是总结一下,我在移动端布局用过的方法。有三种,一种是响应式布局,利用@meida判断各个size;第二种是REM;最后是设置viewport中的width。

这篇文章,主要是总结一下,在移动端布局用过的方法。有三种,一种是响应式布局,利用@meida判断各个size;第二种是REM;最后是设置viewport中的width。

主要介绍三种移动端布局方法:
    1. 响应式布局,利用@meida判断各个size。
    1. REM
    1. 设置viewport中的width

1、使用meta标签:viewport

Rem

响应式布局

这种感觉是最好理解了,利用@media进行断点,在每个断点中编写css。

@media (max-width:768px){ //css }

1
2
3
@media (max-width:768px){
    //css
}

上面这段代码,在浏览器的宽度低于768时有效。同理,如果把max换成min,就会变成高于768时有效。可以设置宽度,也可以设置高度,也可以同时设置多个值。

在MDN,@media上,发现很多值都可以做判断的。宽,高,宽高比,颜色(这个是指定输出设备每个像素单位的比特值),是否横屏或竖屏,还有很多,可以去MDN看看。

响应式布局

一、响应式布局

  • 这种感觉是最好理解了,利用@media进行断点,在每个断点中编写css。

    @media (max-width:768px){
    //css
    }

上面这段代码,在浏览器的宽度低于768时有效。同理,如果把max换成min,就会变成高于768时有效。可以设置宽度,也可以设置高度,也可以同时设置多个值。
在MDN,@media上,发现很多值都可以做判断的。宽,高,宽高比,颜色(这个是指定输出设备每个像素单位的比特值),是否横屏或竖屏,还有很多,可以去MDN看看。@meida还可以根据媒体类型进行断点。

  • 看几个根据媒体类型进行的断点:

    @media (max-width:1000px){
        div{background:blue;}
    }
    @media (min-width:1000px) and (max-width:1150px){
        div{background: yellow;}
    }
    @media only screen and (max-width:1150px){
        div{border:solid 1px;}
    }
    @media not print and (max-width:1150px){
        div{border-radius:50%;}
    }
    

分别表示:
当浏览器宽度低于1000px时
当浏览器宽度大于1000px 和 小于1150px时
当在屏幕上显示 和 宽度小于1150px时
除了在打印上显示外 和 宽度小于1150px时

  • @media还可以用在link标签上。

    <link rel="stylesheet" href="css/1.css" media="(max-width:500px)"/>
    

当浏览器宽度低于500px时,1.css的样式才会有效果。但这不代表大于500px时,就没加载了1.css。使用了@media属性后,只会让你当条件符合了,才让对应的css文件有效果。而且用这种方式有一个好处,就是不用在css里写@media。

H5移动端页面自适应普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。

现如今移动端的尺寸大小多种导致也页面不能在各种屏幕上适配,许多网站之前主要采取(1)采用的流式布局:通过百分比来定义宽度来实现,但是高度大都是用px来固定住。

媒体类型

@meida还可以根据媒体类型进行断点。

  • all,所有设备
  • print,打印
  • screen,彩色的电脑屏幕
  • speech,不知道什么来的。

这种感觉是最好理解了,利用@media进行断点,在每个断点中编写css。

二、REM

REM这个单位,会根据html的font-size大小进行转换。

html{font-size:100px;}
p{padding-top:.5rem;}

转换后p的padding-top就是50px了。只要我们进行适当的计算,当前屏幕的宽度,html的font-size是多少px就OK了。

  • 如何计算当前html的font-size值
    比如,我们拿到的设计稿是750px,那就设置成当屏幕宽度是750的时候,html的font-size就是100px(当然这个100px你可以随意设置的,我设置成100px只是方便我计算),然后就根据当前屏幕的宽度 / 750 * 100,就得到了当前屏幕宽度的font-size值。

    (function (doc, win) {
        var docEl = doc.documentElement,
              resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
              recalc = function () {
                  var clientWidth = docEl.clientWidth;
                  if (!clientWidth) return;
                  docEl.style.fontSize = 100 * (clientWidth / 750)   'px';
              };
    
         if (!doc.addEventListener) return;
         win.addEventListener(resizeEvt, recalc, false);
         doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
    
  • 淘宝移动端REM,引入一个flexible.js。是根据dpr去计算,而且会进行整体的缩放。

viewport 是用户网页的可视区域。翻译为中文可以叫做"视区"。

这就导致大屏幕的手机页面上宽度被拉的很长,高度很短。

关键字

@media (max-width:1000px){ div{background:blue;} } @media (min-width:1000px) and (max-width:1150px){ div{background: yellow;} } @media only screen and (max-width:1150px){ div{border:solid 1px;} } @media not print and (max-width:1150px){ div{border-radius:50%;} }

1
2
3
4
5
6
7
8
9
10
11
12
@media (max-width:1000px){
    div{background:blue;}
}
@media (min-width:1000px) and (max-width:1150px){
    div{background: yellow;}
}
@media only screen and (max-width:1150px){
    div{border:solid 1px;}
}
@media not print and (max-width:1150px){
    div{border-radius:50%;}
}
  • and,就是‘和’的意思,前后两个条件都达到时
  • only,唯一
  • not,除了这个之外

上面4个@media,分别的效果是:

  1. 当浏览器宽度低于1000px时
  2. 当浏览器宽度大于1000px 和 小于1150px时
  3. 当在屏幕上显示 和 宽度小于1150px时
  4. 除了在打印上显示外 和 宽度小于1150px时

@media (max-width:768px){

三、设置viewport中的width

就是定死viewport中的width大小,比如设计稿是750的,然后就在代码上写:

 <meta name="viewport" content="width=750"/>

我在iphone7,小米5s,谷歌浏览器模拟的iphone6plus上,字体颜色都是黄色的。所以@media媒体查询是无法使用的,因为已经将宽度定死了。而REM方案却可以使用媒体查询的。因为移动端有很多奇怪的大小,而且在不同的浏览器或者微信上,高度都是不同的,所以可能会造成间距有很大的问题。

手机浏览器是把页面放在一个虚拟的"窗口"(viewport)中,通常这个虚拟的"窗口"(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的不同部分。

(2)固定宽度做法:早期有些网站把页面设置成320的宽度,超出部分留白。大屏幕手机下留白会特别多,看起来页面会特别小,操作的按钮也很小。

按需‘加载’css

@media还可以用在link标签上。

<code> <link rel="stylesheet" href="css/1.css" media="(max-width:500px)"/> </code>

1
2
3
<code>
  <link rel="stylesheet" href="css/1.css" media="(max-width:500px)"/>
</code>

当浏览器宽度低于500px时,1.css的样式才会有效果。但这不代表大于500px时,就没加载了1.css。使用了@media属性后,只会让你当条件符合了,才让对应的css文件有效果。而且用这种方式有一个好处,就是不用在css里写@media

图片 1

    //css

对比总结:

  • 响应式的优缺点

    • 优点:兼容性好,@media在ie9以上是支持的,PC和MOBILE是同一套代码的,不用分开。
    • 缺点:要写得css相对另外两个多很多,而且各个断点都要做好。css样式会稍微大点,更麻烦。
  • REM优缺点

    • 优点:能维持能整体的布局效果,移动端兼容性好,不用写多个css代码,而且还可以利用@media进行优化。
    • 缺点:开头要引入一段js代码,单位都要改成rem(font-size可以用px),计算rem比较麻烦(可以引用预处理器,但是增加了编译过程,相对麻烦了点)。pc和mobile要分开。
  • 设置viewport中的width

    • 优点:和REM相同,而且不用写rem,直接使用px,更加快捷。
    • 缺点:效果可能没rem的好,图片可能会相对模糊,而且无法使用@media进行断点,不同size的手机上显示,高度间距可能会相差很大。

viewport标签极其属性:

(3)响应式做法:这种做法虽然能展现很好的效果,但大型企业的复杂性的网站在移动端用这种方法去做的话会增加工作量,维护性难。

平常响应式网站的开发

平时响应式网站的开发,我都会先对比PC和MOBILE的设计稿,看看有什么区别,然后才进行编写css。通常都是使用flex。宽度尽量用百分比,间距、高度、字体大小使用 em,就可以很方便的进行大小的控制。

}

还是看项目需求,再决定使用哪种方案,如果就手机站的话,我使用REM比较多。如果对距离比较精确的话,大量css3动画的,就使用第三种。

参考总结个人使用过的移动端布局方法

每个属性的详细介绍:

(4)设置viewport进行缩放:天猫的web app的首页就是采用这种方式去做的,以320宽度为基准,进行缩放,最大缩放为320*1.3 = 416,基本缩放到416都就可以兼容iphone6 plus的屏幕了,这个方法简单粗暴,又高效。但它接下来要说的rem一样高效……

REM

REM这个单位,会根据html的font-size大小进行转换。

html{font-size:100px;} p{padding-top:.5rem;}

1
2
html{font-size:100px;}
p{padding-top:.5rem;}

.5rem = 50px / 100

转换后p的padding-top就是50px了。只要我们进行适当的计算,当前屏幕的宽度,html的font-size是多少px就OK了。

上面这段代码,在浏览器的宽度低于768时有效。同理,如果把max换成min,就会变成高于768时有效。可以设置宽度,也可以设置高度,也可以同时设置多个值。

属性名

rem具体是怎么用的

如何计算当前html的font-size值

比如,我们拿到的设计稿是750px,那就设置成当屏幕宽度是750的时候,html的font-size就是100px(当然这个100px你可以随意设置的,我设置成100px只是方便我计算),然后就根据当前屏幕的宽度 / 750 * 100,就得到了当前屏幕宽度的font-size值。

//当前屏幕宽度 / 750 = 当前屏幕宽度的font-size / 100 //代码如下 (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; docEl.style.fontSize = 100 * (clientWidth / 750) 'px'; }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//当前屏幕宽度 / 750 = 当前屏幕宽度的font-size / 100
//代码如下
(function (doc, win) {
    var docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function () {
      var clientWidth = docEl.clientWidth;
      if (!clientWidth) return;
      docEl.style.fontSize = 100 * (clientWidth / 750) 'px';
    };
  
    if (!doc.addEventListener) return;
       win.addEventListener(resizeEvt, recalc, false);
       doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

上面这段代码,是直接根据屏幕宽度进行计算font-size的。而淘宝移动端REM方案,还根据你的dpr去计算,而且会进行整体的缩放。淘宝的这种方案,比上面的代码会好很多。

图片 2

图片 3

大家注意边框的大小。第二张图的边框是比第一张图的小的,两个都是border:solid 1px。其他的边距都是一样。淘宝的方案,解决了另一个问题:边框1px的问题。

大家可以打开以下链接,看看具体的效果:

第一种方案

第二种方案

在MDN,@media上,发现很多值都可以做判断的。宽,高,宽高比,颜色(这个是指定输出设备每个像素单位的比特值),是否横屏或竖屏,还有很多,可以去MDN看看。

取值

_首先rem是根据根元素进行适配的,在网页中的根元素是html,所以我们可以通过设置html的font-size大小来控制rem的大小

淘宝移动端REM

这个很简单,只需要加载js就好了

<code> <script src="; </code>

1
2
3
<code>
  <script src="http://g.tbcdn.cn/mtb/lib-flexible/{{version}}/??flexible_css.js,flexible.js"/>
</code>

然后在css中,将px转为rem就好了。我是用scss的,所以写个函数就好了。

@function s($px) { <a href="; ($px / 75) * 1rem; } p{ font-size:s(40);padding-left: s(52); }

1
2
3
4
5
6
@function s($px) {
    <a href="http://www.jobbole.com/members/wx1409399284">@return</a> ($px / 75) * 1rem;
}
p{
    font-size:s(40);padding-left: s(52);
}

比如p的font-size在750的设计稿是40px,然后s(40)就OK了。

媒体类型

描述

例如:

设置viewport中的width

这种方案,就是定死viewport中的width大小。

比如设计稿是750的,然后就在代码上写:

<code> <met name="viewport" content="width=750"/> </code>

1
2
3
<code>
  <met name="viewport" content="width=750"/>
</code>

我们用同样的页面,看看效果是怎么样

图片 4

链接:第三种方案

效果和第二种是一样的,在手机上看也是。

.top{ display: flex;align-items:center;padding:50px 0 113.5px;justify-content:space-between;width:100%; p{ font-size:40px;padding-left:52px; } img{ width:71.5px;height: 71.5px;display: block;margin-right: 63.5px; } }

1
2
3
4
5
6
7
8
9
.top{
    display: flex;align-items:center;padding:50px 0 113.5px;justify-content:space-between;width:100%;
    p{
        font-size:40px;padding-left:52px;
    }
    img{
        width:71.5px;height: 71.5px;display: block;margin-right: 63.5px;
    }
}

而代码是直接使用px的,定死的。

感觉从效果上来看,是很完美的,但是为什么不是这种方法最流行?

@media screen and (max-width:360px){ .box{color:red;} } @media screen and (max-width:520px){ .box{color:black;} } @media screen and (max-width:750px){ .box{color:yellow;} }

1
2
3
4
5
6
7
8
9
10
11
@media screen and (max-width:360px){
    .box{color:red;}
}
 
@media screen and (max-width:520px){
    .box{color:black;}
}
 
@media screen and (max-width:750px){
    .box{color:yellow;}
}

我在iphone7,小米5s,谷歌浏览器模拟的iphone6plus上,字体颜色都是计算运用移动端布局方法,总结个人运用过的移动端布局方法。黄色的。所以@media媒体查询是无法使用的,因为已经将宽度定死了。而REM方案却可以使用媒体查询的。因为移动端有很多奇怪的大小,而且在不同的浏览器或者微信上,高度都是不同的,所以可能会造成间距有很大的问题。

window.screen.width

1
window.screen.width

用js,可以获取当前设备的宽度。

@meida还可以根据媒体类型进行断点。

width

(1)Html{

对比三种方式

all,所有设备

正整数或device-width

Font-size:20px;

响应式的优缺点

优点:兼容性好,@media在ie9以上是支持的,PC和MOBILE是同一套代码的,不用分开。

缺点:要写得css相对另外两个多很多,而且各个断点都要做好。css样式会稍微大点,更麻烦。

print,打印

定义视口的宽度,单位为像素

}

REM优缺点

优点:能维持能整体的布局效果,移动端兼容性好,不用写多个css代码,而且还可以利用@media进行优化。

缺点:开头要引入一段js代码,单位都要改成rem(font-size可以用px),计算rem比较麻烦(可以引用预处理器,但是增加了编译过程,相对麻烦了点)。pc和mobile要分开。

screen,彩色的电脑屏幕

height

.btn{

设置viewport中的width

优点:和REM相同,而且不用写rem,直接使用px,更加快捷。

缺点:效果可能没rem的好,图片可能会相对模糊,而且无法使用@media进行断点,不同size的手机上显示,高度间距可能会相差很大。

speech,不知道什么来的。

正整数或device-height

width:6rem;相当于=>width:120px(20*6)

总结

还是看项目需求,再决定使用哪种方案,如果就手机站的话,我使用REM比较多。如果对距离比较精确的话,大量css3动画的,就使用第三种。

1 赞 16 收藏 1 评论

图片 5

关键字

定义视口的高度,单位为像素,一般不用

height:3rem;相当于=>height:60px(20*3)

@media (max-width:1000px){

initial-scale

line-height:3rem;相当于=>line-height:60px (20*3)

    div{background:blue;}

[0.0-10.0]

font-size:1.2rem;相当于=>font-size:24px(20*1.2)

}

定义初始缩放值

border-radius: 0.5rem;相当于=>border-radius: 10px(20*0.5)

@media (min-width:1000px) and (max-width:1150px){

minimum-scale

}

    div{background: yellow;}

[0.0-10.0]

按钮出来的效果:

}

定义缩小最小比例,它必须小于或等于maximum-scale设置

图片 6

@media only screen and (max-width:1150px){

maximum-scale

如果我们再改变html的font-size的值,看看按钮发生上面变化:

    div{border:solid 1px;}

[0.0-10.0]

(2)Html{

}

定义放大最大比例,它必须大于或等于minimum-scale设置

Font-size:40px;

@media not print and (max-width:1150px){

user-scalable

}

    div{border-radius:50%;}

yes/no

图片 7

}

定义是否允许用户手动缩放页面,默认值yes

看出我们只需要改变html的font-size的px值a;下面元素px大小就等于rem的数值*a;

and,就是‘和’的意思,前后两个条件都达到时

2、使用css3单位rem

我们只要改变html的font-size大小就可以等比缩放下面元素的大小

only,唯一

rem是CSS3新增的一个相对单位(root em,根em),使用rem为元素设定字体大小时,是相对大小,但相对的只是HTML根元素。通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。

怎么计算出不同分辨率下font-size的值

not,除了这个之外

目前,除了IE8及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是一个例子:

假设设计师给的是以最左边蓝色的640px宽度,

上面4个@media,分别的效果是:

p {font-size:14px;font-size:.875rem;}

图片 8

当浏览器宽度低于1000px时

默认html的font-size是16px,即1rem=16px,如果某div宽度为32px你可以设为2rem。

页面是以640的宽度去切的,怎么计算不同宽度下font-site的值,大家看表格上面的数值变化应该能明白。举个例子:384/640

0.6,384是640的0.6倍,所以384页面宽度下的font-size也等于它的0.6倍,这时384的font-size就等于12px。在不同设备的宽度计算方式以此类推。

根元素html的font-size如何改变

方法(一)添加css3动态设置font-size大小

可以根据js去动态的计算font-size,这样的好处是所有设备分辨率都能兼容,淘宝首页目前就是用js计算,但其实不用JS我们也可以做适配,一般我们在做web app都会先统计自己网站有哪些主流的屏幕设备,然后去针对那些设备去做media

query设置也可以实现适配,例如下面这样:

html {

font-size : 20px;

}

@media only screen and (min-width: 401px){

html {

font-size: 25px !important;

}

}

@media only screen and (min-width: 428px){

html {

font-size: 26.75px !important;

}

}

@media only screen and (min-width: 481px){

html {

font-size: 30px !important;

}

}

@media only screen and (min-width: 569px){

html {

font-size: 35px !important;

}

}

@media only screen and (min-width: 641px){

html {

font-size: 40px !important;

}

}

上面的做的设置当然是不能所有设备全适配,但是用JS是可以实现全适配。方法如下

方法(二)添加js代码

var docWidth =

640;//640为标准的屏幕

var fontsize = 54;//字体大小

(function (doc, win) {

var docEl = doc.documentElement,

resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

recalc = function () {

var clientWidth = docEl.clientWidth;

if (!clientWidth) return;

if (clientWidth >= docWidth ) {

docEl.style.fontSize =fontsize  'px';

} else {

docEl.style.fontSize = fontsize * (clientWidth / docWidth )   'px';

}

};

if (!doc.addEventListener) return;

win.addEventListener(resizeEvt, recalc, false);

doc.addEventListener('DOMContentLoaded', recalc, false);

})(document, window);

假设以640的宽度为例,字体大小为54px,自适应屏幕的大小rem的插件如上

方法(三)使用Flexible实现手淘H5页面的终端适配

目前Flexible会将视觉稿分成100份(主要为了以后能更好的兼容vh和vw),而每一份被称为一个单位a。同时1rem单位被认定为10a。针对我们这份宽750px的视觉稿可以计算出:

1a=7.5px

1rem =75px

那么我们这个示例的稿子就分成了10a,也就是整个宽度为10rem,对应的font-size为75px:

这样一来,对于视觉稿上的元素尺寸换算,只需要原始的px值除以rem基准值即可。例如此例视觉稿中的图片,其尺寸是176px * 176px,转换成为2.346667rem * 2.346667rem。

为减少繁琐的px转换为rem的计算量,可在sublimeText3添加插件(附件提供的cssrem)

插件具体的安装方法:

(1)

图片 9

工具栏中的preference-》Browse packages(点击进去)

将附件中的cssrem文件夹复制到packages里

重启sublimeText3

(2)设置px-rem的转换值

Preference-》packages settings

–》cssrem-》Settings-Default

在Settings-Default中的参数如下:

图片 10

其中25的值就是px转换为rem的值(1rem=25px),可以根据不同的情况设置

设置完成后,当在css样式中输入时有以下提示:

图片 11

当浏览器宽度大于1000px 和 小于1150px时

通常情况下,为了便于计算数值则使用62.5%,即默认的10px作为基数。当然这个基数可以为任何数值,视具体情况而定。设置方法如下:

当在屏幕上显示 和 宽度小于1150px时

Html{font-size:62.5%(10/16*100%)}

除了在打印上显示外 和 宽度小于1150px时

具体不同屏幕下的规则定义,即基数的定义方式:可以通过CSS定义,不同宽度范围里定义不同的基数值,当然也可以通过js一次定义方法如下:

按需‘加载’css

file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtmlclip1/01/clip_image001.gif

@media还可以用在link标签上。

(function(doc, win) {

当浏览器宽度低于500px时,1.css的样式才会有效果。但这不代表大于500px时,就没加载了1.css。使用了@media属性后,只会让你当条件符合了,才让对应的css文件有效果。而且用这种方式有一个好处,就是不用在css里写@media。

vardocEl = doc.documentElement,

平常响应式网站的开发

resizeEvt ='orientationchange' in window ? 'orientationchange' : 'resize',

平时响应式网站的开发,我都会先对比PC和MOBILE的设计稿,看看有什么区别,然后才进行编写css。通常都是使用flex。宽度尽量用百分比,间距、高度、字体大小使用 em,就可以很方便的进行大小的控制。

recalc = function (){

REM

varclientWidth = docEl.clientWidth;

REM这个单位,会根据html的font-size大小进行转换。

if(!clientWidth) return;

html{font-size:100px;}

docEl.style.fontSize = 20* (clientWidth / 320) 'px';//其中“20”根据你设置的html的font-size属性值做适当的变化

p{padding-top:.5rem;}

};

转换后p的padding-top就是50px了。只要我们进行适当的计算,当前屏幕的宽度,html的font-size是多少px就OK了。

if(!doc.addEventListener) return;

如何计算当前html的font-size值

win.addEventListener(resizeEvt, recalc, false);

比如,我们拿到的设计稿是750px,那就设置成当屏幕宽度是750的时候,html的font-size就是100px(当然这个100px你可以随意设置的,我设置成100px只是方便我计算),然后就根据当前屏幕的宽度 / 750 * 100,就得到了当前屏幕宽度的font-size值。

doc.addEventListener('DOMContentLoaded', recalc, false);

//当前屏幕宽度 / 750 = 当前屏幕宽度的font-size / 100

})(document, window);

//代码如下

file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtmlclip1/01/clip_image001.gif

(function (doc, win) {

3、使用媒体查询

    var docEl = doc.documentElement,

媒体查询也是css3的方法,我们要解决的问题是适应手机屏幕,这个媒体查询正是为解决这个问题而生。

    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

媒体查询的功能就是为不同的媒体设置不同的css样式,这里的“媒体”包括页面尺寸,设备屏幕尺寸等。

    recalc = function () {

例如:如果浏览器窗口小于 500px, 背景将变为浅蓝色:

      var clientWidth = docEl.clientWidth;

@media only screen and (max-width: 500px) {

      if (!clientWidth) return;

body {

      docEl.style.fontSize = 100 * (clientWidth / 750) 'px';

background-color:lightblue;

    };

}

    if (!doc.addEventListener) return;

}

      win.addEventListener(resizeEvt, recalc, false);

4、使用百分比

      doc.addEventListener('DOMContentLoaded', recalc, false);

百分比指的是父元素,所有百分比都是这样的。子元素宽度50%,那么父元素的宽度就是100%;

})(document, window);

所以body默认宽度是屏幕宽度(PC中指的是浏览器宽度)子孙元素按百分比定位(或指定尺寸)就可以了,这只适合布局简单的页面,复杂的页面实现很困难。

上面这段代码,是直接根据屏幕宽度进行计算font-size的。而淘宝移动端REM方案,还根据你的dpr去计算,而且会进行整体的缩放。淘宝的这种方案,比上面的代码会好很多。

图片 12

大家注意边框的大小。第二张图的边框是比第一张图的小的,两个都是border:solid 1px。其他的边距都是一样。淘宝的方案,解决了另一个问题:边框1px的问题。

289683894群交流学习,领取资料

大家可以打开以下链接,看看具体的效果:

第一种方案(

第二种方案(

淘宝移动端REM

这个很简单,只需要加载js就好了

然后在css中,将px转为rem就好了。我是用scss的,所以写个函数就好了。

@function s($px) {

    @return ($px / 75) * 1rem;

}

p{

    font-size:s(40);padding-left: s(52);

}

比如p的font-size在750的设计稿是40px,然后s(40)就OK了。

设置viewport中的width

这种方案,就是定死viewport中的width大小。

比如设计稿是750的,然后就在代码上写:

我们用同样的页面,看看效果是怎么样

链接:第三种方案(

效果和第二种是一样的,在手机上看也是。

.top{

    display: flex;align-items:center;padding:50px 0 113.5px;justify-content:space-between;width:100%;

    p{

        font-size:40px;padding-left:52px;

    }

    img{

        width:71.5px;height: 71.5px;display: block;margin-right: 63.5px;

    }

}

而代码是直接使用px的,定死的。

感觉从效果上来看,是很完美的,但是为什么不是这种方法最流行?

@media screen and (max-width:360px){

    .box{color:red;}

}

@media screen and (max-width:520px){

    .box{color:black;}

}

@media screen and (max-width:750px){

    .box{color:yellow;}

}

我在iphone7,小米5s,谷歌浏览器模拟的iphone6plus上,字体颜色都是黄色的。所以@media媒体查询是无法使用的,因为已经将宽度定死了。而REM方案却可以使用媒体查询的。因为移动端有很多奇怪的大小,而且在不同的浏览器或者微信上,高度都是不同的,所以可能会造成间距有很大的问题。

window.screen.width

用js,可以获取当前设备的宽度。

对比三种方式

响应式的优缺点

优点:兼容性好,@media在ie9以上是支持的,PC和MOBILE是同一套代码的,不用分开。

缺点:要写得css相对另外两个多很多,而且各个断点都要做好。css样式会稍微大点,更麻烦。

REM优缺点

优点:能维持能整体的布局效果,移动端兼容性好,不用写多个css代码,而且还可以利用@media进行优化。

缺点:开头要引入一段js代码,单位都要改成rem(font-size可以用px),计算rem比较麻烦(可以引用预处理器,但是增加了编译过程,相对麻烦了点)。pc和mobile要分开。

设置viewport中的width

优点:和REM相同,而且不用写rem,直接使用px,更加快捷。

缺点:效果可能没rem的好,图片可能会相对模糊,而且无法使用@media进行断点,不同size的手机上显示,高度间距可能会相差很大。

总结

还是看项目需求,再决定使用哪种方案,如果就手机站的话,我使用REM比较多。如果对距离比较精确的话,大量css3动画的,就使用第三种。

本文由澳门新浦京娱乐场网站发布于新浦京娱乐场官网,转载请注明出处:计算运用移动端布局方法,总结个人运用过的移