动态rem与1px边框问题的理解
当我们在项目开发中,拿到设计师的设计图,满怀欣喜的准备按照设计图将页面实现出来的时候,我们通常会遇到这个问题:
如何将页面的内容按照在不同手机屏幕浏览的情况下,比例都是不变的呢?这个时候我们就需要使用到动态rem来解决问题。
1:拿到屏幕宽度,以屏幕宽度作为rem的基准值
2:如果觉得基准值过大,将px换算成rem比较麻烦,可以将基准值缩小10倍
3:因谷歌浏览器有一个最小字体值,所以基准值不要低于这个最小字体值(12px)。
4:将rem赋值给html
var width = window.screen.width var fontSize = width/10 + 'px' document.getElementsByTagName('html')[0].style.fontSize = fontSize
当我们在写页面的时候设计师会提出这样一个要求:页面不管怎么缩放都可以,但是1px的边框必须给我是1px,不能缩放。我们会觉得这个问题很奇葩,心里想大不了直接给border:1px不就行了。可这个时候设计师又会说:我要的是手机上的实际像素1px!!!
真是有句mmp不知当讲不当讲。
好,既然需求说了,我们总不能说劳资不干了吧。那这个时候就需要了解到这个知识点:何为retina屏幕?啥是dpr?灵魂画师上图说话:
我们可以发现,在同样的大小下,2dpr的屏幕时普通屏幕像素点的4倍,3dpr的屏幕时普通屏幕像素点的9倍。这就是retina屏幕用了都说好的原因(清晰)。而设计师要的实际1px的边框就是下面这种情况:
这下我们终于明白设计师要的是啥效果了,那我们怎么解决呢?
思路:我们将border设置为1px,然后将也页面的整体根据页面的dpr缩小相应的倍数,接着将rem补偿相应的倍数,这样页面中只有1px的边框缩小了,而其他内容经过缩小和扩大,还是原来的状态。
1:获取dpr的值:
var dpr = window.devicePixelRatio
2:页面缩放相应的倍数:
注意:页面中<meta name="viewport"......只能作用一次,所以只能用js插入。记住content="width=device-width"千万不要加,不然就不会缩放了(因为这句话的意思是宽度等与设备宽度)
var scale = 1/dpr var metaEle = document.getElementById("meta") metaEle.setAttribute("content",'user-scalable=no, initial-scale='+scale+', maximum-scale='+scale+', minimum-scale='+scale)
最后我们全部代码贴上:
var width = window.screen.width var dpr = window.devicePixelRatio var scale = 1/dpr var fontSize = width/10*dpr + 'px' document.getElementsByTagName('html')[0].style.fontSize = fontSize var metaEle = document.getElementById("metaEle") //这个是meta元素 metaEle.setAttribute("content",'user-scalable=no, initial-scale='+scale+', maximum-scale='+scale+', minimum-scale='+scale)
这样,我们就可以将页面中需要加宽高的元素,换算成rem就行啦。
如:iphone5中,1rem = 64px;那我们页面中某个宽高为128px和64px的元素需,设置为width=2rem;height=1rem就可以啦。
2017/9/18更新:
在阅读大漠老师的文章后,发现这个之前的方法还是有不足之处(仅作用于dpr为整数,并且viewport为360,720或1080),所以将代码改为如下方式,其具体代表的意思请参考:传送门
metaEl.setAttribute('content', 'target-densitydpi=device-dpi,user-scalable=no,initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale); //不通过加入具体设备的白名单,通过此特征检测 docEl.clientWidth == 980 //initial-scale=1不能省,因为上面设置为其他的scale了,需要重置回来 if(docEl.clientWidth == 980) { metaEl.setAttribute('content', 'target-densitydpi=device-dpi,width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1'); }