媒体查询

如果一个网页既要使用于pc端 又得使用于移动端 :
1. 响应式设计 利用媒体查询判断设备的宽度 采用不同的css 华为官网和苹果官网
2.设计开发的时候 直接开发两个版本 PC和移动端两个版本 发送请求一个网页的 时候，根据请求判断当前设备类型 返回不同的一个网页 [淘宝 百度]

媒体查询赋予css有判断设备类型和屏幕尺寸的能力
媒体查询样式仅在条件成立的时候执行

@media(条件1，条件2){}
(注释：max-width 最大的宽度 指的是视口的宽度 )
@media(max-width:1600px) {
section {
background-color: yellowgreen;
width: 1200px;
}
}
@media(max-width:1200px) {
( 注释：当视口的宽度小于1200px的时候 满足该条件)
section {
background-color: orange;
}
}
(注释：宽高比 小于1/1)
@media(max-aspect-ratio:1/1) {
.box {
height: 300px;
}
}