国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

1像素下邊框引發移動端設備像素比的應用

dantezhao / 1560人閱讀

摘要：寫在最后用媒體查詢實現移動端像素下邊框，同樣也可以實現移動端調用高清背景圖，不同的設置使用的圖片的大小不一，用這個方法同樣也是可以實現的。

實現1像素下邊框，一般的處理方式為：border-bottom: 1px solid color, 這種的處理方式在PC端顯示的是1px的下邊框，然而放在移動端時就不是1px的大小了，可以能是2px，也可能是1.5px等等，出現這種狀況的原因是不同的移動設備的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，下面講講怎么實現移動端1像素下邊框，先介紹下device-pixel-ratio的相關知識

device-pixel-ratio介紹


先說說一個比較關鍵的一個技術：retina，一種新型高分辨率的顯示技術，是蘋果公司提出來的，可以把更多的像素點壓縮至一塊屏幕里，從而達到更高的分辨率并提高屏幕顯示的細膩程度，目前大部分設備都用到了這種技術。這種分辨率在正常觀看距離下足以使人肉眼無法分辨其中的多帶帶像素。也被稱為視網膜顯示屏(device-pixel-ratio > 1)

定義


device-pixel-ratio = physical pixel / device-independent pixels(某一方向，橫軸或縱軸),即所謂的設備像素比指的是物理像素與設備獨立像素的比例

物理像素：我們說的分辨率，例如iphone8的分辨率750x1334px

獨立像素：設備的實際視窗，例如iphone8的視窗375x667px

iphone8的device-pixel-ratio = 750 / 375 = 2

常見設備device-pixel-ratio值

ios設備


無視網膜顯示屏設備的device-pixel-ratio值為1，有視網膜顯示屏設備的的device-pixel-ratio值為2

Android設備


無視網膜顯示屏設備的device-pixel-ratio值為1,有視網膜顯示屏設備的的device-pixel-ratio值為1.5或者為3(普遍設備像素比為這2個值)

移動端實現1像素下邊框的方法

Media Queries媒體查詢

demo


    

        移動端實現1像素下邊框

rem布局實現

這里就不介紹rem的實現方法了，如果對rem布局不是很清楚的小伙伴，可以看看我寫的另一篇文章，詳細的介紹了rem的相關用法。

寫在最后


用Media Queries媒體查詢實現移動端1像素下邊框，同樣也可以實現移動端調用高清背景圖，不同的設置使用的圖片的大小不一，用這個方法同樣也是可以實現的。

最后，附上博文地址github地址如果覺得有用的話希望star下，歡迎一起交流，我們一起進步~~~

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/51855.html

相關文章

  • 1像素下邊框引發移動端設備像素比的應用

    摘要：寫在最后用媒體查詢實現移動端像素下邊框，同樣也可以實現移動端調用高清背景圖，不同的設置使用的圖片的大小不一，用這個方法同樣也是可以實現的。 實現1像素下邊框，一般的處理方式為：border-bottom: 1px solid color, 這種的處理方式在PC端顯示的是1px的下邊框，然而放在移動端時就不是1px的大小了，可以能是2px，也可能是1.5px等等，出現這種狀況的原因是不同...

    Pluser 評論0 收藏0

  • 再談移動端適配和點5像素的由來

    摘要：再談移動端適配百分比解決方案的缺點在我們的項目中大量的使用百分比來解決頁面在寬度上的自適應，其實在高度上并沒有很好的自適應。 前言 這篇文章的內容如題目一樣，主要分為兩個部分， 談談業內主流的移動端適配解決方案 點5像素的由來和實現方法 建議在讀這篇文章的時候先讀下這篇文章《高清屏概念解析與檢測設備像素比的方法_20161005》，因為這些文章涉及的很多概念在這篇文章中都會提到。 ...

    lordharrd 評論0 收藏0

  • 關于移動端適配，你必須要知道的

    摘要：需要注意，上面的尺寸都是屏幕對角線的長度英寸縮寫為在荷蘭語中的本意是大拇指，一英寸就是指甲底部普通人拇指的寬度。由于手機尺寸為手機對角線的長度，我們通常使用如下的方法計算的為，那它每英寸約含有個物理像素點。導讀 移動端適配，是我們在開發中經常會遇到的，這里面可能會遇到非常多的問題： 1px問題 UI圖完美適配方案 iPhoneX適配方案 橫屏適配 高清屏圖片模糊問題 ... ...

    yibinnn 評論0 收藏0

  • 關于移動端適配，你必須要知道的

    摘要：需要注意，上面的尺寸都是屏幕對角線的長度英寸縮寫為在荷蘭語中的本意是大拇指，一英寸就是指甲底部普通人拇指的寬度。由于手機尺寸為手機對角線的長度，我們通常使用如下的方法計算的為那它每英寸約含有個物理像素點。 導讀 移動端適配，是我們在開發中經常會遇到的，這里面可能會遇到非常多的問題： 1px問題 UI圖完美適配方案 iPhoneX適配方案 橫屏適配 高清屏圖片模糊問題 ... ...

    lufficc 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<