手机一像素问题
工作中我们会遇到很多移动端边框1像素的需求，这里为大家准备一份1像素的样式整理。
移动端1px变粗的原因
为什么移动端css里面写了1px, 实际看起来比1px粗. 其实原因很好理解:这2个’px’的含义是不一样的. 移动端html的header总会有一句
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
这句话定义了本页面的viewport的宽度为设备宽度,初始缩放值和最大缩放值都为1,并禁止了用户缩放. viewport通俗的讲是浏览器上可用来显示页面的区域, 这个区域是可能比屏幕大的.
手机存在一个能完美适配的理想viewport, 分辨率相差很大的手机的理想viewport的宽度可能是一样的, 这样做的目的是为了保证同样的css在不同屏幕下的显示效果是一致的, 上面的meta实际上是设置了ideal viewport的宽度.
以实际举例: iphone3和iphone4的屏幕宽度分别是320px,640px, 但是它们的ideal viewport的宽度都是320px, 设置了设备宽度后, 320px宽的元素都能100%的填充满屏幕宽. 不同手机的ideal viewport宽度是不一样的, 常见的有320px, 360px, 384px. iphone系列的这个值在6之前都是320px, 控制viewport的好处就在于一套css可以适配多个机型.
看懂的人应该已经明白 1px变粗的原因了, viewport的设置和屏幕物理分辨率是按比例而不是相同的. 移动端window对象有个devicePixelRatio属性, 它表示设备物理像素和css像素的比例, 在retina屏的iphone手机上, 这个值为2或3, css里写的1px长度映射到物理像素上就有2px或3px那么长。
Less版本
@charset "utf-8";
/* border
* 因，边框是由伪元素区域遮盖在父级
* 故，子级若有交互，需要对子级设置
* 定位 及 z轴
*/
.border-1(@color: #D8D8D8, @radius: 0px){
position:absolute;
&::before{
content: "\0020";
overflow: hidden;
position: absolute;
box-sizing: border-box;
pointer-events: none; /* 防止点击触发 */
top: 0;
left: 0;
height: 100%;
width: 100%;
transform-origin: 0 0;
border:1px solid @color;
-webkit-border-radius:@radius ;
-moz-border-radius:@radius ;
border-radius: @radius ;
}
@media (max--moz-device-pixel-ratio: 1.49), (-webkit-max-device-pixel-ratio: 1.49), (max-device-pixel-ratio: 1.49), (max-resolution: 143dpi), (max-resolution: 1.49dppx) {
/* 默认值，无需重置 */
}
@media (min--moz-device-pixel-ratio: 1.5) and (max--moz-device-pixel-ratio: 2.49), (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49), (min-device-pixel-ratio: 1.5) and (max-device-pixel-ratio: 2.49), (min-resolution: 144dpi) and (max-resolution: 239dpi), (min-resolution: 1.5dppx) and (max-resolution: 2.49dppx) {
&::before {
width: 200%;
height: 200%;
transform: scale(.5);
}
}
@media (min--moz-device-pixel-ratio: 2.5), (-webkit-min-device-pixel-ratio: 2.5), (min-device-pixel-ratio: 2.5), (min-resolution: 240dpi), (min-resolution: 2.5dppx) {
&::before {
width: 300%;
height: 300%;
transform: scale(.33333);
}
}
}
自己在工作中使用的less，这里采用了less函数去解决
调用方法
.类名{
.border-1(#979797,8px) // 此处可传入相应的颜色与圆角参数
}
Css版
@charset "utf-8";
.border-1-circular{
position: relative;
}
.border-1-circular:before{
content: "";
pointer-events: none; /* 防止点击触发 */
box-sizing: border-box;
position: absolute;
width: 200%;
height: 200%;
left: 0;
top: 0;
border-radius: 8px;
border:1px solid #999;
-webkit-transform:scale(0.5);
-webkit-transform-origin: 0 0;
transform:scale(0.5);
transform-origin: 0 0;
}
/* border
* 因，边框是由伪元素区域遮盖在父级
* 故，子级若有交互，需要对子级设置
* 定位 及 z轴
*/
.border-1{
position: relative;
}
.border-1::before {
content: "\0020";
overflow: hidden;
position: absolute;
box-sizing: border-box;
pointer-events: none; /* 防止点击触发 */
top: 0;
left: 0;
height: 100%;
width: 100%;
transform-origin: 0 0;
}
@media (max--moz-device-pixel-ratio: 1.49), (-webkit-max-device-pixel-ratio: 1.49), (max-device-pixel-ratio: 1.49), (max-resolution: 143dpi), (max-resolution: 1.49dppx) {
/* 默认值，无需重置 */
}
@media (min--moz-device-pixel-ratio: 1.5) and (max--moz-device-pixel-ratio: 2.49), (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49), (min-device-pixel-ratio: 1.5) and (max-device-pixel-ratio: 2.49), (min-resolution: 144dpi) and (max-resolution: 239dpi), (min-resolution: 1.5dppx) and (max-resolution: 2.49dppx) {
.border-1::before {
width: 200%;
height: 200%;
transform: scale(.5);
}
}
@media (min--moz-device-pixel-ratio: 2.5), (-webkit-min-device-pixel-ratio: 2.5), (min-device-pixel-ratio: 2.5), (min-resolution: 240dpi), (min-resolution: 2.5dppx) {
.border-1::before {
width: 300%;
height: 300%;
transform: scale(.33333);
}
}
css版本因为没有预处理，需要更改时，采用覆盖的方式就可以了。
当然还有很多的其他方式，例如：
border: .5px solid #eee;
还有transform：translateY的方法，大家都可以尝试。
还有其他更改的方法以及错误，也可以和我说呀 ~
