为什么移动端css里面写了1px, 实际看起来比1px粗.？
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
viewport的设置和屏幕物理分辨率是按比例而不是相同的. 移动端window对象有个devicePixelRatio属性, 它表示设备物理像素和css像素的比例, 在retina屏的iphone手机上, 这个值为2或3, css里写的1px长度映射到物理像素上就有2px或3px那么长.
解决方案
- 只有一边的线解决方案
.li{
padding:0;
height:2.4rem;
border-bottom: none;
position: relative;
}
.li::after{
content: '';
position: absolute;
bottom:0;
left:0;
width:100%;
height:1px;
background: #e5e5e5;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
- 四个边都有的线解决方案
div {
width: 200 px;
height: 200 px;
/*border: 1px solid red;*/
margin: 50 px auto;
position: relative;
}
div::after {
content: "";
pointer - events: none;
/* 防止点击触发 */
box - sizing: border - box;
position: absolute;
width: 200 % ;
height: 200 % ;
left: 0;
top: 0;
border - radius: 20 px;
border: 1 px solid red; -
webkit - transform: scale(0.5); -
webkit - transform - origin: 0 0;
transform: scale(0.5);
transform - origin: 0 0;
}
