移动端的三种适配方法

自从做移动端页面以来，经常听到关于移动端适配的问题，但一直没有仔细分析如何适配各种机型。目前公司使用手机淘宝flexible.js进行页面适配。适配的根本原则其实就是将设计稿按一定的比例在不同的手机上实现。在分析移动段适配之前，我们首先要了解rem，CSS3的一个相对长度单位。既然是相对长度，就有引用body，rem是相对于html元素的font-size计算出的值的倍数。也就是说，1rem等于html元素的font-size值的两倍。接下来分析移动端适配的三种方式1.@media+rem最先在同事的代码中看到这个适配。那时候不知道原理是什么，也不明白这些数字是怎么来的。@media屏幕和(min-width:350px){html{font-size:342%;}}@media屏幕和(min-width:360px){html{font-size:351.56%;}}@媒体屏幕和(min-width:375px){html{font-size:366.2%;}}@media屏幕和(min-width:384px){html{font-size:375%;}}@media屏幕和(min-width:390px){html{font-size:380.85%;}}@mediascreenand(min-width:393px){/*小米NOTE*/html{font-size:383.79%;}}@mediascreenand(min-width:410px){html{font-size:400%;}}@mediascreenand(min-width:432px){/*魅族3*/html{font-size:421.875%;}}@媒体屏幕和(min-width:480px){html{font-size:469%;}}@media屏幕和(min-width:540px){html{font-size:527.34%;}}@media屏幕和(min-width:640px){html{font-size:625%;}}@mediascreenand(width:720px){html{font-size:703.125%;}}@media媒体查询，可以针对不同的屏幕尺寸设置不同的风格，特别是如果你需要设计响应式页面，@media非常有用。当您调整浏览器大小时，页面也会根据浏览器的宽度和高度重新呈现。上面代码中，第一个@mediascreenand(min-width:350px)表示当移动端宽度大于350px时，页面会使用花括号里面的样式，即设置字体大小HTML根元素的比例增加到342%。（max-width:350px表示当设备宽度小于350px时将使用此样式）。上面css代码的作用是在不同分辨率的设备上设置不同的html字体大小。为什么要这样设置呢？因为这种适配方式是使用css3的rem进行适配，而前面说到rem是相对于html的字体大小计算的，而现在html在不同设备上的字体大小发生了变化，也就是说1rem代表的px像素值不同，实现了同一个页面在不同设备上按比例适配的效果。html元素的font-size值是如何确定的？举个例子：@mediascreenand(min-width:375px){html{font-size:366.2%;}}如果屏幕宽度大于375px，则按照375px的宽度适配。同时，给我们的设计稿通常是640px宽或者750px宽，而上面的计算是假设设计稿是640px宽，750px也是这样计算的。现在：1.屏幕宽度为375，设计稿宽度为640，比例=375/640=0.5859375；2.我们想把设计稿上的元素用css单位rem写下来，那么怎么换算呢，1rem应该等于草稿上px的量。这里我们设置1rem=100px；可以设置其他值吗？当然这里设置100只是为了方便我们写css的时候计算。小数点可以向左移动两位。比如设计稿上一个宽度为46px的按钮，那么换算成rem直接就是0.46rem。3、现在1rem代表设计稿上的100px，所以应该等于最终设备上真实的像素数。需要使用之前的屏幕宽度和设计稿的宽度比例。设计稿上的100px代表真实设备100*ratio=58.59375px。也就是说css写的1rem等于device58.59375px。又因为1rem等于1倍html元素的font-size，所以这里html元素的font-size最终应该设置为58.59375px。但是为什么上面代码中使用的是百分比呢？因为一般浏览器中html元素的默认字体大小是16px，但是当用户放大或缩小浏览器的字体大小设置时，就不会是16px了，所以最好将html的font-size设置为一个百分比，即58.59375/16=366.2109375%，即上例中的366.2%。html的font-size值在其他屏幕上也以同样的方式计算。@media+rem适配移动端还有一个必不可少的条件就是在head标签中写一个meta标签。;您可以在此处阅读有关视口的信息。这个标签的作用是让layoutviewport=visualviewport，用户不能缩放页面。2.手机淘宝flexible.jsflexible.js也适配了rem。它将装置分成10份，1雷姆等于1/10。分析部分代码：vardevicePixelRatio=win.devicePixelRatio;dpr=设备像素比||1;if(isIPhone){//iOS下，对于2屏和3屏，使用2倍方案，其余使用1倍方案if(devicePixelRatio>=3&&(!dpr||dpr>=3)){dpr=3;}elseif(devicePixelRatio>=2&&(!dpr||dpr>=2)){dpr=2;}否则{dpr=1;}}else{//在其他设备下，仍然使用1-foldschemedpr=1;}规模=1/dpr;…………metaEl.setAttribute('content','initial-scale='+scale+',maximum-scale='+scale+',minimum-scale='+scale+',user-scalable=no');win.devicePixelRatio（简称dpr），即设备像素比（戳我理解）以上代码当dpr（设备物理像素与设备独立像素比）为3时，页面缩小1/3，并且当dpr为2时，页面以2/1膨胀。functionrefreshRem(){varwidth=docEl.getBoundingClientRect().width;如果（宽度/dpr>750）{宽度=750*dpr;}varrem=宽度/10;docEl.style.fontSize=rem+'px';flexible.rem=win.rem=rem;}上面代码设置了1rem为设备真实宽度的1/10，所以html根元素的fontSize也是设备真实宽度的1/10，如果资深设计师给的美稿是750px宽的。写scss时，1rem应该等于75px。那边，我的scss文件可以这样写：@functionpx2rem($px,$base:75){@return($px/$base)*1rem;}/*手稿上测量的一个按钮的宽度是60px，高度为20px*/.btn{width:px2rem(60);height:px2rem(20);}3.适配vw,vhvw:viewportwidth(可见窗口宽度)vh:viewportheight(可见窗口高度)vw和vh等详情可以点这里1vw等于1%的devicewidth（设计稿宽度），1vh等于deviceheight（设计稿高度）的1%，所以好像vw，vh等最方便，但是目前兼容性不是特别好。因此，这种相对简单的适配方案只能在不需要考虑兼容性的情况下使用。比如在一些混合开发中，如果app中的浏览器支持vw和vh，那么只在app中使用的页面就可以放心使用了。用过的。像下面客户端右下角的webview，这里用vw和vh适配了一个小PK对决页面。/*宽度200px，高度220px*/@functionpx2vw($px,$base:200){@return($px/($base/100))+vw;}@functionpx2vh($px,$base:220){@return($px/($base/100))+vh;}/*头像宽42px,高42px*/.avantar{width:px2vw(42);heightx:px2vh(42);}当前工作中使用了后两种适配方案。手机购物还是有看不懂的地方，或者是我太low了，不过看不懂车也不影响老司机开车。