内容简介:需要解决1像素问题:参考cube-ui的mixin.styl 中1像素解决方案,如下:我们的项目中所有样式文件都是用less写的,而且就用一个mixin.styl 中的这个方法而已
需求:
需要解决1像素问题:
物理像素是设备像素的2倍,在手机上预览,1px边框会变成2px
参考cube-ui的mixin.styl 中1像素解决方案,如下:
border-1px($color = #ccc, $radius = 2PX, $style = solid)
position: relative
&::after
content: ""
pointer-events: none
display: block
position: absolute
left: 0
top: 0
transform-origin: 0 0
border: 1PX $style $color
border-radius: $radius
box-sizing border-box
width 100%
height 100%
@media (min-resolution: 2dppx)
width: 200%
height: 200%
border-radius: $radius * 2
transform: scale(.5)
@media (min-resolution: 3dppx)
width: 300%
height: 300%
border-radius: $radius * 3
transform: scale(.333)
问题:
我们的项目中所有样式文件都是用less写的,而且就用一个mixin.styl 中的这个方法而已
解决:
改成less 语法,对照less官方文档,写入 mixin.less文件,引用
除了语法的不同,变量定义、方法的调用外,改了一处
//原来: border: 1PX $style $color //改成:我只需要下边框 border-bottom: 1PX @style @color;
改后代码如下:
.border-1px(@color: #ccc, @radius: 2PX, @style: solid){
position: relative;
&::after {
content: "";
pointer-events: none;
display: block;
position: absolute;
left: 0;
top: 0;
transform-origin: 0 0;
border-bottom: 1PX @style @color;
border-radius: @radius;
box-sizing: border-box;
width: 100%;
height: 100%;
@media (min-resolution: 2dppx){
width: 200%;
height: 200%;
border-radius: @radius * 2;
transform: scale(.5);
}
@media (min-resolution: 3dppx){
width: 300%;
height: 300%;
border-radius: @radius * 3;
transform: scale(.333);
}
}
}
使用:
@import "../../assets/style/mixin.less";
li {
.border-1px(#E1E1E1);
}
在手机上预览,已经发生变化:
修改前:
修改后:
问题解决,下班走人!
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 边框攻略:纯CSS渐变虚框、边框滚动动画
- 掌握web开发基础系列--物理像素、逻辑像素、css像素
- css-虚线边框滚动效果
- 【译】只用 CSS 就能做到的像素画/像素动画
- 按钮悬停边框和背景动画集合
- 人工智能目标检测:边框回归
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Head First JavaScript Programming
Eric T. Freeman、Elisabeth Robson / O'Reilly Media / 2014-4-10 / USD 49.99
This brain-friendly guide teaches you everything from JavaScript language fundamentals to advanced topics, including objects, functions, and the browser’s document object model. You won’t just be read......一起来看看 《Head First JavaScript Programming》 这本书的介绍吧!