移动和pc⽹页布局适配多设备
⼀.视⼝（viewport）
viewport视⼝
viewport是严格的等于浏览器的窗⼝。viewport与跟viewport有关的meta标签的关系，详细建议读⼀读这篇⽂章：移动前端开发之viewport的深⼊理解，viewport与布局的关系，可以看下这篇⽂章：在移动浏览器中使⽤viewport元标签控制布局
visual viewport 可见视⼝  屏幕宽度
layout viewport 布局视⼝ DOM宽度
ideal viewport 理想适⼝：使布局视⼝就是可见视⼝
设备宽度(visual viewport)与DOM宽度(layout viewport), scale的关系为：
（visual viewport）= （layout viewport）* scale
获取屏幕宽度(visual viewport)的尺⼨：window. innerWidth/Height。
获取DOM宽度(layout viewport)的尺⼨：document. documentElement. clientWidth/Height。
设置理想视⼝：把默认的layout viewport的宽度设为移动设备的屏幕宽度，得到理想视⼝(ideal viewport):
设置理想视⼝：
我们进⾏⽹页布局的时候设置html元素宽度为100%，这个100%是依据什么设置的呢？浏览器窗⼝⽤CSS像素衡量的宽度
（window.innerWidth)还是别的呢？我们可以发现在PC端的浏览器上设置100%，html元素的px宽度就等于浏览器宽度；⽽在移动端不管是在
布局视⼝了。
基本上宽度都等于980px，这⾥的980px就是移动端所谓的布局视⼝
什么设备上，html设置100%，基本上
相互独⽴存在的。浏览器⼚商为了让⽤户在移动端，默认的情况下，布局视⼝的宽度是要远远⼤于浏览器的宽度的。这两个视⼝不同于PC端，是相互独⽴存在
在⼩屏幕下⽹页也能够显⽰地很好，所以把布局视⼝宽度设置地很⼤，⼀般在768px ~ 1024px之间，最常见的宽度是980px。这个宽度可以通过document.documentElement.clientWidth得到。
移动端布局需要达到的效果
设置布局视⼝的宽度正好等于屏幕的⼤⼩我们希望⼀个⽹页放到移动端的浏览器中不会影响视觉效果，然后⼜利于开发。所以最好的⽅法就是设置布局视⼝的宽度正好等于屏幕的⼤⼩（这⾥的⼤⼩是指视觉上的⽽不是CSS像素单位上的，意思就是⽐如375的屏幕宽度下，将布局视⼝设置为屏幕宽度，也就是device-width，CSS像素横向有375个单位，设置375px即可满屏；如果将布局视⼝设置为设备宽度的两倍即750px，⾯积增⼤4倍，同时设置initial-scale为0.5，⾯积⼜缩⼩四分之⼀正好⼜是屏幕的⼤⼩。），这样的效果就是设置100%的时候保证就是屏幕宽度。（说的⽐较啰initial-scale为0.5，⾯积⼜缩⼩四分之⼀正好⼜是屏幕的⼤⼩。）
嗦）
如何设置布局视⼝呢？
<!--设置布局视⼝等于device-width--><metaname="viewport"content="width=device-width"><!-- 只设置缩放值也能将布局视⼝宽度设置为屏幕宽度，设置为0.5时由于CSS像素缩放了0.5，填到屏幕中的C
SS像素数量正好是屏幕宽度 --><metaname="viewport"content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"><!-- 这是兼容写法 -->
<metaname="viewport"content="width=device-width,initial-scale=1, maximum-scale=1,user-scalable=no">
⼆、移动适配⽅案
移动多屏幕适配是为了保证各个屏幕上的布局视⼝都是等于屏幕（视觉上的）宽度。所以就有⼏种⽅案可以做到。
第⼀种⽅案
width=device-width，这样能够保证宽度⼀致，但考虑到苹果的Retina屏幕设计师出设计稿的时候都是放⼤了⼀倍设计第⼀种⽅案是直接设置width=device-width
稿，⽐如640px（基于iphone5）、750px（基于iphone6）。如果我们拿到的设计稿是750px宽，在设置缩放⽐为100%、布局视⼝等于屏幕宽度的情况下，我们拿到的设计稿宽度是⼤了⼀倍的，（⽹页中设置375px沾满屏幕，⽽设计稿切出的图是750px），所以在转换成⽹页的时候设置宽度需要将设计图的宽度除以2来，如果考虑到iphone6 plus的dpr为3，要保证在6 plus下图⽚还是⾼清，就需要将750px
的设计稿再放⼤1.5倍，⽤@3倍图切出来。以上可以知道这种⽅案不需要动态的去根据屏幕dpr不同来设置meta标签内容，直接⼀句话搞定，然后需要调整的地⽅通过媒体查询来做。
第⼆种⽅案
第三种⽅案就是淘宝的flexible了。这个解决⽅案只解决苹果设备上的dpr为2和3的情况，不考虑安卓设备也不考虑pad。做的事情也很简单，就
initial-scale来缩放布局视⼝，dpr为
width=device-width,⽽是通过设置initial-scale
是动态设置meta标签的内容，和第⼀种⽅案不同的是没有设置为width=device-width
1，缩放为1；dpr为2，缩放0.5；dpr为3，缩放0.3333；通过这种⽅法使得布局视⼝在视觉上还是屏幕⼤⼩但CSS像素数量却增加了4倍/9倍。⽽这样的直接好处就是⽐如iphone6的视觉视⼝横向有了750个CSS像素点，和设计图保持⼀致了，同时CSS像素缩放0.5解决了经典的1px像素
1px像素问题。
问题
window.navigator.appVersion判断是否是iphone，其他的⽐如ipad、Android直接设置dpr为1，然后通过 1/
该⽅案的核⼼原理是通过window.navigator.appVersion
dpr 得到缩放值。
varisAndroid=win.navigator.appVersion.match(/android/gi);/* 判断iphone ipad不考虑
*/varisIPhone=win.navigator.appVersion.match(/iphone/gi);vardevicePixelRatio=win.devicePixelRatio;if(isIPhone){// iOS下，对于2和3的屏，⽤2倍的⽅案，其余的⽤1倍⽅案if(devicePixelRatio>=3&&(!dpr||dpr>=3)){dpr=3;}elseif(devicePixelRatio>=2&&(!dpr||dpr>=2)) {dpr=2;}else{dpr=1;}}else{// 其他设备下，仍旧使⽤1倍的⽅案dpr=1;}/*缩放值*/scale=1/dpr;
px，这也是为了等⽐例缩放的问题。rem单位代表的是根节点也就是html的fontSize的值，html默认这个解决⽅案中⽤的布局单位是rem
rem⽽不是px
为16px，所以默认1rem = 16px。既然开发的设计标注图是750px的，将html设为75px就很⽅便了，10rem = 750px。
然后放到所有屏幕情况下：
functionrefreshRem(){/*获取布局视⼝宽度，也可⽤
document.documentElement.clientWidth*/varwidth=BoundingClientRect().width;/* 判断屏幕宽度，如果dpr为1且宽度>540 则恒定为540px，dpr为2如果宽度>1080则恒定为1080px*/if(width/dpr>540){width=540*dpr;}/*将布局视⼝宽度除以10得到html字体⼤⼩*/varrem=width/10;document.documentElement.style.fontSize=rem+'px';}
⽐如iphone5的设备下布局视⼝是640，所以html的字体⼤⼩会设置为64px，⽽在开发的时候设置的单位为rem，这个时候rem⾃动根据64px转换，就实现了等⽐缩放。写rem的时候可以通过CSSREM插件来写，只是后期维护⽐较⿇烦。
字体不⽤rem⽽采⽤px是因为我们希望⼀个⽂本字号不因为Retina显⽰屏的原因⽽缩放变⼩。然后在⼤屏上也不会放⼤⽽能够看到更多的⽂本。
data-dpr属性，然后通过该属性判断来设置字体⼤⼩。
但是不同的dpr下⼜的确是要分别设置字号的。这个解决⽅案会在html元素上设置data-dpr
div.box{    font-size: 12px;}[data-dpr="2"] div{    font-size: 24px;}[data-dpr="3"] div{    font-size: 36px;}
@mixin。
如果觉得⿇烦可以⽤sass来写样式，⽤@mixin。
设计稿设计⽅⾯要求为750px，如果设计师有做标注就做在这个稿⼦上，没有标注的话我们开发的时候就依据这个设计稿来量间距之类的。同时将这个稿⼦放⼤1.5倍来得到1125px的设计稿，切图⽤这份设计稿保证dpr为3的屏幕图⽚显⽰⾜够清晰。在iphone6的屏幕下开发然后再向上向下适配。字体也希望不要出现奇数值，我们都知道为什么。
viewport视⼝
viewport是严格的等于浏览器的窗⼝。viewport与跟viewport有关的meta标签的关系，详细建议读⼀读这篇⽂章：移动前端开发之viewport的深⼊理解，viewport与布局的关系，可以看下这篇⽂章：在移动浏览器中使⽤viewport元标签控制布局
visual viewport 可见视⼝ 屏幕宽度
layout viewport 布局视⼝ DOM宽度
ideal viewport 理想适⼝：使布局视⼝就是可见视⼝
设备宽度(visual viewport)与DOM宽度(layout viewport), scale的关系为：
（visual viewport）= （layout viewport）* scale
获取屏幕宽度(visual viewport)的尺⼨：window. innerWidth/Height。
获取DOM宽度(layout viewport)的尺⼨：document. documentElement. clientWidth/Height。
设置理想视⼝：把默认的layout viewport的宽度设为移动设备的屏幕宽度，得到理想视⼝(ideal viewport):
设置理想视⼝：
2.替换px转⽽使⽤rem
网页计算器html代码
设定⽗盒⼦的css为
⽗盒⼦{width:320px}
设置根元素的font-size为屏幕的某个⽐例
html{font-size:16px;}
那么⽗盒⼦的css为
⽗盒⼦{  width:20rem;//换算为320px，充满屏幕宽度height:10rem;//换算为160px，盒⼦⽐例达到1:1}
但是css的替换以及rem的计算还是⽐较繁琐的，这⾥建议使⽤sass的函数
然后使⽤正则替换
(/(\d+[\.\d+]?px)/g,'rem($1)')
$baiscRem:320px /20//这⾥假定为页⾯做20个等分@functionrem($px)@return($px / $basicRem)* 1rem⽗盒⼦width:rem(320px)围观众1：为什么不在写css时候直接使⽤rem呢？
答：每次都调尺⼨都要⽤计算器算⼀下啊，好⿇烦。(╯°⼝°)╯(┴—┴
围观众2：为什么不直接写 rem(320px) ？
答：写括号也好⿇烦。(:3」∠)
然后，使⽤css @media查询，确定rem的值。
这⾥就⽐较具体了，需要根据实际的业务需求来决定所要适配的设备尺⼨
/* media.css */@mediascreen and (min-width:320px) and (max-width:320px){html{font-size:320/320* $basicRem;
}}@mediascreen and (min-width:400px) and (max-width:400px){html{font-size:400/320* $basicRem;    }}
tips：如果不知道要兼容什么样的设备。可以再⽤户访问后，javascript收集该设备的相关信息，
然后在服务端⾃动更新该⽂件的内容，加⼊新的@media规则。
但是全部使⽤rem，有个缺点很蛋疼，
就是除法导致的⼩数缺省的问题，导致视觉上会有⼏个像素的偏差。
例如：多列布局会引起⼏个像素的空⽩等 （￣へ￣）
关于vw，vh
宽⾼的1%，建议使⽤在各种布局的容器上，如上图的⽗盒⼦和⼦盒⼦。
⽗盒⼦{box-sizing:border-box;padding:10vw;width:100vw;height:50vw;/* 妥妥的2:1⽐例 */letter-spaci
ng: -4px;/*消除⾏内元素的4px的空⽩间隔 */}⼦盒⼦1,⼦盒⼦2{magin:05vw;width:30vw;height:30vw;/* 妥妥的1:1的⽐例 */display:inline-block;}
相⽐rem，使⽤vw和wh是⾮常直观的，让其他⼈看到就能知道，该界⾯是以怎么样的结构进⾏布局，利于维护。
但在具体深⼊到表现的地⽅，建议转⽽使⽤rem来配合。
注意：vw在⼀些三星的机⼦会有兼容问题，导致失效。
如果有兼容问题,vw在容器上的应⽤可以百分⽐替换 -->codepen-使⽤百分⽐实现的等⽐例容器
相关链接：
移动端适配⽅案（主要讲解的是移动端视⼝⽅⾯的知识）：
segmentfault/
segmentfault/
Retina屏幕下模糊的由来：
mobile.
⼿淘flexible.js布局：
www.

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