資訊專欄INFORMATION COLUMN
摘要：為了提高用戶體驗，需要兼容不同設備，使邊框真正顯示為個物理像素的寬度大多情況下我們還是希望邊框是盡可能細。解決方法具體寫法如下缺點屏的瀏覽器可能不認識的邊框，將會把它解釋成，沒有邊框。
基本概念 像素(css pixels)
css像素或邏輯像素，單位是px，它是一個相對單位，在不同dpr(devicePixelRatio 設備像素比)設備中，1px代表的物理像素是不同的。
物理像素(device pxels)顯示屏是由一個個物理像素點組成的，通過控制每個像素點的顏色，使屏幕顯示出不同的圖像，屏幕從工廠出來那天起，它上面的物理像素點就固定不變了，單位pt。
css像素和物理像素的關系dpr = 物理像素 / css像素
iPhone X的dpr和橫向css像素
而iPhone X橫向分辨率剛好是1125
1px問題普通屏幕的1px就是物理像素的1px，而Retina屏的1px就不等于1px了，這就造成了在不同設備中1px的實際寬度不一致的問題。
為了提高用戶體驗，需要兼容不同dpr設備，使1px邊框真正顯示為1個物理像素的寬度（大多情況下我們還是希望1px邊框是盡可能細）。
解決方法 0.5px具體寫法如下
缺點：
retina 屏的瀏覽器可能不認識0.5px的邊框，將會把它解釋成0px，沒有邊框。包括 iOS 7 和 之前版本，OS X Mavericks 及以前版本，還有 Android 設備。
優點：瀏覽器兼容性非常好
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114163.html
摘要：移動端的問題描述的邊框。產生原因首先先要了解一個概念設備像素比，它是默認縮放為的情況下，設備像素和邏輯像素的比值。解決方式在滾動容器上增加滾動方法微軟雅黑設置設置外部為設置內容元素為。內部元素超出即產生滾動，超出的部分隱藏。 移動端的 1px問題描述：1px 的邊框。在高清屏下，移動端的 1px 會很粗。產生原因：首先先要...
摘要：目前主流的屏幕或者。產生原因在中，手指按住屏幕上下拖動，會觸發事件。或者可以加入我的開發交流群相互學習，我們會有專業的技術答疑解惑如果你覺得這篇文章對你有點用的話，麻煩請給我們的開源項目點點不勝感激 移動端兼容css篇移動端的 1px問題描述：1px 的邊框。在高清屏下，移動端的 1px 會很粗。產生原因：首先先要了解一個...
摘要：真的是給我們新手學習移動端適配造成不少困惑英語真的很重要呀。細節高清屏上的處理其實并不是所有做移動端適配的人都一定會遇到這個問題。 一次搞清楚移動端這幾個坑爹的單位慨念 目錄: 一、讓坑爹的單位,不再坑爹 二、需要準備什么樣的設計稿 三、rem方案的原理和細節 高清屏上,位圖的處理 高清屏上,關于border: 1px的處理 移動端屏幕的自動適配的處理 移動端屏幕上字體大小的處理...
摘要：真的是給我們新手學習移動端適配造成不少困惑英語真的很重要呀。細節高清屏上的處理其實并不是所有做移動端適配的人都一定會遇到這個問題。 一次搞清楚移動端這幾個坑爹的單位慨念 目錄: 一、讓坑爹的單位,不再坑爹 二、需要準備什么樣的設計稿 三、rem方案的原理和細節 高清屏上,位圖的處理 高清屏上,關于border: 1px的處理 移動端屏幕的自動適配的處理 移動端屏幕上字體大小的處理...
閱讀 1324·2021-11-11 11:00
閱讀 3041·2021-09-24 09:47
閱讀 4949·2021-09-22 15:53
閱讀 960·2021-09-10 10:50
閱讀 3207·2021-09-01 11:40
閱讀 1160·2019-08-30 15:55
閱讀 470·2019-08-30 12:49
閱讀 1049·2019-08-29 17:12
