最近在做一个移动端项目,涉及到1像素问题
其实质就是移动端的css里写1px,看起来比1px粗,这就是物理像素和逻辑像素的区别。物理像素和逻辑像素之间存在一个比例关系,在Javascript中可以用window.devicePixelRatio来获取,也可以用媒体查询的-webkit-min-device-pixel-ratio来获取,具体的比例差距由设备决定
如何解决这个问题才是重点,下面集中提出解决方案:
1.媒体查询利用设备像素比缩放,设置小数像素
css可以写成这样: .border{border:1px solid #999} @media screen add(-webkit-min-device-pixel-radio:2) { .border{border 0.5px solid #999} } @media screen add(-webkit-min-device-pixel-radio:3) { .border{border 0.33333px solid #999} }//具体的边框值按照比例计算即可
2.使用box-shadow模拟边框
利用css对阴影处理的方式实现0.5px的效果 .box{ box-shadow: 0px 1px 1px -1px black;}
复习下box-shadow属性的用法:
box-shadow: h-shadow v-shadow blur spread color inset;
值 | 描述 |
---|---|
h-shadow | 必需。水平阴影的位置。允许负值。 |
v-shadow | 必需。垂直阴影的位置。允许负值。 |
blur | 可选。模糊距离。 |
spread | 可选。阴影的尺寸。 |
color | 可选。阴影的颜色。请参阅 CSS 颜色值。 |
inset | 可选。将外部阴影 (outset) 改为内部阴影。 |
3.利用viewport+rem
同时设置对应viewport的rem基准值
在devicePixelRatio=2时,输出viewport:
<meta name="viewport" content="initial-scale=0.5 maximum-scale=0.5 minimum-scale=0.5,user-scalable=no>
利用js修改动态修改:
var viewport=document.querySelector("meta[name=viewport")//返回文档中匹配指定 CSS 选择器的一个元素。 if(window.devicePixelRatio==1){ viewport.setAttribute(‘content‘,‘width=device-width‘,‘initial-scale=1,maximum-scale=1,minimum-scale=1,user-scale=no‘) } if(window.devicePixelRatio==2){ viewport.setAttribute(‘content‘,‘width=device-width‘,‘initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5,user-scale=no‘) } if(window.devicePixelRatio==3){ viewport.setAttribute(‘content‘,‘width=device-width‘,‘initial-scale=0.3333,maximum-scale=0.3333,minimum-scale=0.3333,user-scale=no‘) } var element=document.documentElementvar fontsize=10*(element.clientWidth/320)+‘px‘;element.style.fontSize=fontsize
4伪类+transform实现
先把原先元素的border去掉,然后利用:before或者:after重做border,并transform的scale缩小一半,原先的元素相对定位,新做的border绝对定位
.box{ position: relative; border: none; } .box:after{ content: ‘‘; position: absolute; bottom: 0; left:0 background: #000000; width: 100%; height: 1px; -webkit-transform: scaleY(0.5); }
原文地址:https://www.cnblogs.com/yuan233/p/10328087.html
时间: 2024-10-13 22:40:02