-
媒体查询其他引入方式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常用参数：width.height:浏览器可视宽度高度
device-width:设备屏幕的宽度；（适用移动端）
device-height：设备屏幕的高度；（适用移动端）
@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是设备的屏幕宽度
device-height是设备的屏幕高度
查看全部 -
min-device-* max-device-* 表示宽、高的范围内，样式的变化。
@media screen and (min-device-*) and (max-device-*) {
}
查看全部 -
rem弹性布局
查看全部 -
自适应布局设定思路
查看全部 -
rem的用法，设定画面初始字体
查看全部 -
flex特殊写法
查看全部 -
flex其他属性
查看全部 -
media 常用参数
查看全部 -
啦啦啦啦啦查看全部
-
怎么均码的是查看全部
-
40 最大字体
查看全部
举报