移动端1px边框详解
第一种
.b-b {
position: relative;
}
.b-b:after {
content: " ";
position: absolute;
left: 0;
bottom: 0;
right: 0;
/*height: 1px;*/
border-top: 1px solid #d9d9d9;
color: #d9d9d9;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
node-sass 和sass-loader(vue)
第二种
@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($height, $color) { //封装成的border height指的是大小，到时候需要定位 加z-index；不然会被遮住
position: relative;
&::after {
position: absolute;
display: block;
left: 0;
bottom: 0;
width: 100%;
height: .78rem;
border: $height solid $color;
content: '';
border-radius: .06rem;
}
}
@mixin border-bottom($height, $color) { //封装成的border-bottom
position: relative;
&::after {
position: absolute;
display: block;
left: 0;
bottom: 0;
width: 100%;
border-top: $height solid $color;
content: '';
}
}
@mixin border-top($height, $color) { // 封装成的border-top
position: relative;
&::after {
position: absolute;
display: block;
left: 0;
top: 0;
width: 100%;
border-top: $height solid $color;
content: '';
}
}
调用
@include border(1px, #d7d7d7);
第三种
@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
}
}
}
直接写border 就可以了
