@media(max-height:700){}
响应式布局-自适应布局 不同的设备 不同的窗口大小 展示不同的CSS就是媒体查询
1、两套代码 同一个域名
2、一套代码 在不同的分辨率下展示改动
3、写@media的时候 要把这个写在要设置的box后面
4、导入<link type="text/css" href="style.css" media="screen and (min-width:700px) and (max-width:990px) "/>
---常见自适应的方法---
1、自适应屏幕 固定页面宽度 内容居中
.conter {
width: 990px;
margin: 0auto;
height: 200px;
line-height: 200px;
}
2、百分比屏幕 如有4个块 每个设置25% 自适应
.conter {
display: inline-block;
width: 25%;
height: 200px;
box-sizing: border-box;
}
3、浮动 多出来的部分会被自动挤下去
.container {
float: left;
padding: 8px 12px;
border: 1px solid #ccc;
}
4、响应式 媒体查询Media Queries 自适应
@media (min-width:700px) and (max-width:990px){ and-组合操作符
.container{
background: red;
}
}
