关于dpr的问题可以看看张鑫旭大神的文章设备像素比devicePixelRatio简单介绍和简书一篇文章前端工程师需要明白的「像素」
下面直接开撸。。。。
使用媒体查询，定义不同最小像素比下的 类border-1px
@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-aspect-ratio: 1.5) {
.border-1px{
&::after{
transform:scaleY(0.7); //1.5 * 0.7接近1
}
}
}
@media (-webkit-min-device-pixel-ratio: 2),(min-device-aspect-ratio: 2) {
.border-1px{
&::after{
transform:scaleY(0.5); //2 * 0.5 = 1
}
}
}
@media (-webkit-min-device-pixel-ratio: 2.5),(min-device-aspect-ratio: 2.5) {
.border-1px{
&::after{
transform:scaleY(0.4); //2.5 * 0.4 = 1
}
}
}
@media (-webkit-min-device-pixel-ratio: 3),(min-device-aspect-ratio: 3) {
.border-1px{
&::after{
transform:scaleY(0.333); //3 * 0.333 接近 1
}
}
}
@media (-webkit-min-device-pixel-ratio: 3.5),(min-device-aspect-ratio: 3.5) {
.border-1px{
&::after{
transform:scaleY(0.2857); //3.5 * 0.2857 接近 1
}
}
}
定义mixin border-bottom
@mixin border-bottom($height,$color) {
position:relative;
&::after{
position: absolute;
display: block;
left: 0;
bottom: 0;
width: 100%;
border-top: $height solid $color;
content: '';
}
}
@mixin border-top($height,$color) {
position:relative;
&::after{
position: absolute;
display: block;
left: 0;
top: 0;
width: 100%;
border-top: $height solid $color;
content: '';
}
}
使用
<div id="navbar"></div>
如果想给#navbar添加一个1像素的下边框，先给#navbar添加一个类border-1px如下：
<div id="navbar" class="border-1px"></div>
然后给#navbar设置样式：
#navbar{
@include border-bottom(1px, #ccc);
}
