資訊專欄INFORMATION COLUMN
摘要：寫在最后用媒體查詢實現(xiàn)移動端像素下邊框，同樣也可以實現(xiàn)移動端調用高清背景圖，不同的設置使用的圖片的大小不一，用這個方法同樣也是可以實現(xiàn)的。
實現(xiàn)1像素下邊框，一般的處理方式為：border-bottom: 1px solid color, 這種的處理方式在PC端顯示的是1px的下邊框，然而放在移動端時就不是1px的大小了，可以能是2px，也可能是1.5px等等，出現(xiàn)這種狀況的原因是不同的移動設備的min-device-pixel-ratio的值不一樣，以iphone8為例，其min-device-pixel-ratio的值為2，如果某元素的下邊框的寫法是：border-bottom: 1px solid color，即當PC端顯示的是1px的下邊框時，在iphone6中顯示的就不是1px，而是2px(如果你喜歡我的文章，歡迎評論，歡迎Star~。歡迎關注我的github博客)。
先看看效果圖
從上面的效果就可以看到差別，直接border-bottom: 1px solid color，用手機瀏覽并不是1px，下面講講怎么實現(xiàn)移動端1像素下邊框，先介紹下device-pixel-ratio的相關知識
device-pixel-ratio介紹
先說說一個比較關鍵的一個技術：retina，一種新型高分辨率的顯示技術，是蘋果公司提出來的，可以把更多的像素點壓縮至一塊屏幕里，從而達到更高的分辨率并提高屏幕顯示的細膩程度，目前大部分設備都用到了這種技術。這種分辨率在正常觀看距離下足以使人肉眼無法分辨其中的多帶帶像素。也被稱為視網(wǎng)膜顯示屏(device-pixel-ratio > 1)
device-pixel-ratio = physical pixel / device-independent pixels(某一方向，橫軸或縱軸),即所謂的設備像素比指的是物理像素與設備獨立像素的比例
物理像素：我們說的分辨率，例如iphone8的分辨率750x1334px
獨立像素：設備的實際視窗，例如iphone8的視窗375x667px
iphone8的device-pixel-ratio = 750 / 375 = 2
ios設備
無視網(wǎng)膜顯示屏設備的device-pixel-ratio值為1，有視網(wǎng)膜顯示屏設備的的device-pixel-ratio值為2
Android設備
無視網(wǎng)膜顯示屏設備的device-pixel-ratio值為1,有視網(wǎng)膜顯示屏設備的的device-pixel-ratio值為1.5或者為3(普遍設備像素比為這2個值)
Media Queries媒體查詢
demo
移動端實現(xiàn)1像素下邊框
rem布局實現(xiàn)
這里就不介紹rem的實現(xiàn)方法了，如果對rem布局不是很清楚的小伙伴，可以看看我寫的另一篇文章，詳細的介紹了rem的相關用法。
寫在最后
用Media Queries媒體查詢實現(xiàn)移動端1像素下邊框，同樣也可以實現(xiàn)移動端調用高清背景圖，不同的設置使用的圖片的大小不一，用這個方法同樣也是可以實現(xiàn)的。
最后，附上博文地址github地址如果覺得有用的話希望star下，歡迎一起交流，我們一起進步~~~
文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://systransis.cn/yun/51855.html
摘要：寫在最后用媒體查詢實現(xiàn)移動端像素下邊框，同樣也可以實現(xiàn)移動端調用高清背景圖，不同的設置使用的圖片的大小不一，用這個方法同樣也是可以實現(xiàn)的。 實現(xiàn)1像素下邊框，一般的處理方式為：border-bottom: 1px solid color, 這種的處理方式在PC端顯示的是1px的下邊框，然而放在移動端時就不是1px的大小了，可以能是2px，也可能是1.5px等等，出現(xiàn)這種狀況的原因是不同...
摘要：再談移動端適配百分比解決方案的缺點在我們的項目中大量的使用百分比來解決頁面在寬度上的自適應，其實在高度上并沒有很好的自適應。 前言 這篇文章的內容如題目一樣，主要分為兩個部分， 談談業(yè)內主流的移動端適配解決方案 點5像素的由來和實現(xiàn)方法 建議在讀這篇文章的時候先讀下這篇文章《高清屏概念解析與檢測設備像素比的方法_20161005》，因為這些文章涉及的很多概念在這篇文章中都會提到。 ...
摘要：需要注意，上面的尺寸都是屏幕對角線的長度英寸縮寫為在荷蘭語中的本意是大拇指，一英寸就是指甲底部普通人拇指的寬度。由于手機尺寸為手機對角線的長度，我們通常使用如下的方法計算的為，那它每英寸約含有個物理像素點。導讀 移動端適配，是我們在開發(fā)中經(jīng)常會遇到的，這里面可能會遇到非常多的問題： 1px問題 UI圖完美適配方案 iPhoneX適配方案 橫屏適配 高清屏圖片模糊問題 ... ...
摘要：需要注意，上面的尺寸都是屏幕對角線的長度英寸縮寫為在荷蘭語中的本意是大拇指，一英寸就是指甲底部普通人拇指的寬度。由于手機尺寸為手機對角線的長度，我們通常使用如下的方法計算的為那它每英寸約含有個物理像素點。 導讀 移動端適配，是我們在開發(fā)中經(jīng)常會遇到的，這里面可能會遇到非常多的問題： 1px問題 UI圖完美適配方案 iPhoneX適配方案 橫屏適配 高清屏圖片模糊問題 ... ...
閱讀 2137·2021-11-22 15:24
閱讀 2433·2021-09-09 11:53
閱讀 3049·2021-09-04 16:40
閱讀 1647·2019-08-30 15:52
閱讀 3367·2019-08-29 13:47
閱讀 2749·2019-08-26 17:40
閱讀 1560·2019-08-26 13:24
閱讀 2256·2019-08-26 12:01
