最近一直在vue移动端项目,每次一开始就要解决border:1px的问题,参考了大牛的文章后自己总结下来当作笔记
参考 :
张鑫旭:http://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/
https://www.cnblogs.com/lunarorbitx/p/5287309.html
产生原因 :
在Retina屏幕上(Retina是一种像素压缩屏幕,把更多的像素压缩到一块屏幕里达到为了更高的分辨率,其分辨率始终是其他屏幕的2倍),所以1px的边框在devicePixelRatio的retina屏上会显示为2px。
解决方案 :
1. 缩小像素值(例子只取devicePixelRatio为2的,其他为1.5和3的,只要devicePixelRatio值乘以border-width等于1即可)
1 .border_1px { 2 display: block; 3 width:100%; 4 border-top:1px solid rgba(7,17,27,.1); 5 } 6 7 @media (min-device-pixel-ratio: 2),(-webkit-min-device-pixel-ratio: 2) { 8 .border_1px { display: block; 9 width:100%; 10 border-top:0.5px solid rgba(7,17,27,.1); } 11 }
原文地址:https://www.cnblogs.com/hughes5135/p/8723592.html
时间: 2024-08-01 22:46:10