-
媒體查詢其他引入方式2
媒體查詢@media
link引入
外部樣式表：
<link href="css地址" rel="stylesheent">
查看全部 -
復習：@media:媒體查詢
//媒體查詢：屏幕最小寬度為500px最大寬度為600px時樣式為...//
@media screen and(min-width:500px) and (max-width:600px){
}
float:浮動 是讓div盒子動起來
學習：媒體查詢其他引入方式
公共部分
<style >
#div0{
width:500px;
height:200px;
}
#div0 div{
float:left;
height:100px;
}
#div0 div:nth-child(1){
background-color:red;
}
#div0 div:nth-child(2){
background-color:green;
}
#div0 div:nth-child(3){
background-color:blue;
}
</style>
條件部分
<style media="(min-device-width:200px) and (max-device-width:399px)">
width:100%
</style>
<style media="(min-device-width:400px) and (max-device-width:499px)">
width:50%
</style>
<style media="(min-device-width:500px) and (max-device-width:599px)">
width:33.3%
</style>
查看全部 -
@media常用參數(shù)：width.height:瀏覽器可視寬度高度
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? device-width:設(shè)備屏幕的寬度；（適用移動端）
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? device-height：設(shè)備屏幕的高度；（適用移動端）
@media screen and (min-width:300px) and (max-width:500px)
*and兩邊要有空格*
float：left：左浮動 ；float:浮動；left:左
#div0 div:nth-child(1):ID為父級是div0的第一個子級
查看全部 -
很好的前端課程。查看全部
-
width、height? ?是瀏覽器的可視寬度、高度
device-width是設(shè)備的屏幕寬度
device-height是設(shè)備的屏幕高度
查看全部 -
min-device-*? max-device-*? 表示寬、高的范圍內(nèi)，樣式的變化。
@media screen and (min-device-*) and (max-device-*) {
}
查看全部 -
rem彈性布局
查看全部 -
自適應(yīng)布局設(shè)定思路
查看全部 -
rem的用法，設(shè)定畫面初始字體
查看全部 -
flex特殊寫法
查看全部 -
flex其他屬性
查看全部 -
media 常用參數(shù)
查看全部 -
啦啦啦啦啦查看全部
-
怎么均碼的是查看全部
-
40 最大字體
查看全部
舉報