前言
在移动端中,宽度100%,1px的线看起来要比pc端中宽度100%,1px的线粗,
那是因为css中的1px并不等于移动设备(物理像素)的1px。物理像素显示是1个像素代表2个像素,所以出现为2px
所以我们在移动端中为了让1px的线“看起来”苗条些,会采用一些手段。
解决办法
实现1px的线
方法一:transform
在移动端中,我们对宽度100%,1px的线进行改造,将其宽度设为200%,高度不变,之后使用transform对其缩放50%。
.line{
200% ;
height:1px ;
transform:scale(.5) ;
-ms-transform:scale(.5) ;
-o-transform:scale(.5) ;
-webkit-transform:scale(.5) ;
-moz-transform:scale(.5) ;
transform-origin:top left ;
}
这样苗条的线就出现了!
实现1px的边框
方法一:伪类 + transform
原始border:去掉border,设置相对定位
新border:设置 :before 或者 :after 重做 border ,并使用 transform 的 scale 缩小一半,设置绝对定位
.scale-1px{ border:none; } .scale-1px:after{ content: ''; position: absolute; top: 0; left: 0; border: 1px solid #000; -webkit-box-sizing: border-box; box-sizing: border-box; 200%; height: 200%; -webkit-transform: scale(0.5); transform: scale(0.5); -webkit-transform-origin: left top; transform-origin: left top; } |
优点:
-
所有场景都能满足
-
支持圆角(伪类和本体类都需要加border-radius)
缺点:
对于已经使用伪类的元素(例如clearfix),可能需要多层嵌套
方法二:-webkit-min-device-pixel-ratio + 媒体查询
media query对应devicePixelRatio有个查询值-webkit-min-device-pixel-ratio, css可以写成这样
.border { border: 1px solid #999 } @media screen and (-webkit-min-device-pixel-ratio: 2) { .border { border: 0.5px solid #999 } } @media screen and (-webkit-min-device-pixel-ratio: 3) { .border { border: 0.333333px solid #999 } }
|
缺点:
- 安卓与低版本IOS不适用
实现边框宽度为1px,宽高各为父元素
方法一:伪类 + transform
.box1 {
position: relative;
border: none;
height: 100px;
100px;
text-align: center;
}
.box1 div::after {
content: '';
border:solid 1px aqua;
position: absolute;
left: -50%;
top: -50%;
bottom: -50%;
right: -50%;
-webkit-transform: scale(.5);
transform: scale(.5);
box-sizing: border-box;
}
<div class="box1">
<div></div>
</div>
|