CSS3 media 查詢 和 rem畫素

2021-10-08 15:05:06 字數 743 閱讀 6177

/** 如果文件寬度小於 300 畫素則修改背景顏色(background-color):*/

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

}

rem 單位是乙個相對大小的長度,它是根據html標籤的字型大小來決定長度(瀏覽器的預設字型大小為16px)。也就是說當html裡面的字型越大,rem的長度就越長。

ccccc

html

@media screen and (min-width:321px) and (max-width:375px)}

@media screen and (min-width:376px) and (max-width:414px)}

@media screen and (min-width:415px) and (max-width:639px)}

@media screen and (min-width:640px) and (max-width:719px)}

@media screen and (min-width:720px) and (max-width:749px)}

@media screen and (min-width:750px) and (max-width:799px)}

@media screen and (min-width:800px)}

css3 media 響應式布局的簡單例項

響應式布局可以為不同終端的使用者提供更加舒適的介面和更好的使用者體驗,而且隨著目前大螢幕移動裝置的普及,用 大勢所趨 來形容也不為過。隨著越來越多的設計師採用這個技術,我們不僅看到很多的創新,還看到了一些成形的模式。隨著技術的發展css3的特性也被廣泛應用開來,它的很多新標籤也非常好用而且非常容易學...

CSS 自適應網頁使用 media和rem

media 查詢選擇性載入css,意思是自動探測螢幕寬度,然後載入相應的css檔案。可以針對不同的螢幕尺寸設定不同的樣式,特別是需要設定設計響應式的頁面,media 是個不錯的選擇 用法 media 裝置型別 and 裝置特性 寬度 裝置型別有很多 這是screen是顯示器的意思 media scr...

CSS3中的media查詢

這幾天,在看慕課網的css3,寫得很詳細,位址在這 做一下筆記 1 css3中的10種 查詢型別 值 裝置型別 all 所有裝置 需要熟悉的 screen 螢幕顯示器 需要熟悉的 print 列印用紙或列印預覽檢視 需要熟悉的 braille 盲人用點字法觸覺回饋裝置 embossed 盲文印表機 ...