max(min)-device-width和max(min)-width的区别

Posted 2020-08-28 心之所向便是光

max-device-width和max-width的区别

max-device-width和max-width是有区别的，表现在如下几个方面：

1、max-device-width是设备整个显示区域的宽度，例如，真实的设备屏幕宽度。

2、max-width是目标显示区域的宽度，例如，浏览器宽度。

3、如果使用max-device-width，那么在PC浏览器上浏览网页时，缩小或放大浏览器时是不执行CSS的，因为“PC设备”没有变化。但如果使用max-width，缩小或放大浏览器时是执行CSS的，因为“显示区域”即浏览器大小发生了变化。

4、如果使用max-device-width，那么当手机由竖变横时，CSS是不执行的，因为“手机宽度”并没有变化。如果使用max-width，那么当手机由竖变横时，CSS是执行的，因为“显示区域”发生了变化。

5、通常，面向“移动设备”用户使用max-device-width；面向“PC设备”用户使用max-width。

通过这样解释，你应该对max-device-width和max-width的区别和使用有所了解了吧。

看看下面的写法

1 /* #### 移动设备 #### */
2 @media screen and (max-device-width: 480px){
3 /* CSS 代码 */
4 }
5 /* #### PC #### */
6 @media screen and (max-width: 1024px){
7 /* CSS 代码 */
8 }

min-device-width和min-width的区别，跟max-device-width和max-width的区别是一样的。