成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

iPhone X 媒體查詢適配

cuieney / 3408人閱讀

摘要：適合一英寸的像素總數(shù)稱為屏幕密度或像素密度，其測(cè)量為每英寸像素?cái)?shù)。設(shè)備大多具有或顯示屏，因此您可以使用一般的視網(wǎng)膜媒體查詢?cè)谒蓄愋偷脑O(shè)備上顯示高分辨率內(nèi)容。

iPhone X尺寸

5.8 英寸

5.65 x 2.79 x 0.30 英寸

iPhone X分辨率

1125 x 2436

每英寸PX~458 像素

屏幕尺寸

Apple iPhone X的屏幕為5.8英寸，約為實(shí)際設(shè)備尺寸的82.9％。Apple iPhone X設(shè)備的物理尺寸為5.65 x 2.79 x 0.30英寸或（143.6 x 70.9 x 7.7 MM）。
單位顯示順序?yàn)椤案選寬x厚”

屏幕像素密度和CSS像素比

“Pixel”是任何顯示器的最小單位/元素。

適合一英寸的像素總數(shù)稱為“屏幕密度”或“像素密度”，其測(cè)量為“每英寸像素?cái)?shù)”。
像素深度限制顯示每英寸像素?cái)?shù)取決于不同的屏幕尺寸。當(dāng)每英寸像素?cái)?shù)增加超過(guò)屏幕尺寸限制時(shí)，顯示分辨率將增加，但實(shí)際設(shè)備寬度/高度（以像素為單位）保持不變。實(shí)際設(shè)備像素稱為設(shè)備無(wú)關(guān)像素或CSS像素比。

Apple iPhone X的密度約為458像素，實(shí)際像素密度約為153，因此它具有 3 xxhdpi的顯示像素密度。

屏幕分辨率和視口

在設(shè)備上顯示的像素總和稱為“屏幕分辨率”。并且任何設(shè)備的實(shí)際像素總和被稱為“視口”。

Apple iPhone X的物理屏幕尺寸為5.8英寸，分辨率約為1125 x 2436像素，像素密度約為458 PPI。Apple iPhone X的視口尺寸為375 x 812像素，像素比約為3。

CSS媒體查詢 
Apple iPhone X媒體查詢（僅限移動(dòng)設(shè)備）
@media only screen and (min-width: 375px) and (max-width: 767px) { /* Your Styles... */ }
Apple iPhone X Min-Width媒體查詢
@media only screen and (min-width: 375px) { /* Your Styles... */ }
Apple iPhone X Min-Height媒體查詢
@media only screen and (min-height: 812px) { /* Your Styles... */ }
Apple iPhone X Landscape媒體查詢
@media only screen and (min-width: 812px) and (orientation: landscape) { /* Your Styles... */ }
Apple iPhone X Portrait媒體查詢
@media only screen and (min-width: 375px) and (orientation: portrait) { /* Your Styles... */ }
Apple iPhone X Retina媒體查詢
@media
  only screen and (-webkit-min-device-pixel-ratio: 3),
  only screen and (   min--moz-device-pixel-ratio: 3),
  only screen and (     -o-min-device-pixel-ratio: 3/1),
  only screen and (        min-device-pixel-ratio: 3),
  only screen and (                min-resolution: 458dpi),
  only screen and (                min-resolution: 3dppx) { 
    /* Retina styles here */
}

視網(wǎng)膜實(shí)際上是基于設(shè)備像素比率。設(shè)備大多具有2x或3x顯示屏，因此您可以使用一般的視網(wǎng)膜媒體查詢?cè)谒蓄愋偷脑O(shè)備上顯示高分辨率內(nèi)容。Retina 2x和Retina 3x媒體查詢?nèi)缦拢?/strong>

Retina 2x媒體查詢
@media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) { 
    /* Retina styles here */
}
Retina 3x媒體查詢
@media
  only screen and (-webkit-min-device-pixel-ratio: 3),
  only screen and (   min--moz-device-pixel-ratio: 3),
  only screen and (     -o-min-device-pixel-ratio: 3/1),
  only screen and (        min-device-pixel-ratio: 3),
  only screen and (                min-resolution: 384dpi),
  only screen and (                min-resolution: 3dppx) { 
    /* Retina styles here */
}

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/114307.html

相關(guān)文章

  • rem兩三事

    摘要：昨天被問(wèn)到關(guān)于的問(wèn)題，當(dāng)時(shí)一臉懵逼，因?yàn)閷?xiě)了兩年，基本沒(méi)怎么碰過(guò)，有點(diǎn)迷糊。缺點(diǎn)無(wú)縮放，且針對(duì)的屏沒(méi)有做適配，導(dǎo)致對(duì)一些手機(jī)的適配不是很到位。缺點(diǎn)需要根據(jù)設(shè)計(jì)稿進(jìn)行基準(zhǔn)值換算，在不使用編輯器插件開(kāi)發(fā)時(shí)，單位計(jì)算復(fù)雜。 os：昨天被問(wèn)到關(guān)于rem的問(wèn)題，當(dāng)時(shí)一臉懵逼，因?yàn)閷?xiě)了兩年js，基本沒(méi)怎么碰過(guò)css，有點(diǎn)迷糊。 px、em、rem區(qū)別 不同于px這個(gè)固定單位，em和rem都是相對(duì)單...

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

  • webApp 頁(yè)面布局

    摘要：流式布局概念流式布局是頁(yè)面元素寬度按照屏幕分辨率進(jìn)行適配調(diào)整，但是整體布局不變。有些手機(jī)頁(yè)面的寬度會(huì)被拉伸，但是高度不變，很不協(xié)調(diào)。弊端全局縮放，可能會(huì)造成出錯(cuò)。這兩者適合在大項(xiàng)目中，因?yàn)榭梢耘浜匣蚴?，不適合單頁(yè)面。 1. 流式布局 概念：流式布局是頁(yè)面元素寬度按照屏幕分辨率進(jìn)行適配調(diào)整，但是整體布局不變。 設(shè)計(jì)方法：布局都是通過(guò)百分比來(lái)定義寬度，但是高度大都是用px固定的。 弊端：...

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

  • webApp 頁(yè)面布局

    摘要：流式布局概念流式布局是頁(yè)面元素寬度按照屏幕分辨率進(jìn)行適配調(diào)整，但是整體布局不變。有些手機(jī)頁(yè)面的寬度會(huì)被拉伸，但是高度不變，很不協(xié)調(diào)。弊端全局縮放，可能會(huì)造成出錯(cuò)。這兩者適合在大項(xiàng)目中，因?yàn)榭梢耘浜匣蚴?，不適合單頁(yè)面。 1. 流式布局 概念：流式布局是頁(yè)面元素寬度按照屏幕分辨率進(jìn)行適配調(diào)整，但是整體布局不變。 設(shè)計(jì)方法：布局都是通過(guò)百分比來(lái)定義寬度，但是高度大都是用px固定的。 弊端：...

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

  • 移動(dòng)端web app自適應(yīng)布局探索與總結(jié)

    摘要：方案的簡(jiǎn)單介紹基于前提頁(yè)面元素的布局尺寸全都以設(shè)計(jì)稿為基準(zhǔn)等比例設(shè)置。給根節(jié)點(diǎn)設(shè)置一個(gè)基礎(chǔ)值，然后頁(yè)面的所有元素布局均相對(duì)于該值采用單位設(shè)定。 1、困擾多時(shí)的問(wèn)題 在這之前做web app開(kāi)發(fā)的的時(shí)候，在自適應(yīng)方面一般都是寬度通過(guò)百分比，高度以iPhone6跟iPhone5之間的一個(gè)平衡值寫(xiě)死，我們的設(shè)計(jì)稿都是iPhone5的640 * 1136標(biāo)準(zhǔn)，所以高度一般取個(gè)大概值，各種圖標(biāo)的...

    Benedict Evans 評(píng)論0 收藏0

  • 移動(dòng)端web app自適應(yīng)布局探索與總結(jié)

    摘要：方案的簡(jiǎn)單介紹基于前提頁(yè)面元素的布局尺寸全都以設(shè)計(jì)稿為基準(zhǔn)等比例設(shè)置。給根節(jié)點(diǎn)設(shè)置一個(gè)基礎(chǔ)值，然后頁(yè)面的所有元素布局均相對(duì)于該值采用單位設(shè)定。 1、困擾多時(shí)的問(wèn)題 在這之前做web app開(kāi)發(fā)的的時(shí)候，在自適應(yīng)方面一般都是寬度通過(guò)百分比，高度以iPhone6跟iPhone5之間的一個(gè)平衡值寫(xiě)死，我們的設(shè)計(jì)稿都是iPhone5的640 * 1136標(biāo)準(zhǔn)，所以高度一般取個(gè)大概值，各種圖標(biāo)的...

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

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

0條評(píng)論

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