前端面试中的1像素问题到底是指什么

72次阅读

共计 423 个字符,预计需要花费 2 分钟才能阅读完成。

高清屏上,border: 1px 的处理

其实并不是所有做移动端适配的人, 都一定会遇到这个问题。

比如你的设计师给了一张 iphone6 为基准的 750*1334 的设计稿, 里面有一个 border 标注的是 1px。

所以设计师实际上想要的是 retina 屏下的 1px, 也就是普通屏幕下的 0.5px。

但问题是: 并不是手机端屏幕都支持 0.5px,ios7 之下或者安卓机都可能把 0.5 解析成 0px

这里给到一种解决方案: 设置 initial-scale=0.5

<meta name=”viewport” content=”width=640,initial-scale=0.5,maximum-scale=0.5, minimum-scale=0.5,user-scalable=no”>
这样,页面中的所有的 border: 1px 都将缩小 0.5,从而达到 border: 0.5px; 的效果。

然而,页面 scale,必然会带来一些问题:

字体大小会被缩放
页面布局会被缩放(如: div 的宽高等)

正文完
 0