CSS响应式布局

1.打印机

@media print{
  background:transparent;
}

2.屏幕

@media screen{
  h1{
    font-family:"";
  }
}

@media (width：800px){
  h1{
      color:blue;
  }
}

//检测视口宽度小于等于700px，应用样式
@media(max-width:700px){
    h1{
      background-color:blue;
  }
}
//视口宽度大于900px引用样式
@media(min-width:900px){
    h1{
      background-color:red;
}
}
//设备宽度
@media(device-width:1920px){
  h1{
    background-color:green;
}
}

更多
max-device-width
min-device-width
orientation 视口的旋转方向
1.portrait 纵向，高度大于宽度
2.landscape 横向，宽度大于高度

运算符
1.and运算符

@media(max-width:700px) and (max-width:800px){
  h1{
    ...
}
}

2.or运算符。或
3.not否定运算符

@media not screen{
    h1{
    ...
}
}

4.only 肯定运算符

@media only screen{
    h1{
    ...
}
}

媒体查询
https://www.w3schools.com/css/css3_mediaqueries.asp
https://www.w3schools.com/css/css3_mediaqueries_ex.asp

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
网格视图
https://www.w3schools.com/css/css_rwd_grid.asp
网格媒体查询
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
响应式图像
https://www.w3schools.com/css/css_rwd_images.asp