max(min)-device-width和max(min)-width的使用注意事项

在网页中使用@media做页面适配时，必不可少去使用max(min)-width或者max(min)-device-width，一开始以为这两者没什么区别，所以项目基本用到@media的地方都使用了max(min)-width去限制，但是在页面测试时发现了一个问题：在浏览器执行缩放操作时，原来作用于移动端的样式居然出现在了PC端页面上，这肯定要改啦！！！！！

后面去看了@media相关的用法，发现max(min)-device-width和max(min)-width真的是有区别的，max(min)-device-width简单来说表示的是电脑 / 手机的屏幕宽度，而max(min)-width是浏览器宽度（也就是打开一个页面主体区域的宽度）

PC端：如果使用max(min)-device-width，缩放时不会改变css，如果使用max(min)-width，缩放时就会改变css

移动端：如果使用max(min)-device-width，竖屏切横屏时不改变css，如果使用max(min)-width，竖屏切横屏时时会改变css

所以根据自己的需要严谨使用max(min)-device-width和max(min)-width