不同浏览器窗口大小加载不同CSS样式

Media Queries使用方法

@media 设备类型 and （设备特征）{样式代码}

在样式的代码开头必须要写@media，然后指定设备的类型（媒体类型）

设备特性的书写方式与样式的书写方式很相似，分为两个部分，当中有冒号分隔，冒号前书写的设备的某种特性，冒号后书写该特性的具体值。例如，需要指定浏览器的窗口宽度大于400px时，我们可以写（min-width：400px）

可指定的值与其所代表的设备类型有：all、screen、print、handheld、tv、speech、Braille、embossed、projection、tty

设备特性的说明：width、height、device-height、device-width、orientation、aspect-ratio、device-aspect-rate、color-index、monochrome、resolution、scan、grid

使用and关键字来指定某种设备类型的某种特征值满足某个条件使所使用样式，比如当设备窗口宽度于640px时所使用的样式：

@media screen and（max-width：639px）{

　　样式代码

}

原文地址：https://www.cnblogs.com/YamLilac-1101/p/10504908.html