乐趣区

关于css:1PX问题

jiezi

产生起因

  • 存在设施像素比：
 设施像素比（DPR）: 设施像素比 = 设施像素 / 设施独立像素
  • 设施像素是物理像素，也就是屏幕上有多少个逻辑点受你管制
  • 设施独立像素是逻辑像素，能够了解成屏幕的长宽
  • DPR 等于 2 即示意，1px 的宽度，用了屏幕里的两个像素点来显示
  • CSS 代码里写的像素，在挪动端，对应的就是物理像素
  • 而因为 UED 出图是依照逻辑像素出图的，所以如果依照 UED 里的像素写，就会导致最终渲染进去 1PX 的款式比设计图要粗，因为假如是在 DPR 等于 2 的状况下，UED 的 1PX 对应物理像素的 0.5PX，但你写了 1PX，就变粗了
  • 那么间接把所有 UED 的尺寸都除 DPR 能够解决问题吗？显然还是会有问题，特地是安卓机型上，因为他能辨认的最小像素是 1，0.5px 会被疏忽，导致在安卓机型上，你设置了 0.5px 的边框，然而最终渲染却没有边框

解决方案

  • 设置 viewport 以及 rem
<meta name="viewport" id="WebViewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

var viewport = document.querySelector("meta[name=viewport]")
    
if (window.devicePixelRatio == 1) {viewport.setAttribute('content', 'width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no')
}
    
if (window.devicePixelRatio == 2) {viewport.setAttribute('content', 'width=device-width, initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no')
}
    
if 
(window.devicePixelRatio == 3) {viewport.setAttribute('content', 'width=device-width, initial-scale=0.333333333, maximum-scale=0.333333333, minimum-scale=0.333333333, user-scalable=no')
}    

var docEl = document.documentElement;    
var fontsize = 10 * (docEl.clientWidth / 320) + 'px';    
docEl.style.fontSize = fontsize;
  • 通过获取 DPR，动静的对 viewport 进行缩放，比方 DPR = 2，缩放比例就是 0.5，通过放大 0.5 倍，本来 1：1 比例下会变宽的像素，就能失常展现了
  • 后续的设置 fontSize 是为了适配不同的屏幕宽度，这样解决后 fontSize 是依据屏幕宽度变动的，占屏幕宽度的比例是固定的，而 1rem 即等于根元素的 fontSize，所以后续用 rem 写的 css 在不同屏幕宽度下的渲染都是统一的
退出移动版