關(guān)于dpr的問題可以看看張鑫旭大神的文章設(shè)備像素比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設(shè)置樣式：
#navbar{
@include border-bottom(1px, #ccc);
}
