手机端页面自适应解决方案—rem布局

手机端页面自适应解决方案—rem布局

参考链接

将下列代码放到 HTML 的 head 标签中即可

<script>!function(e){function t(a){if(i[a])return i[a].exports;var n=i[a]={exports:{},id:a,loaded:!1};return e[a].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var i={};return t.m=e,t.c=i,t.p="",t(0)}([function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=window;t["default"]=i.flex=function(e,t){var a=e||100,n=t||1,r=i.document,o=navigator.userAgent,d=o.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i),l=o.match(/U3\/((\d+|\.){5,})/i),c=l&&parseInt(l[1].split(".").join(""),10)>=80,p=navigator.appVersion.match(/(iphone|ipad|ipod)/gi),s=i.devicePixelRatio||1;p||d&&d[1]>534||c||(s=1);var u=1/s,m=r.querySelector('meta[name="viewport"]');m||(m=r.createElement("meta"),m.setAttribute("name","viewport"),r.head.appendChild(m)),m.setAttribute("content","width=device-width,user-scalable=no,initial-scale="+u+",maximum-scale="+u+",minimum-scale="+u),r.documentElement.style.fontSize=a/2*s*n+"px"},e.exports=t["default"]}]);  flex(100, 1);</script>

注:不要手动设置viewport,该方案自动帮你设置

这是阿里团队的高清方案布局代码,所谓高清方案就是根据设备屏幕的DPR(设备像素比,又称DPPX,比如dpr=2时,表示1个CSS像素由4个物理像素点组成) 动态设置 html 的font-size, 同时根据设备DPR调整页面的缩放值,进而达到高清效果。

优势

  • 保证了不同设备下视觉体验的一致性
  • 根据设备屏幕的DPR,自动设置最合适的高清缩放
  • 有效解决移动端真实1px问题

绝不是每个地方都要用rem,rem只适用于固定尺寸!

在相当数量的布局情境中(比如底部导航元素平分屏幕宽,大尺寸元素),你必须使用百分比或者flex才能完美布局!

此方案默认 1rem = 100px,所以你布局的时候,完全可以按照设计师给你的效果图写各种尺寸。

比如你在效果图上量取的某个按钮元素长 55px, 宽37px ,那你直接可以这样写样式:

.myBtn {
   width: 0.55rem;
   height: 0.37rem;
   border-bottom: .01rem solid #ccc; //真实1px
}

示例DEMO1

示例DEMO1

问:不是 1rem = 100px吗,为什么我的代码写了一个宽度为3rem的元素,在电脑端的谷歌浏览器上宽度只有150px?

答:先说高清方案代码,再次强调咱们的高清方案代码是根据设备的dpr动态设置html 的 font-size,

如果dpr=1(如电脑端),则html的font-size为50px,此时 1rem = 50px

如果dpr=2(如iphone 5 和 6),则html的font-size为100px,此时 1rem = 100px

如果dpr=3(如iphone 6 sp),则html的font-size为150px,此时 1rem = 150px

再来说说效果图,一般来讲,我们的效果图宽度要么是640,要么是750,无论哪一个,它们对应设备的dpr=2,此时,1 rem = 50 × 2 = 100px。这也就是为什么高清方案默认1rem = 100px。而将1rem默认100px也是好处多多,可以帮你快速换算单位,比如在750宽度下的效果图,某元素宽度为53px,那么css宽度直接设为53/100=0.53rem了。

推荐阅读更多精彩内容