移動端1px 的產生和解決方法

2021-09-29 00:24:55 字數 278 閱讀 2992

已iphone為準;

物理畫素(裝置畫素):750pt,設計師設計的寬度,就是螢幕的解析度,出廠就定了的。我們看到的是螢幕

邏輯畫素(css畫素):375px;螢幕的寬度;

裝置畫素比(dpr): 是指在移動開發中1個css畫素占用多少裝置畫素,如2代表1個css畫素用2個裝置畫素來繪製。

設計圖上的1px如果當成邏輯畫素的話,,如果直接寫border :1px 的話,那麼就相當於2個物理畫素,所以看起來就粗了。

其實是物理畫素,用0.5px就好了,或者用rem 

移動端1px問題解決方法

ui設計師設計的時候,畫的1px 真實畫素 實際上是0.5px css 的線或者邊框。但是他不這麼認為,他認為他畫的就是1px的線,因為他畫的稿的尺寸本身就是螢幕尺寸的2倍。假設手機視網膜屏的寬度是320x480寬,但實際尺寸是640x960寬,設計師設計圖的時候一定是按照640x960設計的。但是...

移動端1px產生原因及解決方案

在retina屏中,畫素比為2 iphone6 7 8 或3 iphone6plus 7plus 8plus 1px的邊框看起來比真的1px更寬。本文預設你已經對視口 物理畫素 邏輯畫素 裝置畫素比 css畫素等移動端基本概念已經解。class tab border 1px bottom class...

移動端 1px解決方案

var viewport document.queryselector meta name viewport var scale 1 window.devicepixelratio viewport.setattribute content width device width,initial sc...