我应该使用 max-device-width 还是 max-width?

本文介绍了我应该使用 max-device-width 还是 max-width?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

通过 CSS 媒体查询，您可以使用 max-device-width 来定位设备宽度(例如 iPhone 或 Android 设备)和/或 max-width以页面宽度为目标.

如果你使用max-device-width，当你改变桌面浏览器窗口的大小时，CSS不会改变，因为你的桌面大小不会改变.>

如果您使用 max-width，当您在桌面上更改浏览器窗口的大小时，您可能会看到面向移动设备的样式，例如触摸友好的元素和菜单等东西.

现在已弃用以特定浏览器(和设备?)为目标，您应该对目标更加不可知.这也适用于媒体查询吗?

你为什么要针对另一个?哪一个是推荐的?

这是我在生产网站上使用的媒体查询示例:

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (min-device-height: 480px) and (max-device-height: 640px){/* 更改菜单以更好地适应屏幕等... */}

我倾向于同时使用 max-device-width 和 max-width.

解决方案

TL;DR

如果您正在制作响应式网站，请在媒体查询中使用 min-width/max-width 而不是 min-device-widthcode>/max-device-width 以定位更广泛的屏幕尺寸.

根据 2018 年媒体查询级别 4 规范草案，device-width 媒体功能已弃用.为了向后兼容，将保留它，但应避免使用.

8.附录 A:已弃用的媒体功能

要查询视口(或页面媒体上的页面框)的大小、width、height 和aspect-ratio应该使用媒体特性，而不是 device-width、device-height 和 device-aspect-ratio，它们指的是物理尺寸无论有多少空间可用于布置的文档，设备都可以使用.device-* 媒体功能有时也用作检测移动设备的代理.相反，作者应该使用能够更好地代表他们尝试设计风格所针对的设备方面的媒体功能.

作为旁注，请记住指定视口元标记在文档的部分:

说明

由于给定设备可能具有的所有可能的屏幕分辨率和像素密度，一个像素不是一个像素，因为有几个因素需要考虑(缩放、像素密度、屏幕分辨率和大小、设备方向、纵横比等).在这种情况下，像素实际上被称为光学参考单元"; 而不是物理硬件像素.

幸运的是，您可以在文档的部分，以控制浏览器视口的宽度和缩放比例.如果此标签的 content 值为 width=device-width，则屏幕的宽度将匹配与设备无关的像素，并确保所有不同设备的缩放和行为一致.

在媒体查询方面，您可能希望使用 max-width 而不是 max-device-width，因为 max-width> 将针对视口(当前浏览器窗口)，而 max-device-width 将针对设备的实际全屏尺寸/分辨率.

换句话说，如果您使用 max-device-width，您将不会在调整桌面浏览器大小时看到应用不同的媒体查询，因为与 max-width 不同，仅考虑设备的实际全屏尺寸；不是浏览器窗口的当前大小.

如果您尝试创建自适应布局，这会产生巨大的差异，因为在调整浏览器大小时网站不会响应.此外，如果您使用 max-device-width，即使将浏览器窗口缩小以匹配所述较小屏幕，您用于定位具有较小屏幕的设备的媒体查询也将不适用于桌面尺寸.

截至 2018 年，最新的媒体查询规范草案实际上已弃用device-width 媒体功能，因此应避免使用.

此外，这篇关于 Google Developers 的文章强烈反对使用 max-device-width:

Google Developers - 网络基础 - 响应式CSS 媒体查询

也可以基于*-device-width创建查询；尽管这种做法强烈不鼓励.

区别很细微但非常重要:min-width 基于浏览器窗口的大小，而 min-device-width 基于浏览器窗口的大小屏幕.遗憾的是，某些浏览器(包括旧版 Android 浏览器)可能无法正确报告设备宽度，而是报告以设备像素为单位的屏幕尺寸，而不是预期的视口宽度.

此外，使用 *-device-width 可以防止内容适应桌面或其他允许调整窗口大小的设备，因为查询是基于实际设备大小，而不是浏览器窗口.

With CSS media queries you can use max-device-width to target a device width (such as an iPhone or Android device) and/or a max-width that targets a page width.

If you use max-device-width, when you change the size of the browser window on your desktop, the CSS won't change, because your desktop doesn't change size.

If you use max-width, when you change the size of the browser window on your desktop, you might be shown mobile-orientated styling, such as touch-friendly elements and menus and that kind of thing.

Targeting specific browsers (and devices?) is now deprecated and you should be a little more agnostic with what you target. Does that apply to media queries too?

Why would you target one over the other? Which one is the recommended one?

This is an example of a media query I use on a production website:

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (min-device-height: 480px) and (max-device-height: 640px) {
    /* Change a menu to fit the screen better, etc... */
}

I tend to use both max-device-width and max-width.

解决方案

TL;DR

If you're making a responsive website, use min-width/max-width in your media queries rather than min-device-width/max-device-width in order to target a wider range of screen sizes.

According to the 2018 Media Queries Level 4 specification draft, the device-width media feature is deprecated. It will be kept for backward compatibility, but should be avoided.

As a side note, remember to specify a viewport meta tag in the <head> section of your document:

<meta name="viewport" content="width=device-width, initial-scale=1">

Explanation

Due to all the different possible screen resolutions and pixel densities a given device can have, a pixel is not a pixel because there are several things to take into consideration (zoom, pixel density, screen resolution and size, device orientation, aspect ratio, etc..). In this case, a pixel is actually referred to as a "optical reference unit" rather than a physic hardware pixel.

Fortunately, you can specify a viewport meta tag in the <head> section of your document in order to control the width and scaling of the browser's viewport. If this tag has a content value of width=device-width, the screen's width will match the device independent pixels and will ensure that all the different devices should scale and behave consistently.

<meta name="viewport" content="width=device-width, initial-scale=1">

In terms of media queries, you will probably want to use max-width rather than max-device-width, since max-width will target the viewport (current browser window), whereas max-device-width will target the device's actual full screen size/resolution.

In other words, if you are using max-device-width, you will not see different media queries applied when resizing your desktop browser, because unlike max-width, only the device's actual full screen size is taken into consideration; not the current size of the browser window.

This makes a huge difference if you're trying to create an adaptive layout because the site won't be responsive when resizing the browser. In addition, if you're using max-device-width the media queries you're using to target devices with smaller screens will not apply to desktops even when resizing the browser window down to match said smaller screen size.

As of 2018, the latest media query specification draft has actually deprecated the device-width media feature, therefore it should be avoided.

In addition, this article on Google Developers highly discourages the usage of max-device-width:

Specification