1px的实现
Posted 弱水三千,只取一瓢
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了1px的实现相关的知识,希望对你有一定的参考价值。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <style type="text/css"> .border{ position: relative; } .border::after{ display: block; position: absolute; left: 0; bottom: 0; width: 100%; border-top:1px solid rgba(7,17,27,0.1); content: " "; } @meta (-webkit-min-device-pixel-rato:1.5),(min-device-pixel-rato:1.5){ .border-1px::after{ -webkit-transform: scaleY(0.7); transform:scaleY(0.7) } } @meta (-webkit-min-device-pixel-rato:2),(min-device-pixel-rato:2){ .border-1px::after{ -webkit-transform: scaleY(0.5); transform:scaleY(0.5) } } </style> </head> <body> 1px像素的实现 <div class="border border-1px"> </div> </body> </html>
利用meta判断设备像素是dpr的值来,缩放对应的比例
以上是关于1px的实现的主要内容,如果未能解决你的问题,请参考以下文章