学习前端方向也有一段时间了,起初做过一些项目,总是发现做完之后自己的边框会变得比较粗,后面翻阅了部分资料慢慢的才了解了这个问题,大致列举了几种解决的办法。
在window对象中有一个
属性,他可以反应CSS中的像素与设备的像素比。然而1px在不同的移动设备上都等于这个移动设备的1px,这是因为不同的移动设备有不同的像素密度。有关这个属性,它的官方的定义为:设备物理像素和设备独立像素的比例,也就是
- devicePixelRatio
- devicePixelRatio = 物理像素 / 独立像素
还记不记得移动端html的header这句话
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
这句话定义了本页面的
的宽度为设备宽度,初始缩放值和最大缩放值都为1,并禁止了用户缩放.手机存在一个能完美适配的理想
- viewport
, 分辨率相差很大的手机的理想
- viewport
的宽度可能是一样的, 这样做的目的是为了保证同样的css在不同屏幕下的显示效果是一致的, 上面的meta实际上是设置了
- viewport
的宽度.
- ideal viewport
的宽度都是320px, 设置了设备宽度后, 320px宽的元素都能100%的填充满屏幕宽. 不同手机的
- ideal viewport
宽度是不一样的, 常见的有320px, 360px, 384px. iphone系列的这个值在6之前都是320px, 控制
- ideal viewport
的好处就在于一套css可以适配多个机型.
- viewport
看懂的人应该已经明白 1px变粗的原因了,
的设置和屏幕物理分辨率是按比例而不是相同的. 移动端window对象有个
- viewport
属性, 它表示设备物理像素和css像素的比例, 在retina屏的iphone手机上, 这个值为2或3, css里写的1px长度映射到物理像素上就有2px或3px那么长.谈到这里那么就会有人问,有哪些解决的办法呢?
- devicePixelRatio
实现
- transform
对于解决1px边框问题,我个人觉得最完美的解决办法还是伪类+
比较好。原理:是把原先元素的
- transform
去掉,然后利用
- border
或者
- :before
重做
- :after
,并
- border
的
- transform
缩小一半,原先的元素相对定位,新做的
- scale
绝对定位。
- border
样式设置
- border
- .scale{
- position: relative;
- border:none;
- }
- .scale:after{
- content: '';
- position: absolute;
- bottom: 0;
- background: #000;
- width: 100%;
- height: 1px;
- -webkit-transform: scaleY(0.5);
- transform: scaleY(0.5);
- -webkit-transform-origin: 0 0;
- transform-origin: 0 0;
- }
- .scale{
- position: relative;
- margin-bottom: 20px;
- border:none;
- }
- .scale:after{
- content: '';
- position: absolute;
- top: 0;
- left: 0;
- border: 1px solid #000;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- width: 200%;
- height: 200%;
- -webkit-transform: scale(0.5);
- transform: scale(0.5);
- -webkit-transform-origin: left top;
- transform-origin: left top;
- }
- if (window.devicePixelRatio && devicePixelRatio >= 2) {
- document.querySelector('ul').className = 'scale';
- }
这是淘宝移动端采取的方案, github的地址:github.com/amfe/lib-fl…. 前面已经说过1px变粗的原因就在于一刀切的设置viewport宽度, 如果能把viewport宽度设置为实际的设备物理宽度, css里的1px不就等于实际1px长了么. flexible.js就是这样干的.
里面的scale值指的是对ideal viewport的缩放, flexible.js检测到IOS机型, 会算出scale = 1/devicePixelRatio, 然后设置viewport
- metaEl = doc.createElement('meta');
- metaEl.setAttribute('name', 'viewport');
- metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
devicePixelRatio=2时输出meta如下, 这样viewport与ideal viewport的比是0.5, 也就与设备物理像素一致
- <meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">
在devicePixelRatio = 3 时,输出viewport
- <meta name="viewport" content="initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no">
利用css 对阴影处理的方式实现0.5px的效果
- .box - shadow - 1px {
- box - shadow: inset 0px - 1px 1px - 1px#c8c7cc;
- }
来源: https://juejin.im/entry/59f052c26fb9a0450c489d79