移动端布局三种视⼝_移动端布局适配
⼀、meta标签的效果
移动端页⾯⼀般会在head头部添加如下meta标签。
该meta标签是否添加对页⾯渲染的影响
在移动端，未添加该meta标签时，html元素的宽度⼀般为980px；添加该meta标签之后，html的宽度与设备物理尺⼨宽度⼀致。
⼆、⼏个名词和单位
设备物理像素
设备物理像素⼜被称为设备像素，是显⽰器设备上的⼀个最微⼩的物理部件。每个像素可以根据操作系统设置⾃⼰的颜⾊和亮度。
设备物理像素的物理尺⼨是固定的。在移动端浏览器中，设备物理像素的物理尺⼨只与设备有关，不随⼿指的缩放⽽缩放。
设备独⽴像素
设备独⽴像素也被称为密度⽆关像素，可以认为是计算机坐标系统中的⼀个点，这个点代表⼀个可以由程序使⽤并控制的虚拟像素(例如：CSS像素)，然后由相关系统转换为物理像素。
设备独⽴像素的物理尺⼨是不固定的。在移动端浏览器中，设备独⽴像素的物理尺⼨随着⼿指的缩放⽽缩放。
image.png
CSS像素
CSS像素是设备独⽴像素的⼀种，是⼀种抽象单位，主要作⽤在浏览器上。
设备像素⽐(dpr)
设备像素⽐等于设备物理像素与设备独⽴像素(在浏览器中为CSS像素)的⽐值。可以通过window.devicePixelRatio获取移动设备的像素⽐。
分辨率(pt)
表⽰设备屏幕在⽔平和垂直⽅向上的物理像素个数。例如，iPhone6的分辨率为750pt * 1334pt。
屏幕尺⼨
表⽰屏幕对⾓线的长度，单位为英⼨(in)，1英⼨等于2.54厘⽶。例如：iPhone6的屏幕尺⼨为4.7英⼨。
像素密度(ppi)
指每英⼨屏幕上诉拥有的物理像素数⽬。计算公式为：PPI = (横向像素2 +纵向像素2 )1/2 /屏幕尺⼨。例如：iPhone6的像素密度等于(7502 +13342 )1/2 /4.7 = 326。
三、视⼝
三个视⼝
布局视⼝、视觉视⼝和理想视⼝。以下视⼝中所涉及的像素均为CSS像素，并且默认不考虑缩放。
布局视⼝
布局视⼝指⽹页布局区域。该视⼝取决于⽹页制作时的CSS样式，与⽤户设备⽆关。 布局视⼝宽度可
以通过
document.documentElement.clientWidth得到。
html根元素的包含块即是初始包含块，如果给html元素设置width: 100%; height:100%的CSS样式，则该页⾯的布局视⼝尺⼨等于初始包含块的尺⼨。
视觉视⼝
视觉视⼝指设备物理屏幕的可视区域。该视⼝与⽤户设备有关，在PC端浏览器和移动端浏览器上表现不同。
在PC端浏览器中：视觉视⼝的宽度与浏览器可视窗⼝的宽度⼀致。
在移动端浏览器中：①当⽆viewport对应的meta标签时，为了正常显⽰那些传统的为PC端浏览器设计的⽹页，移动设备浏览器⼀般都会通过⼀个⼩于零的默认初始缩放⽐例(initial-scale)将默认视觉视⼝宽度设置为980px或1020px，⼤于浏览器的宽度。②当设置viewport对应的meta标签且缩放⽐例为1.0时，视觉视⼝的宽度等于浏览器的宽度。③当⽤户⼿动缩⼩⽹页时，视觉视⼝变⼤；当⼿动放⼤⽹页时，视觉视⼝缩⼩。需要注意的是，⽤户⼿动缩放⽹页时，只影响视觉视⼝，布局视⼝保持不变。
注释：布局视⼝是⽹页的CSS尺⼨，视觉视⼝是⽤户在浏览器屏幕上可见的CSS尺⼨。
理想视⼝
布局视⼝等于视觉视⼝时产⽣理想视⼝。
理想视⼝中的⽹站拥有最理想的浏览和阅读的宽度，⽤户刚进⼊页⾯时不再需要缩放，并且没有横向滚动条。
当添加以下meta标签时，就将当前理想视⼝的宽度设置为设备宽度，同时不允许⽤户⼿动缩放。
四、Retina屏幕与普通屏幕
在上⾯讲了， 设备像素⽐(dpr)等于设备物理像素(分辨率)与设备独⽴像素(在浏览器中为CSS像素)的⽐值，可以通过
window.devicePixelRatio获取移动设备的像素⽐。
在⼤部分PC设备以及早期的移动设备中，屏幕像素密度⽐较低，设备像素⽐(dpr)等于1，⼀个设备独⽴像素(CSS像素)对应⼀个物理像素。随着技术的发展，移动设备的像素密度越来越⾼，设备像素⽐(dpr)等于2或者3，⼀个设备独⽴像素(CSS像素)对应2或3个物理像素。
在不同屏幕上，不论是设备像素⽐(dpr)等于⼏，⼀个设备独⽴像素(CSS像素)所呈现的视觉⼤⼩是⼀致的。不同的只是他们对应(覆盖)的物理像素个数。
对于iPhone6设备的Retina屏幕⽽⾔，设备物理像素数(分辨率)为750pt * 1334pt，当缩放⽐例为1时，视觉视⼝为375px * 667px，设备像素⽐(dpr)为2，⼀个CSS像素对应4个物理像素。对于⼤部分PC端设备或早期移动设备等普通屏幕上，当缩放⽐例为1时，设备像素⽐(dpr)为1，⼀个CSS像素对应1个物理像素。他们的屏幕表现对⽐图如下：
image.png
五、图像显⽰
当⼀个设备独⽴像素(CSS像素)对应⼀个物理像素时，图⽚才能够完美清晰的显⽰。
当⼀个设备独⽴像素(CSS像素)对应多个物理像素时，由于设备独⽴像素(CSS)像素已经是最⼩的数据单位，不能被继续切割。为了能够显⽰出来，只能就近取⾊，从⽽导致图⽚模糊的问题。
image.png
设备像素⽐(dpr)⼤于1时，⼀个设备独⽴像素(CSS像素)对应多个物理像素。此时需要提供与设备像素
⽐(dpr)同倍数⼤⼩的图⽚，这样就能够解决图⽚模糊的问题。例如：对于dpr为2的Retina屏幕，⼀个200px * 300px的img标签，需要提供400 * 600的原型图⽚。
当⼀个物理像素对应多个设备独⽴像素(CSS像素)时，由于物理像素是显⽰器设备上可以设置⾃⼰颜⾊和亮度的最微⼩部件。为了能够显⽰出来，只能够通过⼀定的算法进⾏缩减显⽰，从⽽导致图⽚出现⾊差的问题。
image.png
下⾯是⼀张100 * 100的图⽚分别放在100px * 100px、 50px * 50px、 25px * 25px的img容器中，在设备像素⽐(dpr)为2的屏幕中的显⽰效果。
image.png
条形图，通过放⼤镜其实可以看出边界像素点取值的不同：
①图1，就近取⾊，⾊值介于红⽩之间，偏淡，图⽚看上去会模糊(可以理解为图⽚拉伸)。
②图2，没有就近取⾊，⾊值要么是红，要么是⽩，图⽚看上去很清晰。
③图3，就近取⾊，⾊值介于红⽩之间，偏重，图⽚看上去有⾊差，缺少锐利度(可以理解为图⽚挤压)。
六、1px边框问题
如果页⾯中DOM元素的CSS样式设置边框宽度为1px。
① 对于设备像素⽐(dpr)为1的设备，1个设备独⽴像素(CSS像素)对应1个物理像素。则显⽰在浏览器屏幕上的边框占1个物理像素宽度。
② 对于设备像素⽐(dpr)为2的设备，1个设备独⽴像素(CSS像素)对应2个物理像素。则显⽰在浏览器屏幕上的边框占2个物理像素宽度。
显⽰效果对⽐图如下：
image.png
对于⼀条1px宽的直线，它们在屏幕上的物理尺⼨(灰⾊区域)的确是相同的，不同的其实是屏幕上最⼩的物理显⽰单元，即物理像素，所以对于⼀条直线，iphone5它能显⽰的最⼩宽度其实是图中的红线圈出来的灰⾊区域，⽤css来表⽰，理论上说是0.5px。然⽽并不是所有⼿机浏览器都能识别border: 0.5px;，ios7以下，android等其他系统⾥，0.5px会被当成为0px处理。
1px边框的实现⽅式borderbox
① 0.5px边框
优点：写法简单。
缺点：⽆法兼容安卓设备、 iOS 8 以下设备。
② 设置缩放⽐例 + rem布局
优点：满⾜所有场景。
缺点：影响范围⼤。
③ 伪类 + transform缩放
优点：满⾜所有场景
缺点：对于已经使⽤伪类的元素，需要多层嵌套
设置缩放⽐例和rem实现1px边框
(function(){
var rem = window.innerWidth/10;
var fn=function(){
var dpr = window.devicePixelRatio;
var scale = 1/dpr;
var ElementsByTagName('html')[0];
var meta = ElementById('vp');
html.style.fontSize=rem+'px';
html.setAttribute('data-dpr',dpr);
meta.setAttribute('content','initial-scale='+scale+',minimum-scale='+scale+',maximum-scale='+scale+',user-scalable=no');
};
fn();
window.οnresize=fn;
}())
对于任何移动设备：①⼀个rem对应innerWidth的1/10像素，10rem占满屏幕宽度。②页⾯缩放⽐例为1/dpr。设备独⽴像素(CSS像素)与设备物理像素⼀⼀对应。
伪类和transform实现1px边框
//右边框
.bd-r{
position: relative;
}
.bd-r:after{
height: 100%;
content: '';
width: 1px;
border-right: 1px solid black;
position: absolute;
top: 0;
right: -1px;
transform: scaleX(.5);
-webkit-transform: scaleX(.5);
z-index: 10;
}
//四个边框
.
bd-1px{
position: relative;
margin-bottom: 20px;
border:none;
}
.bd-1px:after{
content: '';
position: absolute;
top: 0;
left: 0;
border: 1px solid #000;
-
webkit-box-sizing: border-box;
box-sizing: border-box;
width: 200%;
height: 200%;
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transform-origin: left top;
transform-origin: left top;
}
七、移动端适配
Flex布局
2009年，W3C提出了⼀种新的⽅案——Flex布局，可以简便、完整、响应式地实现各种页⾯布局。⽬前，它已经得到了所有浏览器的⽀持，成为未来布局的⾸选⽅案。
流式布局(百分⽐布局)
百分⽐ = ⽬标元素宽度 / ⽗元素宽度
媒体查询
在不改变内容的情况下在样式中选择⼀种页⾯的布局以精确地适应不同的设备，从⽽改善⽤户体验。⽹页制作者针对不同的浏览器窗⼝尺⼨来编写不同的样式，浏览器根据不同的窗⼝尺⼨来选择使⽤不同的样式。
格式：@media 设备类型 and (设备特性)｛样式代码｝
举例: 如果屏幕宽度⼩于400像素(max-device-width: 400px)，则加载tinyScreen.css⽂件。
rem布局
px：像素; em：相对于⽗级元素字体⼤⼩的倍数;rem ：相对于HTML根元素(HTML)字体⼤⼩的倍数。
⼋、⼿淘团队的flexible.js布局
如果要适配iPhone6设备
① 设计师给了⼀个750px宽度的设计稿(注意是750px⽽不是375px)。
② 前端⼯程师⽤750px的这个⽐例还原。
③ 把宽⾼是px的转换成rem。
④ 字体使⽤px⽽不使⽤rem。
⑤ flexible.js会⾃动判断dpr进⾏整个布局视⼝的放缩。
布局单位(rem)与字体单位(px)
在flexible.js中，布局尺⼨宽⾼使⽤rem是为了保证在不同宽度尺⼨的移动设备中能够保证布局的等⽐例缩放。字体⼤⼩尺⼨使⽤px是为了保证font-size值不出现⼩数，且在不同宽度尺⼨的移动设备中能够保证字体视觉⼤⼩⼀致。对于字体的适配，更好的做法是使⽤px单位和媒体查询来进⾏适配。
flexible布局⽅案没有适配Android设备。Android设备的像素⽐(dpr)五花⼋门，从1到4，甚⾄可能出现
⼩数。
九、响应式布局与⾃适应布局
响应式布局即是⼀个⽹页能够响应不同分辨率设备，在不同分辨率设备中可以展⽰特定版本的页⾯内容。⾃适应布局即是⼀个⽹页能够适应不同分辨率设备，在不同分辨率设备中可以⼤致等⽐例展⽰⽹页内容。

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