超详细的rem+vw移动端屏幕适配方案
超详细的rem+vw移动端屏幕适配⽅案
在说具体内容之前，我们必须了解⼏个概念，就是：Retina屏、物理像素、设备独⽴像素、设备像素⽐
在CSS中我们⼀般使⽤px作为单位，需要注意的是，CSS样式⾥⾯的px和物理像素并不是相等的。CSS中的像素只是⼀个抽象的单位，在不同的设备或不同的环境中，CSS中的1px所代表的物理像素是不同的。在PC端，CSS的1px⼀般对应着电脑屏幕的1个物理像素，但在移动端，CSS的1px等于⼏个物理像素是和屏幕像素密度有关的。
1.Retina屏
所谓“Retina”是⼀种显⽰标准，是把更多的像素点压缩⾄⼀块屏幕⾥，从⽽达到更⾼的分辨率并提⾼屏幕显⽰的细腻程度。由摩托罗拉公司研发。最初该技术是⽤于Moto Aura上。这种分辨率在正常观看距离下⾜以使⼈⾁眼⽆法分辨其中的单独像素。也被称为视⽹膜显⽰屏。
Retina屏⼀般在苹果公司的产品上⽤的⽐较多，诸如MacBook、iPad、iPhone等
以MacBook Pro with Retina Display为例，⼯作时显卡渲染出2880x1800个像素，其中每四个像素⼀组，输出原来屏幕的⼀个像素显⽰的⼤⼩区域内的图像。这样⼀来，⽤户所看到的图标与⽂字的⼤⼩与原来的1440x900分辨率显⽰屏相同，但精细度是原来的4倍，但对于特殊元素，如视频与图像，则以⼀
个图⽚像素对应⼀个屏幕像素的⽅式显⽰。故不会产⽣中分辨率提升使屏幕⽂字与图像变⼩，造成阅读困难的问题。这样在设计软件时只需将所有的UI元素的精细度都提⾼到原来的4倍就可以既保持了观看舒适度，⼜提⾼了显⽰效果。关于，也由四个像素代替原来⼀个像素，通过下图对⽐就可以较明显地观察到这种关系
2.物理像素(physical pixel)
物理像素⼜被称为设备像素、设备物理像素，它是显⽰器（电脑、⼿机屏幕）最⼩的物理显⽰单位，每个物理像素由颜⾊值和亮度值组成。所谓的⼀倍屏、⼆倍屏(Retina)、三倍屏，指的是设备以多少物理像素来显⽰⼀个CSS像素，也就是说，多倍屏以更多更精细的物理像素点来显⽰⼀个CSS像素点，在普通屏幕下1个CSS像素对应1个物理像素，⽽在⼆倍屏幕下，1个CSS像素对应的却是4个物理像素（参照上⾯Retina屏的原理下⽂⽥字⽰意图理解）。
清洗加油站油罐3.设备独⽴像素(device-independent pixel)
设备独⽴像素是我们写CSS时所⽤的像素，它是⼀个抽像的单位，主要使⽤在浏览器上，⽤来精确度量Web页⾯上的内容。
4.设备像素⽐(device pixel ratio)
设备像素⽐简称为dpr，物理像素与设备独⽴像素的⽐例。
当这个⽐率为1:1时，使⽤1个设备像素显⽰1个css像素。当这个⽐率为2:1=2时，使⽤4(2*2)个设备像素显⽰1个css像素。当这个⽐率为3:1=3，使⽤9(3*3)个设备像素显⽰1个css像素。
这⾥要注意，dpr=2，并不是物理像素是设备独⽴像素的2倍，⽽是⽤4个物理像素去表⽰1个设备逻辑像素
应该说1个设备独⽴像素是1个物理像素的4倍，因为你4个⽹物理像素才代表我1个设备独⽴像素
dpr只代表⼀个数字⽐例，不是倍数关系。
CSS的1px等于⼏个物理像素，除了和屏幕像素密度dpr有关，还和⽤户缩放有关系。例如，当⽤户把页⾯放⼤⼀倍，那么CSS中1px所代表的物理像素也会增加⼀倍；反之把页⾯缩⼩⼀倍，CSS中1px所代表的物理像素也会减少⼀倍。关于这点，在⽂章后⾯的1px细线问题部分还会讲到。
viewport
viewport就是设备上⽤来显⽰⽹页的那⼀块区域，但viewport⼜不局限于浏览器可视区域的⼤⼩，它可能⽐浏览器的可视区域要⼤，也可能⽐浏览器的可视区域要⼩。采菊东篱下 悠然见南山全诗
在默认情况下，⼀般来讲，移动设备上的viewport都是要⼤于浏览器可视区域的，这是因为考虑到移动设备的分辨率相对于桌⾯电脑来说都⽐较⼩，所以为了能在移动设备上正常显⽰那些传统的为桌⾯浏览器设计的⽹站，移动设备上的浏览器都会把⾃⼰默认的viewport设为初二英语练习题
980px或1024px（也可能是其它值，这个是由设备⾃⼰决定的），但带来的后果就是浏览器会出现横向滚动条，因为浏览器可视区域的宽度是⽐这个默认的viewport的宽度要⼩的。
这⾥要认清三种视⼝
　visual viewport 可见视⼝，指屏幕宽度
　layout viewport 布局视⼝，指DOM宽度
　ideal viewport 理想适⼝，使布局视⼝就是可见视⼝即为理想视⼝
获取屏幕宽度(visual viewport)的尺⼨：
window. innerWidth/Height
获取DOM宽度(layout viewport)的尺⼨：
document. documentElement. clientWidth/Height
设置理想视⼝ideal viewport：
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
该meta标签的作⽤是让layout viewport的宽度等于visual viewport的宽度，同时不允许⽤户⼿动缩放，从⽽达到理想视⼝。　
1　meta[name="viewport"]⾥各参数的含义为：
2
3  width: 设置layout viewport 的宽度，为⼀个正整数，或字符串”width-device”。
4
5  initial-scale: 设置页⾯的初始缩放值，为⼀个数字，可以带⼩数。
6
7  minimum-scale: 允许⽤户的最⼩缩放值，为⼀个数字，可以带⼩数。
8
9  maximum-scale: 允许⽤户的最⼤缩放值，为⼀个数字，可以带⼩数。
10
11  height: 设置layout viewport 的⾼度，这个属性对我们并不重要，很少使⽤。
圣斗士之风舞娑罗12
13  user-scalable: 是否允许⽤户进⾏缩放，值为“no”或“yes”。
1 rem适配
哇卡卡卡，终于说到移动端屏幕适配⽅案了，可能⼤家看的想骂娘了，不过别急啊，上⾯的东西弄不清楚，下⾯是适配也听不懂啊
rem是相对于根元素的字体⼤⼩的单位，也就是html的font-size⼤⼩，浏览器默认的字体⼤⼩是16px，所以默认的1rem=16px，我们可以根据设备宽度动态设置根元素的font-size，使得以rem为单位的元素在不同终端上以相对⼀致的视觉效果呈现。
事实上 是把屏幕等分成 指定的份数，以20份为例，每份为 1rem ， 1rem 对应的⼤⼩就是 rem基准值 ，做的就是把 rem基准值 给
<html>的 font-size ，所以如果设备的 物理像素 宽为 640px ，分成20份，那么 1rem=640px/20=32px , <html>的 font-size为32px 。
1//这段代码放在head标签⾥⾯
2(function () {
3    var html = document.documentElement;
4
5    function onWindowResize() {
6        html.style.fontSize = BoundingClientRect().width / 20 + 'px';
7    }
8
9    window.addEventListener('resize', onWindowResize);
10    onWindowResize();
11})();绝组词
12
当然，你也可以分成30份，40份，60份等等，这个看⾃⼰的喜好了
在我们实际切图的时候，对于视觉稿上的元素尺⼨换算，只需要元素的 原始的px值(即你量的⼤⼩) 除以 rem基准值 即可。例如设计稿的⼤⼩为640px， rem基准值 = 640px/20 = 32px ，有个元素的⼤⼩你量出来是 140px286px* ，那么换算过来就是：
1140px = 140/32 = 4.375rem
2286px = 286/32 = 8.9375rem
这样我们就可以⽤rem来代替像素px了， ⽽且在所有的移动端都是⾃适应的
这个⽅法⽬前是⽐较好的适配⽅法，只是rem在计算时很⿇烦，有很多⼩数，这个时候⼤家可以试⼀下⽤less.js解决rem的⼩数问题
2 rem+vw适配
什么是vw和vh?
vw : 1vw 等于视⼝宽度的1%
vh : 1vh 等于视⼝⾼度的1%
vmin : 选取 vw 和 vh 中最⼩的那个
vmax : 选取 vw 和 vh 中最⼤的那个
⽤视⼝单位度量，视⼝宽度为100vw，⾼度为100vh（左侧为竖屏情况，右侧为横屏情况）
例如，在桌⾯端浏览器视⼝尺⼨为650px，那么 1vw = 650 * 1% = 6.5px（这是理论推算的出，如果浏览器不⽀持0.5px，那么实际渲染结果可能是7px）
注意：这⾥的1%是指占视⼝的1%，⽽不是我们定义的div的1%
如何利⽤rem+vw进⾏屏幕适配呢？我们以设计稿为750px为基准
第⼀步：设置meta标签
<meta name="viewport" content="width=device-width, initial-scale=2.0, maximum-scale=2.0, minimum-scale=2.0, user-scalable=no">
因为iPhone6以及⼤多数的dpr为2，为了第⼆步的⽅便进⾏换算
第⼆步：设置html的font-size⼤⼩
html{font-size:13.33333333vw}
为什么font-size=13.33333333vw?
下⾯分析下原理吧, 上⾯我们说了vw表⽰1%的屏幕宽度,⽽我们的设计稿通常是750px的，屏幕⼀共是100vw，对应750px，那么1px就是
0.1333333vw,。
同时我们知道rem,rem是相对html元素的字体⼤⼩，为了⽅便计算，我们取html的font-size=100px，通过上⾯的计算结果1px是
0.13333333vw，那么100px就是13.333333vw了
所以，我们让1rem=100px=13.333333vw
琉璃美人煞各人物结局那么在项⽬上就很好地可以进⾏使⽤了
当我们通过ps测量⼀个div的⼤⼩为 width:200px,height:137px时，我们就可以这样写，ps量出来的像素直接除以100，计算⼩数很⽅便
1div {
2  width: 2rem;
3  height:1.37rem;
4
5 }
是不是相对于前⾯的rem适配来说，不⽤去计算⼩数了呢？
但是注意，这是针对于dpr=2的适配，⾄于其他dpr适配，要根据设计师的设计稿规定
1）如果你的设计图是640px或者750px，那么dpr的取值就是2,meta如下设置

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。