成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

1像素下邊框引發(fā)移動(dòng)端設(shè)備像素比的應(yīng)用

Pluser / 3276人閱讀

摘要：寫在最后用媒體查詢實(shí)現(xiàn)移動(dòng)端像素下邊框，同樣也可以實(shí)現(xiàn)移動(dòng)端調(diào)用高清背景圖，不同的設(shè)置使用的圖片的大小不一，用這個(gè)方法同樣也是可以實(shí)現(xiàn)的。

實(shí)現(xiàn)1像素下邊框，一般的處理方式為：border-bottom: 1px solid color, 這種的處理方式在PC端顯示的是1px的下邊框，然而放在移動(dòng)端時(shí)就不是1px的大小了，可以能是2px，也可能是1.5px等等，出現(xiàn)這種狀況的原因是不同的移動(dòng)設(shè)備的min-device-pixel-ratio的值不一樣，以iphone8為例，其min-device-pixel-ratio的值為2，如果某元素的下邊框的寫法是：border-bottom: 1px solid color，即當(dāng)PC端顯示的是1px的下邊框時(shí)，在iphone6中顯示的就不是1px，而是2px(如果你喜歡我的文章，歡迎評(píng)論，歡迎Star~。歡迎關(guān)注我的github博客)。

先看看效果圖


從上面的效果就可以看到差別，直接border-bottom: 1px solid color，用手機(jī)瀏覽并不是1px，下面講講怎么實(shí)現(xiàn)移動(dòng)端1像素下邊框，先介紹下device-pixel-ratio的相關(guān)知識(shí)

device-pixel-ratio介紹


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

定義


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

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

獨(dú)立像素：設(shè)備的實(shí)際視窗，例如iphone8的視窗375x667px

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

常見設(shè)備device-pixel-ratio值

ios設(shè)備


無(wú)視網(wǎng)膜顯示屏設(shè)備的device-pixel-ratio值為1，有視網(wǎng)膜顯示屏設(shè)備的的device-pixel-ratio值為2

Android設(shè)備


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

移動(dòng)端實(shí)現(xiàn)1像素下邊框的方法

Media Queries媒體查詢

demo


    

        移動(dòng)端實(shí)現(xiàn)1像素下邊框

rem布局實(shí)現(xiàn)

這里就不介紹rem的實(shí)現(xiàn)方法了，如果對(duì)rem布局不是很清楚的小伙伴，可以看看我寫的另一篇文章，詳細(xì)的介紹了rem的相關(guān)用法。

寫在最后


用Media Queries媒體查詢實(shí)現(xiàn)移動(dòng)端1像素下邊框，同樣也可以實(shí)現(xiàn)移動(dòng)端調(diào)用高清背景圖，不同的設(shè)置使用的圖片的大小不一，用這個(gè)方法同樣也是可以實(shí)現(xiàn)的。

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/115691.html

相關(guān)文章

  • 1像素下邊框引發(fā)移動(dòng)端設(shè)備像素比的應(yīng)用

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

    dantezhao 評(píng)論0 收藏0

  • 再談移動(dòng)端適配和點(diǎn)5像素的由來(lái)

    摘要：再談移動(dòng)端適配百分比解決方案的缺點(diǎn)在我們的項(xiàng)目中大量的使用百分比來(lái)解決頁(yè)面在寬度上的自適應(yīng)，其實(shí)在高度上并沒(méi)有很好的自適應(yīng)。 前言 這篇文章的內(nèi)容如題目一樣，主要分為兩個(gè)部分， 談?wù)剺I(yè)內(nèi)主流的移動(dòng)端適配解決方案 點(diǎn)5像素的由來(lái)和實(shí)現(xiàn)方法 建議在讀這篇文章的時(shí)候先讀下這篇文章《高清屏概念解析與檢測(cè)設(shè)備像素比的方法_20161005》，因?yàn)檫@些文章涉及的很多概念在這篇文章中都會(huì)提到。 ...

    lordharrd 評(píng)論0 收藏0

  • 關(guān)于移動(dòng)端適配，你必須要知道的

    摘要：需要注意，上面的尺寸都是屏幕對(duì)角線的長(zhǎng)度英寸縮寫為在荷蘭語(yǔ)中的本意是大拇指，一英寸就是指甲底部普通人拇指的寬度。由于手機(jī)尺寸為手機(jī)對(duì)角線的長(zhǎng)度，我們通常使用如下的方法計(jì)算的為，那它每英寸約含有個(gè)物理像素點(diǎn)。導(dǎo)讀 移動(dòng)端適配，是我們?cè)陂_發(fā)中經(jīng)常會(huì)遇到的，這里面可能會(huì)遇到非常多的問(wèn)題： 1px問(wèn)題 UI圖完美適配方案 iPhoneX適配方案 橫屏適配 高清屏圖片模糊問(wèn)題 ... ...

    yibinnn 評(píng)論0 收藏0

  • 關(guān)于移動(dòng)端適配，你必須要知道的

    摘要：需要注意，上面的尺寸都是屏幕對(duì)角線的長(zhǎng)度英寸縮寫為在荷蘭語(yǔ)中的本意是大拇指，一英寸就是指甲底部普通人拇指的寬度。由于手機(jī)尺寸為手機(jī)對(duì)角線的長(zhǎng)度，我們通常使用如下的方法計(jì)算的為那它每英寸約含有個(gè)物理像素點(diǎn)。 導(dǎo)讀 移動(dòng)端適配，是我們?cè)陂_發(fā)中經(jīng)常會(huì)遇到的，這里面可能會(huì)遇到非常多的問(wèn)題： 1px問(wèn)題 UI圖完美適配方案 iPhoneX適配方案 橫屏適配 高清屏圖片模糊問(wèn)題 ... ...

    lufficc 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<