css 中的 1px 并不等于设备的 1px
在 css 中我们一般使用 px 作为单位,在浏览器中 css 的 1 个像素往往对应着电脑屏幕的 1 个物理像素,这可能会造成我们的一个错觉,那就是 css 中的像素就是设备的物理像素。但实际情况并非如此,css 中的像素只是一个抽象的单位,在不同环境中,css 中的 1px 代表的设备物理像素是不同的。
移动端 1px 变粗的原因
为什么移动端 css 里面写了 1px,实际看起来却比 1px 要粗?这里是因为 ‘px’ 的含义不一样
移动端 html 的 head 标签中总会有这样一段代码
1 | <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> |
这句话定义了本页面的viewport的宽度为设备宽度,初始缩放值和最大缩放值都为 1,并禁止了用户缩放. viewport 通俗的讲是浏览器上可用来显示页面的区域, 这个区域是可能比屏幕大的
有一个因素也会引起 css 中 px 的变化,那就是用户缩放。例如,当用户把页面放大一倍,那么 css 中 1px 所代表的物理像素也会增加一倍;反之把页面缩小一倍,css 中 1px 所代表的物理像素也会减少一倍。
解决方案
- 用小数点些 px 的值
1 | .border { border: 1px solid #999 } |
- background 渐变
背景渐变, 渐变在透明色和边框色中间分割, frozenUI 用的就是这种方法, 借用它的上边框写法:
1 | @media screen and (-webkit-min-device-pixel-ratio: 2){ |
- 使用 transform 实现
在移动端中,我们对宽度 100%,1px 的线进行改造,将其宽度设为 200%,高度不变,之后使用 transform 对其缩放 50%。
1 | .line{ |
- 利用 box-shadow也可模拟 1px 细线边框,但缺点是颜色不好控制
1 | div { |
I'm so cute. Please give me money.
- Post link: https://blog.gaocaipeng.com/2019/04/02/tdfvi7/
- Copyright Notice: All articles in this blog are licensed under unless otherwise stated.