博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
动态rem与1px边框问题的理解
阅读量:5968 次
发布时间:2019-06-19

本文共 2240 字,大约阅读时间需要 7 分钟。

当我们在项目开发中,拿到设计师的设计图,满怀欣喜的准备按照设计图将页面实现出来的时候,我们通常会遇到这个问题:

如何将页面的内容按照在不同手机屏幕浏览的情况下,比例都是不变的呢?这个时候我们就需要使用到动态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/dprvar 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.devicePixelRatiovar scale = 1/dprvar fontSize = width/10*dpr + 'px'document.getElementsByTagName('html')[0].style.fontSize = fontSizevar 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');}

  

 

转载于:https://www.cnblogs.com/momozjm/p/7248937.html

你可能感兴趣的文章
outlook自定义邮件提示声音以及设置接收邮件的间隔时间
查看>>
值传递、指针传递、引用传递的区别
查看>>
facebook 分享,遇到的错误
查看>>
svn 部署问题总结
查看>>
我的友情链接
查看>>
一个用了统计CPU 内存 硬盘 使用率的shell脚本
查看>>
如何恢复默认域策略和默认域控制器策略
查看>>
笔记本进水
查看>>
Nginx配置文件nginx.conf (Apache)
查看>>
jquery和JavaScript区别
查看>>
pxe方式安装gentoo
查看>>
Project Management Library项目管理甘特图控件
查看>>
MySQL存储过程详解
查看>>
解决查看框架源码时 class file editor source not found
查看>>
JDBC接口
查看>>
脏读,不可重复读,幻读
查看>>
ssh反向主动连接 及脚本加密
查看>>
Mysql数据库误删除数据恢复成功
查看>>
自己收藏的前端网站
查看>>
使用mybatis自动生成指定规则的编号
查看>>