随着终端设备的多种多样,尤其的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的情况。所以,这种方案也不是完美的方案;