1、伪元素 + css3的缩放巧妙地实现；
基本步骤就是：
设置目标元素定位参照
给目标元素添加一个伪元素before或者after，并设置绝对定位
给伪元素添上1px的边框
设置伪元素的宽高为目标元素的2倍
缩小0.5倍（变回目标元素的大小）
使用border-box把border包进来
代码如下
<div class="item4">测试用的边框</div>
<div class="item5">测试用的边框</div>
.item4, .item5 {
width: 200px;
height: 100px;
position: relative;
}
.item4 {
border: 1px solid #000;
}
.item5::before {
content: '';
position: absolute;
width: 200%;
height: 200%;
border: 1px solid #000;
transform-origin: 0 0;
transform: scale(0.5, 0.5);
box-sizing: border-box;
}
4、采用transform: scale()的方式
就是将绘制出来的线条的高度进行半倍的缩放，代码如下
<div>
<p>点击1</p>
<p>点击2</p>
</div>
p{
margin: 50px auto;
padding: 5px 10px 5px 10px;
color: red;
text-align: center;
width: 60px;
}
p:first-child{
border-bottom: 1px solid red;
}
p:last-child{
position: relative;
}
p:last-child:after {
position: absolute;
content: '';
width: 100%;
left: 0;
bottom: 0;
height: 1px;
background-color: red;
-webkit-transform: scale(1,0.5);
transform: scale(1,0.5);
-webkit-transform-origin: center bottom;
transform-origin: center bottom
}
3、采用 border-image的方式
这个其实就比较简单了，直接制作一个0.5像素的线条和其搭配使用的背景色的图片即可
代码如下
<div>
<p>点击1</p>
<p>点击2</p>
</div>
p{
margin: 50px auto;
padding: 5px 10px 5px 10px;
color: red;
text-align: center;
width: 60px;
}
p:first-child{
border-bottom: 1px solid red;
}
p:last-child{
border-width: 0 0 1px 0; border-image: url("img/line_h.gif") 2 0 round;
}
4、采用background-image的方式
这里采用的是渐变色linear-gradient的方式，代码如下
<div>
<p>点击1</p>
<p>点击2</p>
</div>
p{
margin: 50px auto;
padding: 5px 10px 5px 10px;
color: red;
text-align: center;
width: 60px;
}
p:first-child{
border-bottom: 1px solid red;
}
p:last-child{
background-image: -webkit-linear-gradient(bottom,red 50%,transparent 50%);
background-image: linear-gradient(bottom,red 50%,transparent 50%);
background-size: 100% 1px;
background-repeat: no-repeat;
background-position: bottom right;
}
5、js动态设置viewport的方案
一些大厂（所谓的淘宝）的解决方案就是使用js动态获取屏幕的设备像素比，然后动态设置viewport。当然也是我认为目前最好的解决方案。
meta.setAttribute('content', 'initial-scale=' + 1/dpr + ', maximum-scale=' + 1/dpr + ', minimum-scale=' + 1/dpr + ', user-scalable=no');
我们知道，一般我们获取到的视觉稿大部分是iphone6的，所以我们看到的尺寸一般是双倍大小的，在使用rem之前，我们一般会自觉的将标注/2，其实这也并无道理，但是当我们配合rem使用时，完全可以按照视觉稿上的尺寸来设置。
设计给的稿子双倍的原因是iphone6这种屏幕属于高清屏，也即是设备像素比(device pixel ratio)dpr比较大，所以显示的像素较为清晰。
一般手机的dpr是1，iphone4，iphone5这种高清屏是2，iphone6s plus这种高清屏是3，可以通过js的window.devicePixelRatio获取到当前设备的dpr，所以iphone6给的视觉稿大小是（*2）750×1334了。
拿到了dpr之后，我们就可以在viewport meta头里，取消让浏览器自动缩放页面，而自己去设置viewport的content例如（这里之所以要设置viewport是因为我们要实现border1px的效果，在scale的影响下，高清屏中就会显示成0.5px的效果）
参考链接：
http://developer.51cto.com/art/201510/493591.htm
https://blog.csdn.net/yisuowushinian/article/details/52744508
网友评论