web開發 相容不同的螢幕解析度和瀏覽器

2021-09-24 17:44:21 字數 728 閱讀 5853

一、css**查詢

使用 css3 的@media 查詢,你可以針對不同的**型別定義不同的樣式。它的語法結構是:

@media mediatype and|not|only (media feature) 12

3我們在實際開發專案中針對常見的可以這樣寫,比如:

/*最大螢幕解析度為1280px*/

@media screen and (max-width:1280px)

}/*最小螢幕解析度為1280px且最大為1440px*/

@media (min-width: 1280px) and (max-width:1440px)

}/*最小螢幕解析度為1440px且最大為1680px*/

@media (min-width: 1440px) and (max-width:1680px)

}/*最小螢幕解析度為1920px*/

@media screen and (min-width:1920px)

}將類名針對不同的螢幕大小寫在對應的**查詢內容中,系統會根據不同的樣式內容在瀏覽器裡做出響應式變化,此方法也常用於適應相容不同的移動裝置。

二、js判斷瀏覽器核心

在實際開發專案中,同樣的螢幕解析度寬度但由於各個瀏覽器的核心或者選單欄導航欄顯示內容的不同,所呈現的網頁效果會有差別,所以需要判斷不同的瀏覽器核心來在樣式上做區別。在響應式布局中,有些高度和寬度都需要用百分比來做適應,那這個時候的高度我們可以在不同的瀏覽器裡做個對比:

適配不同解析度螢幕

如今的螢幕解析度,小至320px iphone 大到2560px甚至更高 大顯示器 變化範圍極大。除了使用傳統的台式電腦,使用者會越來越多的通過手機 上網本 ipad一類的平板裝置來瀏覽頁面。這種情況下,固定寬度的設計方案將會顯得越發不合理。頁面需要有更好的適應性,其布局結構要做到根據不同的裝置及螢...

螢幕解析度

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 寶石機,標榜可以 讓畫面塞滿螢幕,不留黑邊 主流顯示器各尺...