使用的是gulp-less编译less,gulp-postcss和postcss-px2rem装换px,/no/表示不编译,项目采用的是flexible.js,安卓的dpr统一为1,安卓中1px转换成rem是看不见的。
1、如果不是特别纠结那点像素,像圆角边框就可以这么实现: border:1px solid red;/no/ border-radius:10px;
2、可以用渐变来实现
3、伪类
// 移动1像素表现
.setTopLine(@c: #E6E6E6) {
content: " ";
position: absolute;
left: 0;
top: 0;
right: 0;
height: 1px;/*no*/
border-top: 1px solid @c;/*no*/
color: @c;
transform-origin: 0 0;
transform: scaleY(0.5);
}
.setBottomLine(@c: #E6E6E6) {
content: " ";
position: absolute;
left: 0;
bottom: 0;
right: 0;
height: 1px;/*no*/
border-bottom: 1px solid @c;/*no*/
color: @c;
transform-origin: 0 100%;
transform: scaleY(0.5);
}
.setLeftLine(@c: #E6E6E6) {
content: " ";
position: absolute;
left: 0;
top: 0;
width: 1px;/*no*/
bottom: 0;
border-left: 1px solid @c;/*no*/
color: @c;
transform-origin: 0 0;
transform: scaleX(0.5);
}
.setRightLine(@c: #E6E6E6) {
content: " ";
position: absolute;
right: 0;
top: 0;
width: 1px;/*no*/
bottom: 0;
border-right: 1px solid @c;/*no*/
color: @c;
transform-origin: 100% 0;
transform: scaleX(0.5);
}