媒體查詢

本人喜歡用的:(需要用到多少個屏幕適應的話就寫幾套css代碼)

1、引入頭文件<meta>告訴瀏覽器要自適應網頁大小

<metaname="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

2、示例,在此就只寫兩個屏作爲說明:

@media screen and(max-width:1365px){

body{

background:green;

}

}


@media screen and(min-width:1366px){

body{

background:red;

}

}

3、解釋屬性:

width=device-width---->表示寬度是設備屏幕的寬度

initial-scale=1.0----->表示初始的縮放比例(0~1)此處表示不縮放

maximum-scale=1.0----->表示最小的縮放比例此處表示不縮放 

user-scalable=no/yes ----->表示用戶是否可以調整縮放比例




發佈了23 篇原創文章 · 獲贊 5 · 訪問量 1萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章