小白学习媒体查询(适配不分辨率的屏幕)

以vue为例，由于自己写的样式在不同分辨率的屏幕上，样式会出现变形。所以我使用了css的媒体查询技术

1、媒体查询的语法

在标签里使用@media screen and (max-width: 浏览器窗口的宽度)(最大宽度)或者使用@media screen and (min-width: 浏览器窗口宽度)

2、例子

3、注意点

如果使用min-width，则要把屏幕小的放在屏幕大的上面。如果使用max-width，则要把屏幕大的放在屏幕小的上面