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的情況。所以,這種方案也不是完美的方案;

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章