本人喜歡用的:(需要用到多少個屏幕適應的話就寫幾套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 ----->表示用戶是否可以調整縮放比例