1px边框问题

随着终端设备的多种多样,尤其的Retina屏的出现,两倍高清屏,三倍高清屏,css中1px的边框的展示的视觉效果是不一样,

通常的做法,有以下几种:

  • Flexible方案

Flexible方案

原理:借助Javascript来动态地修改mete标签中viewport(视口)的initial-scale(缩放比)的值,然后根据dpr修改html 元素的font-size的值,再使用rem来处理元素的单位尺寸。

具体做法
让viewport方法为device-width的dpr倍数,然后缩小1/dpr倍显示;

方案评价

该方案只是处理了IOS的dpr为2的情况,其他的没有处理,比如不支持android和dpr=3的情况。所以,这种方案也不是完美的方案;

你可能感兴趣的:(1px边框问题)