rem为单位时移动端高清方案

发表于   |   分类于

介绍

rem

1. anima-hd统一采用rem做单位, 想使用物理1px的就用1px, 比如 border: 1px solid red；

原理是根据rem将页面放大dpr倍, 然后 viewport 设置为1/dpr。

比如iphone6 plus的dpr为3, 则页面整体放大3倍, 1px (css单位)在plus下默认为3px(物理像素)
然后viewport 设置为1/3, 这样页面整体缩回原始大小。 从而实现高清。

vw的模式是将 rem跟 width 做关联, 以 6.4rem = 100vw 做基准。

这么做的好处是设计稿的单位是多少, 除以100就可以给rem来使用；
如果是less之类的预编译, 可以 @px: 0.01rem ; 然后 font-size: 24*@px; 来使用！
也可以直接裸写 font-size: .24rem；

vh同理:
这里不实现vmin|vmax, 实际场景中遇到较少(一般都用 flex )。
如果一个页面用到了 flex + vw , 请用flex模式, vw用百分比或者css的vw等其他方式。

2. 由于viswport的设置，强烈建议复制代码内联：

  • Flex模式：https://a.alipayobjects.com/anima-hd/1.0.5/flex.js

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

  • VW模式：https://a.alipayobjects.com/anima-hd/1.0.5/vw.js

    1
    !function(e){function t(n){if(i[n])return i[n].exports;var r=i[n]={exports:{},id:n,loaded:!1};return e[n].call(r.exports,r,r.exports,t),r.loaded=!0,r.exports}var i={};return t.m=e,t.c=i,t.p="",t(0)}({0:function(e,t,i){e.exports=i(8)},5:function(e,t){e.exports=function(e){e=e||window;var t=e.document,i=navigator.userAgent,n=i.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i),r=i.match(/U3\/((\d+|\.){5,})/i),o=r&&parseInt(r[1].split(".").join(""),10)>=80,a=navigator.appVersion.match(/(iphone|ipad|ipod)/gi),d=e.devicePixelRatio||1,s=t.documentElement,p="",l=1,c=1/d;if(a);else if(n&&n[1]>534||o){o||(p+="target-densitydpi=device-dpi,"),s.style.fontSize="100px";var u=t.createElement("div");u.setAttribute("style","width: 1rem;display:none"),s.appendChild(u);var m=e.getComputedStyle(u).width;if(s.removeChild(u),"100px"!==m){var v=parseInt(m);l=100/v,c*=l}}else c=1;t.querySelector('meta[name="viewport"]').setAttribute("content",p+"width=device-width,user-scalable=no,initial-scale="+c+",maximum-scale="+c+",minimum-scale="+c),s.style.fontSize=.15625*s.clientWidth*l+"px",e.addEventListener("resize",function(){s.style.fontSize=.15625*s.clientWidth*l+"px"})}},8:function(e,t,i){i(5)()}});

  • VW-750模式（推荐）：https://a.alipayobjects.com/anima-hd/1.0.5/vw-750.js

    1
    !function(e){function t(n){if(i[n])return i[n].exports;var r=i[n]={exports:{},id:n,loaded:!1};return e[n].call(r.exports,r,r.exports,t),r.loaded=!0,r.exports}var i={};return t.m=e,t.c=i,t.p="",t(0)}([function(e,t,i){e.exports=i(7)},,,,function(e,t){e.exports=function(e){e=e||window;var t=e.document,i=navigator.userAgent,n=i.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i),r=i.match(/U3\/((\d+|\.){5,})/i),o=r&&parseInt(r[1].split(".").join(""),10)>=80,a=navigator.appVersion.match(/(iphone|ipad|ipod)/gi),d=e.devicePixelRatio||1,s=t.documentElement,p="",l=1,c=1/d;if(a);else if(n&&n[1]>534||o){o||(p+="target-densitydpi=device-dpi,"),s.style.fontSize="100px";var u=t.createElement("div");u.setAttribute("style","width: 1rem;display:none"),s.appendChild(u);var m=e.getComputedStyle(u).width;if(s.removeChild(u),"100px"!==m){var v=parseInt(m);l=100/v,c*=l}}else c=1;t.querySelector('meta[name="viewport"]').setAttribute("content",p+"width=device-width,user-scalable=no,initial-scale="+c+",maximum-scale="+c+",minimum-scale="+c),s.style.fontSize=100/750*s.clientWidth*l+"px",e.addEventListener("resize",function(){s.style.fontSize=100/750*s.clientWidth*l+"px"})}},,,function(e,t,i){i(4)()}]);