隨着終端設備的多種多樣,尤其的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的情況。所以,這種方案也不是完美的方案;