螢幕解析度問題及 media

2022-09-13 09:09:08 字數 1310 閱讀 4212

1.畫素

物理畫素/裝置畫素

物理畫素也被稱為裝置畫素,它是顯示裝置最微小的物理部件。

螢幕密度 通常以每英吋有多少物理畫素來計算(ppi)

獨立畫素/css畫素,是乙個抽象的單位,主要用於瀏覽器上,用了精確度量web頁面上的內容。一般情況下,css畫素被稱為與裝置無關的畫素(device-independent畫素),簡稱為「dips」

在乙個標準的顯示密度下,乙個css畫素對應著乙個裝置畫素。

獨立畫素比/window.devicepixelratio window.devicepixelratio=物理畫素/獨立畫素

通過計算你會發現剛才的兩種手機的結果分別是1或者2(當然還有其它手機螢幕結果有些差別)

手機螢幕分為: 一:非視網膜螢幕(物理畫素320,該裝置的獨立畫素(視區寬度)也是320)

二:視網膜螢幕(物理畫素640,該裝置的獨立畫素(視區寬度)還是320

這個**的作用就是讓檢視區域撐滿手機物理螢幕。

html檔案頭部加上這個**後,手機顯示的大小和電腦顯示的大小尺寸大小就一樣了。 但是手機上顯示的就模糊了,這是因為你要顯示同樣的物理大小,視網膜螢幕就要用雙倍的物理畫素來顯示(乙個一畫素的,如果用瀏覽器4個畫素(即放大了一倍)來看會變模糊和失真,所以在給手機做的時候,要放大一倍,就是在手機上顯示的是100乘以100,那ps做要做成200乘以200這樣才會清晰)。

筆記本的解析度:

10-12英吋(上網本)1024×600、1366×768

13.3-15.6英吋大部分是1366×768

13英吋有1280×800、1600×900

15英吋有1600×900、1920×1080(單屏最高解析度)

還有18、19英吋的,解析度也是1920×1080

華碩三屏筆記本是1920×1080的3倍。

響應式布局方式:

1.外聯樣式表

在這裡我們可以根據不同的裝置載入不同的css樣式表

1

當頁面寬度大於等於960px時,載入樣式表gt-960px.css

1

當頁面寬度大於等於600px且小於等於960px時,載入樣式表gt-600px-lt-960px.css

1

當頁面寬度小於等於600px時,載入樣式表lt-600px.css

2.樣式表中內嵌發

@media screen and()

3.彈性

我們需要為設定max-width: 100%和height: auto,來實現其彈性化。

1 img

螢幕解析度

xga extended graphics array 擴充套件影象陣列 s super 超過 x extended 擴充套件 u ultra 終極 第乙個q quarter 四分之一 最後乙個q quantum 量化 h half 一半 w wide 寬 example vga 640 480 q...

螢幕解析度

1.1920 1080 1080p 1920x1080 1080p 就是俗稱的 full hd sony 超拼的 以前只有在電視上看得到 電腦用 1920x1200 的多 不過開始出現採用 1080p 面板的膝上型電腦,像第二代的 acer 寶石機,標榜可以 讓畫面塞滿螢幕,不留黑邊 主流顯示器各尺...

螢幕解析度

svga 全稱super video graphics array,屬於vga螢幕的替代品,最大支援800 600解析度,螢幕大小為12.1英吋,由於畫素較低所以目前採用這一螢幕的本本也是少之又少了。xga 全稱extended graphics array,這是一種目前筆記本普遍採用的一種lcd螢...