@media screen实现屏幕自适应

优点:无需插件和手机主题，对移动设备友好，能够适应各种窗口大小。只需在CSS中添加@media screen属性，根据浏览器宽度判断并输出不同的长宽值。

学习网址：https://blog.csdn.net/u013040887/article/details/79228093

CSS3 Media的写法

1、当页面宽度小于960px

@media screen and (max-width: 960px){
    body{
        background: #000;
    }
}

2、当页面宽度等于960px

@media screen and (max-device-width:960px){
    body{
        background:red;
    }
}

3、当页面宽度大于960px

@media screen and (min-width:960px){
    body{
        background:orange;
    }
}

4、当页面宽度大于960px小于1200px（960px~1200px）

@media screen and (min-width:960px) and (max-width:1200px){
    body{
        background:yellow;
    }
}

Media之所有参数汇总

width:浏览器可视宽度。
height:浏览器可视高度。
device-width:设备屏幕的宽度。
device-height:设备屏幕的高度。
orientation:检测设备目前处于横向还是纵向状态。
aspect-ratio:检测浏览器可视宽度和高度的比例。(例如：aspect-ratio:16/9)
device-aspect-ratio:检测设备的宽度和高度的比例。
color:检测颜色的位数。（例如：min-color:32就会检测设备是否拥有32位颜色）
color-index:检查设备颜色索引表中的颜色，他的值不能是负数。
monochrome:检测单色楨缓冲区域中的每个像素的位数。（这个太高级，估计咱很少会用的到）
resolution:检测屏幕或打印机的分辨率。(例如：min-resolution:300dpi或min-resolution:118dpcm)。
grid：检测输出的设备是网格的还是位图设备。

需要注意的地方

1、上面的代码中用到了screen，它的意思是在告知设备在打印页面时使用衬线字体，在屏幕上显示时用无衬线字体。但是目前我发现很多网站都会直接省略screen，因为你的网站可能不需要考虑用户去打印时。

2、注意下顺序，如果你把@media (min-width: 768px)写在了下面那么很悲剧，
@media (min-width: 1200){ //>=1200的设备 }
@media (min-width: 992px){ //>=992的设备 }
@media (min-width: 768px){ //>=768的设备 }
因为如果是1440,由于1440>768那么你的1200就会失效。
所以我们用min-width时，小的放上面大的在下面，同理如果是用max-width那么就是大的在上面，小的在下面
@media (max-width: 1199){ //<=1199的设备 }
@media (max-width: 991px){ //<=991的设备 }
@media (max-width: 767px){ //<=768的设备 }

PC端按屏幕宽度大小排序

通过上面的电脑屏蔽及尺寸的例表上我们得到了几个宽度
1024 1280 1366 1440 1680 1920

CSS代码

@media (min-width: 1024px){
  body{font-size: 18px}
} /*>=1024的设备*/
@media (min-width: 1100px) {
  body{font-size: 20px}
} /*>=1024的设备*/
@media (min-width: 1280px) {
  body{font-size: 22px;}
} 
@media (min-width: 1366px) {
  body{font-size: 24px;}
}  
@media (min-width: 1440px) {
  body{font-size: 25px !important;}
} 
@media (min-width: 1680px) {
  body{font-size: 28px;}
} 
@media (min-width: 1920px) {
  body{font-size: 33px;}
}