blocks|key|332318|text|device-width是...|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|332319|输出设备的|332320|宽度(指整个屏幕或页面，而不仅仅是呈现区域，如文档窗口)。|blockquote|332321|332322|332323|Source。|332324|width...|332325|332326|描述输出设备的呈现表面的宽度(如文档窗口的宽度或打印机上的页框的宽度)|332327|332328|332329|332330|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en/CSS/Media_queries#device-width|1|https://developer.mozilla.org/en/CSS/Media_queries#width^0|0|C|0|0|0|0|0|0|6|0|0|0|5|0|0|0|0|0|0|6|1|0^^$0|@$1|2|3|4|5|6|7|16|8|@$9|17|A|18|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|19|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|1A|8|@]|D|@]|E|$]]|$1|K|3|-4|5|6|7|1B|8|@]|D|@]|E|$]]|$1|L|3|-4|5|6|7|1C|8|@]|D|@]|E|$]]|$1|M|3|N|5|6|7|1D|8|@]|D|@$9|1E|A|1F|1|1G]]|E|$]]|$1|O|3|P|5|6|7|1H|8|@$9|1I|A|1J|B|C]]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|1K|8|@]|D|@]|E|$]]|$1|R|3|S|5|J|7|1L|8|@]|D|@]|E|$]]|$1|T|3|-4|5|6|7|1M|8|@]|D|@]|E|$]]|$1|U|3|-4|5|6|7|1N|8|@]|D|@]|E|$]]|$1|V|3|N|5|6|7|1O|8|@]|D|@$9|1P|A|1Q|1|1R]]|E|$]]|$1|W|3|-4|5|6|7|1S|8|@]|D|@]|E|$]]]|X|$Y|$5|Z|10|11|E|$12|13]]|14|$5|Z|10|11|E|$12|15]]]]

<code>device-width</code> is the...

<blockquote>
 width of the output device (meaning the entire screen or page, rather than just the rendering area, such as the document window).
</blockquote>

<a href="https://developer.mozilla.org/en/CSS/Media_queries#device-width">Source</a>.

The <code>width</code>...

<blockquote>
 describes the width of the rendering surface of the output device (such as the width of the document window, or the width of the page box on a printer)
</blockquote>

<a href="https://developer.mozilla.org/en/CSS/Media_queries#width">Source</a>.

blocks|key|1951945|text|device-width描述输出设备的高度(即整个屏幕或页面，而不仅仅是呈现区域，如文档窗口)。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1951946|而height+CSS属性指定元素的内容区域的高度。内容区域位于元素的填充、边框和边距内。|1951947|来源：https://developer.mozilla.org/en/CSS/|1951948|有关媒体查询的详细信息，请参阅：http://www.w3.org/TR/css3-mediaqueries/|1951949|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en/CSS/|1|http://www.w3.org/TR/css3-mediaqueries/^0|0|C|0|1|6|0|3|11|0|0|G|13|1|0^^$0|@$1|2|3|4|5|6|7|V|8|@$9|W|A|X|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Y|8|@$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|11|8|@]|D|@$9|12|A|13|1|14]]|E|$]]|$1|J|3|K|5|6|7|15|8|@]|D|@$9|16|A|17|1|18]]|E|$]]|$1|L|3|-4|5|6|7|19|8|@]|D|@]|E|$]]]|M|$N|$5|O|P|Q|E|$R|S]]|T|$5|O|P|Q|E|$R|U]]]]

The <code>device-width</code> describes the height of the output device (meaning the entire screen or page, rather than just the rendering area, such as the document window).

Whereas the <code>height</code> CSS property specifies the height of the content area of an element. The content area is inside the padding, border, and margin of the element.

Source: <a href="https://developer.mozilla.org/en/CSS/" rel="nofollow">https://developer.mozilla.org/en/CSS/</a>

For more on media queries, see: <a href="http://www.w3.org/TR/css3-mediaqueries/" rel="nofollow">http://www.w3.org/TR/css3-mediaqueries/</a>

blocks|key|1951974|text|如果你定义device-width意味着当你在iphone，ipad，ipod和移动设备中打开你的页面时，你的特定的css是被调用的。例如：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1951975|@media+only+screen+and+(max-device-width:480px){
++++++++body{
++++++++++color:red;
++++++++}
++++}|code-block|syntax|javascript|1951976|或者如果你定义了宽度，这意味着当你的窗口调整大小时，你的特定css会被调用。例如：|1951977|@media+only+screen+and+(min-width:+481px)+and+(max-width:+1024px)+{
++++++++body{
+++++++++color:yellow;
++++++++}
++++}+|1951978|有关更多信息，请查看http://webdesignerwall.com/tutorials/css3-media-queries、http://x7.fi/2010/02/12/how-to-fit-your-website-for-the-apple-ipad/|1951979|entityMap|0|LINK|mutability|MUTABLE|url|http://webdesignerwall.com/tutorials/css3-media-queries|1|http://x7.fi/2010/02/12/how-to-fit-your-website-for-the-apple-ipad/^0|5|C|0|0|0|0|A|1J|0|1U|1V|1|0^^$0|@$1|2|3|4|5|6|7|10|8|@$9|11|A|12|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|13|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|14|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|15|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|16|8|@]|D|@$9|17|A|18|1|19]|$9|1A|A|1B|1|1C]]|E|$]]|$1|Q|3|-4|5|6|7|1D|8|@]|D|@]|E|$]]]|R|$S|$5|T|U|V|E|$W|X]]|Y|$5|T|U|V|E|$W|Z]]]]

If you define <code>device-width</code> means your particular css is call when you open your page in iphone, ipad ,ipod &amp; mobile device . for example :

<pre><code>@media only screen and (max-device-width:480px){
 body{
 color:red;
 }
 }
</code></pre>

or if you define width which means your particular css is call when your window is resize .
for example :

<pre><code>@media only screen and (min-width: 481px) and (max-width: 1024px) {
 body{
 color:yellow;
 }
 } 
</code></pre>

for more info please check <a href="http://webdesignerwall.com/tutorials/css3-media-queries" rel="nofollow">http://webdesignerwall.com/tutorials/css3-media-queries</a> , <a href="http://x7.fi/2010/02/12/how-to-fit-your-website-for-the-apple-ipad/" rel="nofollow">http://x7.fi/2010/02/12/how-to-fit-your-website-for-the-apple-ipad/</a>

blocks|key|2322991|text|一个迟来的回答不是希望它能帮助某些人|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2322992|2322993|在CSS+media中宽度和设备宽度之间的区别可能有点混乱，所以让我们稍微解释一下。+device+-width指的是设备本身的屏幕宽度，换句话说，就是设备的屏幕分辨率。假设您的屏幕分辨率为1440x900。这意味着屏幕的宽度是1440像素，所以它的设备宽度是1440px。大多数手机的设备宽度为480px或更低，包括流行的iPhone+4(设备宽度:+320px)，尽管从技术上讲，它的分辨率为640x960。这要归功于iPhone+4的视网膜显示屏，它将两个设备像素塞进屏幕上的每个CSS像素中。IPad3也是如此；据报道，iPad3的设备宽度是768px，就像之前的产品一样，尽管它的实际屏幕分辨率是1536px+x+2048px。一般而言，在创建响应式网页时，宽度更加通用，尽管当您希望专门针对移动设备(而不是具有小浏览器窗口的桌面)时，设备宽度是有用的。|blockquote|offset|length|style|BOLD|2322994|2322995|2322996|来自+developer.mozilla.org+，的as|2322997|2322998|+宽度:|2322999|2323000|值:媒体:视觉，触觉|2323001|接受最小/最大前缀:是|2323002|宽度介质功能描述输出设备的呈现表面的宽度(例如文档窗口的宽度，或打印机上的页框的宽度)。注意:当用户调整窗口大小时，浏览器使用宽度和高度媒体功能根据媒体查询适当地切换样式表。！|2323003|2323004|我发现这篇文章非常有趣，来自javascriptkit：http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml|2323005|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries#width|1|http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml^0|0|0|16|E|0|0|0|P|1|R|2|3|L|0|0|0|1|3|0|0|0|A|0|0|B|0|0|2G|0|0|0|2J|S|1R|1|0^^$0|@$1|2|3|4|5|6|7|1A|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|1B|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|1C|8|@$F|1D|G|1E|H|I]]|9|@]|A|$]]|$1|J|3|-4|5|6|7|1F|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|1G|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|1H|8|@$F|1I|G|1J|H|I]|$F|1K|G|1L|H|I]]|9|@$F|1M|G|1N|1|1O]]|A|$]]|$1|N|3|-4|5|6|7|1P|8|@]|9|@]|A|$]]|$1|O|3|P|5|E|7|1Q|8|@$F|1R|G|1S|H|I]]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|1T|8|@]|9|@]|A|$]]|$1|R|3|S|5|6|7|1U|8|@$F|1V|G|1W|H|I]]|9|@]|A|$]]|$1|T|3|U|5|6|7|1X|8|@$F|1Y|G|1Z|H|I]]|9|@]|A|$]]|$1|V|3|W|5|6|7|20|8|@$F|21|G|22|H|I]]|9|@]|A|$]]|$1|X|3|-4|5|6|7|23|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|6|7|24|8|@$F|25|G|26|H|I]]|9|@$F|27|G|28|1|29]]|A|$]]|$1|10|3|-4|5|6|7|2A|8|@]|9|@]|A|$]]]|11|$12|$5|13|14|15|A|$16|17]]|18|$5|13|14|15|A|$16|19]]]]

More than a late answer Hopes it will help Some one

<blockquote>
 In CSS media the difference between width and device-width can be a
 bit muddled, so lets expound on that a bit. device-width refers to the
 width of the device itself, in other words, the screen resolution of
 the device. Lets say your screen's resolution is 1440 x 900. This
 means the screen is 1440 pixels across, so it has a device-width of
 1440px. Most mobile phones have a device-width of 480px or lower,
 including the popular iPhone 4 (with device-width: 320px), despite it
 technically having a 640 x 960 resolution. This is due to iPhone 4's
 retina display, which crams two device pixels into each CSS pixel on
 the screen. This is true for the Ipad 3 as well; its reported
 device-width is 768px just like its predecessors, even though its
 actual screen resolution is 1536px x 2048px. In general width is more
 versatile when it comes to creating responsive webpages, though
 device-width is useful when you wish to specifically target mobile
 devices (and not desktops with a small browser window for example)
</blockquote>

as from <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries#width">developer.mozilla.org</a> ,

<blockquote>
 width : 
 Value: Media: visual, tactile 
 Accepts min/max prefixes: yes
 
 The width media feature describes the width of the rendering surface
 of the output device (such as the width of the document window, or the
 width of the page box on a printer). 
 Note: As the user resizes the window browser switches style sheets as appropriate based on media queries using the width and height media features. !!!
</blockquote>

i found this article very interestingly from javascriptkit :
<a href="http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml">http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml</a>

blocks|key|332451|text|如果你正在制作一个跨平台的应用程序(例如。使用phonegap/cordova)然后，|type|unstyled|depth|inlineStyleRanges|entityRanges|data|332452|不要使用device-width或device-height。在CSS媒体查询中使用width或height，因为Android设备会给出设备宽度或设备高度的问题。对于iOS来说，它工作得很好。只有android设备不支持device-width/device-height。|332453|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

If you are making a cross-platform app (eg. using phonegap/cordova) then,

Don't use device-width or device-height. Rather use width or height in CSS media queries because Android device will give problems in device-width or device-height. For iOS it works fine. Only android devices doesn't support device-width/device-height.

What is the difference (in simple terms) between height and width and device-width and device-height?

Difference between width and device-width in CSS media queries

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

高度和宽度与设备宽度和设备高度之间的区别(简单地说)是什么？

问CSS媒体查询中width和device-width的区别
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS媒体查询中width和device-width的区别EN