網頁螢幕分辯率尺寸

網頁螢幕解析度

各螢幕解析度使用佔比：

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

則 換算成ema例如

a則換算成em

apc端按螢幕寬度大小排序

解析度   比例 | 裝置尺寸

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 有...