1px物理像素 · 要努力

实现不使用 border 画出1px高的线，在不同浏览器的标准模式与怪异模式下都能保持一致的效果。 ~~~ <div style="height:1px;overflow:hidden;background:red"></div> ~~~ <div id="div4"> <h2> 4， 1px物理像素 </h2></div> dpr = 实际设备宽度 / 开发时设备宽度 = 物理像素 / CSS像素 ###### 4-1，方法1 ```javascript <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"> <title>1px物理像素@cookie_fzx</title> <style type="text/css"> *{ margin: 0; padding: 0; } #box { width: 200px; height: 200px; /*width: 0.5rem;*/ /*height: 0.5rem;*/ background: yellow; border-bottom: 1px solid #000; } </style> </head> <body> <div id="box"></div> </body> <script type="text/javascript"> window.onload = function (ev) { // dpr = 实际设备宽度 / 开发时设备宽度 = 物理像素 / CSS像素 var dpr = window.devicePixelRatio; // 缩放比例 var scale = 1/dpr; // 获取meta标签 var metaNode = document.querySelector('meta[name=""]'); metaNode.setAttribute('content','width=device-width,initial-scale='+ scale +',user-scalable=no'); // 页面中元素宽度，高度，比例反向乘回来 var width = document.documentElement.clientWidth; var htmlNode = document.querySelector('html'); // var 根元素fontsize = 实际设备宽度 / 开发时设备宽度 * 开发时根元素font-size htmlNode.style.fontSize = width * dpr + 'px' } </script> </html> ``` ###### 4-1，方法2 使用媒体查询+-webkit-min-device-pixel-ratio属性 ```javascript <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"> <title>1px物理像素@cookie_fzx</title> <style type="text/css"> *{ margin: 0; padding: 0; } #box { width: 200px; height: 200px; background: yellow; position: relative; } #box:before{ content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: #000; } @media screen and (-webkit-min-device-pixel-ratio: 2) { #box:before{ transform: scaleY(0.5); } } @media screen and (-webkit-min-device-pixel-ratio: 3) { #box:before{ transform: scaleY(0.333333); } } </style> </head> <body> <div id="box"></div> </body> <script type="text/javascript"> window.onload = function (ev) { } </script> </html> ```