網頁螢幕分辯率尺寸

2021-10-09 06:57:13 字數 1349 閱讀 7009

網頁螢幕解析度

各螢幕解析度使用佔比:

1920*1080  26.7%

1600*900  7.42%

1366*768  21.97%

1024*768  4.84%

1680*1050  3.68%

做乙個pc端的網頁,設計圖是1920x1080的. 要在常見屏上顯示正常(比例正確可) 1280x720 1366x768 1440x900 1920x1080

基礎格式

body

@media only screen and (max-width: 1360px) .

..//其它物件 }

@media  only screen and (max-width: 1161px) .

..//其它物件 }

物件裡需要調整font-size時 以上述font-size為基礎進行調整 例如

a則 換算成em a

例如 a

則換算成em a

pc端按螢幕寬度大小排序

解析度   比例 | 裝置尺寸

1024*500 (8.9寸)

1024*768 (比例4:3  | 10.4寸、12.1寸、14.1寸、15寸; )

1280*800(16:10  |15.4寸)

1280*1024(比例:5:4  | 14.1寸、15.0寸)

1280*854(比例:15:10 | 15.2)

1366*768 (比例:16:9 | 不常見)

1440*900 (16:10  17寸 僅蘋果用)

1440*1050(比例:5:4  | 14.1寸、15.0寸)

1600*1024(14:9  不常見)

1600*1200 (4:3 | 15、16.1)

1680*1050(16:10 | 15.4寸、20.0寸)

1920*1200 (23寸)

通過上面的電腦遮蔽及尺寸的例表上我們得到了幾個寬度

1024  1280  1366  1440  1680  1920  

css**

@media (min-width: 1024px)

} /*>=1024的裝置*/

@media (min-width: 1100px)

} /*>=1024的裝置*/

@media (min-width: 1280px)

} @media (min-width: 1366px)

}  @media (min-width: 1440px)

} @media (min-width: 1680px)

} @media (min-width: 1920px)

網頁螢幕分辯率尺寸

網頁螢幕解析度 各螢幕解析度使用佔比 1920 1080 26.7 1600 900 7.42 1366 768 21.97 1024 768 4.84 1680 1050 3.68 做乙個pc端的網頁,設計圖是1920x1080的.要在常見屏上顯示正常 比例正確可 1280x720 1366x76...

網頁自動適應螢幕

一 其中 width viewport的寬度 height viewport的高度 initial scale 初始的縮放比例 minimum scale 允許使用者縮放到的最小比例 maximum scale 允許使用者縮放到的最大比例 user scalable 使用者是否可以手動縮放 二 所有...

網頁自適應螢幕寬度

隨著3g的普及,越來越多的人使用手機上網。移動裝置正超過桌面裝置,成為訪問網際網路的最常見終端。於是,網頁設計 師不得不面對乙個難題 如何才能在不同大小的裝置上呈現同樣的網頁內容?手機的螢幕比較小,寬度通常在600畫素以下 pc的螢幕寬度,一般都在1000畫素以上 目前主流寬度是1366 768 有...