移动端 1px 的4个方案

移动端 css 里面写了 1px ,实际比 1px 粗。

其实原因很好理解:这两个 ‘px’ 的含义是不一样的。

移动端的 <header> 头里有这样一段代码:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

代码解析:

  • name="viewport" content="width=device-width:本页面的 「viewport」 的宽度为设备宽度。
  • initial-scale=1.0, maximum-scale=1.0:初始缩放值和最大的缩放值都为 1。
  • user-scalable=no:禁止用户进行页面缩放。

移动端 window 对象有个 devicePixelRatio 属性,为设备像素比。

「drp = window.devicePixelRatio,也就是设备的物理像素与逻辑像素的比值。」

「以 iPhone6 为例:」

它的物理像素是 750,逻辑像素为 375 ,所以 iphone6  的 drp = 2 。

所以 css 里面写的 1px 宽度映射到物理像素上就有 2px。

解决方案

一、使用小数来写 px 值

在 ios8+ 中当 drp = 2 的时候使用 0.5px ,使用媒体查询

.border { border: 1px solid #999 }@media screen and (-webkit-min-device-pixel-ratio: 2) {    .border { border: 0.5px solid #999 }}@media screen and (-webkit-min-device-pixel-ratio: 3) {    .border { border: 0.333333px solid #999 }}
二、使用box-shadow模拟边框

利用css 对阴影处理的方式实现0.5px的效果

样式设置:
.box-shadow-1px {
box-shadow: inset 0px -1px 1px -1px #c8c7cc;
}

三、:before, :after与transform

构建1个伪元素, 将它的长宽放大到2倍, 边框宽度设置为1px, 再用transform缩放到50%。

我这里只写了上下边框,还有左右边框,你们可以模仿一下。

//所有边框.mx-1px {    position: relative}.mx-1px:before {    position: absolute;    content: "";    width: 100%;    height: 100%;    border: 1px solid #ccc;    border-radius: 0;    top: 0;    left: 0;    -webkit-transform-origin: 0 0;    transform-origin: 0 0;    box-sizing: border-box}@media screen and (-webkit-min-device-pixel-ratio: 2) {    .mx-1px:before {        width: 200%;        height: 200%;        -webkit-transform: scale(.5);        transform: scale(.5)    }}//上边框.mx-1px-top {    position: relative}.mx-1px-top:before {    position: absolute;    content: "";    -webkit-transform-origin: 0 0;    transform-origin: 0 0;    width: 100%;    height: 1px;    border-top: 1px solid #ccc;    top: 0;    left: 0}@media screen and (-webkit-min-device-pixel-ratio: 2) {    .mx-1px-top:before {        -webkit-transform: scaleY(.5);        transform: scaleY(.5)    }}//下边框.mx-1px-bottom {    position: relative}.mx-1px-bottom:before {    position: absolute;    content: "";    -webkit-transform-origin: 0 0;    transform-origin: 0 0;    width: 100%;    height: 1px;    bottom: -1px;    border-bottom: 1px solid #ccc;    left: 0}@media screen and (-webkit-min-device-pixel-ratio: 2) {    .mx-1px-bottom:before {        -webkit-transform: scaleY(.5);        transform: scaleY(.5)    }}
四、viewport + rem + js

通过设置对应viewportscale,这种方式就可以像以前一样轻松愉快的写 1px 了。

  • 当 drp = 1时:initial-scale=1
  • 当 drp = 2时:initial-scale=0.5
  • 当 drp = 3时:initial-scale=0.3333333333333333

示例:

<html> <head> <title>1px question</title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <meta name="viewport" id="WebViewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">  <style> html { font-size: 1px; }  * { padding: 0; margin: 0; } .top_b { border-bottom: 1px solid #E5E5E5; }  .a,.b {                        box-sizing: border-box; margin-top: 1rem; padding: 1rem;  font-size: 1.4rem; }  .a { width: 100%; }  .b { background: #f5f5f5; width: 100%; } </style> <script> var viewport = document.querySelector("meta[name=viewport]"); //下面是根据设备像素设置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.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no'); } var docEl = document.documentElement; var fontsize = 32* (docEl.clientWidth / 750) + 'px'; docEl.style.fontSize = fontsize; </script> </head> <body> <div class="top_b a">下面的底边宽度是虚拟1像素的</div> <div class="b">上面的边框宽度是虚拟1像素的</div> </body></html>

总结

对于老项目:采用 伪类 + transform。

对于新项目:采用 viewport 的 sacle 值,这个方法兼容性好。

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇