blocks|key|1047845|text|试着这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1047846|@media+screen+and+(min-width:+1024px)+and+and+(max-width:1280px)
{
+.....
}|code-block|syntax|javascript|1047847|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Try like this:

<pre><code>@media screen and (min-width: 1024px) and and (max-width:1280px)
{
 .....
}
</code></pre>

blocks|key|1047849|text|@HMS+Designz，如果您想访问媒体查询1280到1024的分辨率。你可以试着这样做。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1047850|@media+screen+and+(min-width:1024px)+and+(max-width:1280px)+{}|code-block|syntax|javascript|1047851|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

@HMS Designz, If you want to access media query 1280 to 1024 resolution. You can try like this.

<pre><code>@media screen and (min-width:1024px) and (max-width:1280px) {}
</code></pre>

blocks|key|904082|text|您没有为1280像素分辨率创建任何媒体查询。首先使用以下媒体查询为该解析创建媒体查询。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|904083|@media+screen+and+(min-width:1024)+and+(max-width:1280px)
{

}|code-block|syntax|javascript|904084|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You are not create any media query for 1280 px resolutions. First create media query for that resolution using following media query.

<pre><code>@media screen and (min-width:1024) and (max-width:1280px)
{

}
</code></pre>

blocks|key|3219822|text|@media+all+and+(min-width:+1280px)+{
+/*+css+for+width+greater+than+1280px+*/
}

@media+all+and+(max-width:+1280px)+and+(min-width:+1024px)+{
+/*+css+for+width+between+1280px+and+1024px+*/
}

@media+all+and+(max-width:+1023px)+{
+/*+css+for+width+less+than+1024px+*/
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|3219823|是对媒体查询的详细解释。|unstyled|3219824|将其包含在<head></head>中(如果没有)|offset|length|style|CODE|3219825|++<meta+name="viewport"+content="width=device-width,+user-scalable=no"+/>+<--+user-scalable=yes+if+you+want+user+to+allow+zoom+-->|3219826|将@media样式更改为this+//根据您的要求更改宽度|3219827|@media+only+screen+(max-width:+500px)+{
+//+or+as+per+your+needs,+as+I+try+to+explain+below
}|3219828|现在我试着解释一下也许..：)|3219829|@media+(max-width:500px)|3219830|用于要应用这些样式的max-width为500px的窗口。在大多数情况下，在这种大小下，你会谈论任何比桌面屏幕更小的东西。|3219831|@media+screen+and+(max-width:500px)|3219832|对于具有screen和max-width为500px的窗口的设备，请应用样式。这与上面的代码几乎相同，除了您指定的是screen而不是other+media+types，另一个最常见的是print。|3219833|@media+only+screen+and+(max-width:500px)|3219834|这里有一个直接来自W3C的quote来解释这个问题。|3219835|3219836|关键字‘only’也可用于对较旧的用户代理隐藏样式表。用户代理必须处理以‘only’开头的媒体查询，就好像‘only’关键字不存在一样。|blockquote|3219837|3219838|3219839|因为没有"only“这样的媒体类型，所以样式表应该被旧的浏览器忽略。|3219840|If|3219841|这就是媒体查询:逻辑的if语句。“如果”这些关于浏览器的事情都是真的，那就使用里面的CSS。|3219842|And|3219843|关键字和。|3219844|@media+(min-width:+600px)+and+(max-width:+800px)+{
++html+{+background:+red;+}
}

Or|3219845|逗号分隔。|3219846|@media+(max-width:+600px),+(min-width:+800px)+{
++html+{+background:+red;+}
}|3219847|从技术上讲，这些被视为独立的媒体查询，但这实际上是and或or。|3219848|Not|3219849|使用关键字not颠倒逻辑。|3219850|@media+not+all+and+(max-width:+600px)+{
++html+{+background:+red;+}
}|3219851|只是不这样做(max-width:+600px)似乎对我不起作用，因此上面的语法有点时髦。也许有人能给我解释一下。请注意，不仅适用于当前媒体查询，因此如果逗号分隔，它只会影响它所在的媒体查询。还请注意，not将整个媒体查询的逻辑作为一个整体进行反转，而不是将其中的个别部分反转。not+x≠y=+not+(x和y)+not+(not+x)+and+y|3219852|独占|BOLD|3219853|要确保一次只有一个媒体查询有效，请使数字(或其他任何数字)成为可能。以这种方式在心理上管理他们可能会更容易。|3219854|@media+(max-width:+400px)+{
++html+{+background:+red;+}
}
@media+(min-width:+401px)+and+(max-width:+800px)+{
++html+{+background:+green;+}
}
@media+(min-width:+801px)+{
++html+{+background:+blue;+}
}|3219855|从逻辑上讲，这有点像switch语句，只是没有一种简单的方法来执行“如果所有这些都不匹配就这样做”这样的默认操作。|3219856|覆盖|3219857|没有什么能阻止多个媒体查询同时为真。在某些情况下使用它可能比使它们全部独占更有效。|3219858|@media+(min-width:+400px)+{
++html+{+background:+red;+}
}
@media+(min-width:+600px)+{
++html+{+background:+green;+}
}
@media+(min-width:+800px)+{
++html+{+background:+blue;+}
}|3219859|媒体查询不会增加它们所包含的选择器的特异性，但源顺序仍然很重要。上面的方法可以正常工作，因为它们的顺序是正确的。交换订单，在浏览器窗口宽度超过800px时，背景将是红色的，也许是好奇的。|3219860|移动First|3219861|您的小屏幕样式在您的常规屏幕CSS中，然后当屏幕变大时，您将覆盖您需要的样式。因此，通常使用最小宽度的媒体查询。|3219862|html+{+background:+red;+}

@media+(min-width:+600px)+{
++html+{+background:+green;+}
}|3219863|桌面第一个|3219864|您的大屏幕样式在常规屏幕CSS中，然后随着屏幕变小，您将覆盖您需要的样式。因此，通常使用最大宽度媒体查询。|3219865|html+{+background:+red;+}

@media+(max-width:+600px)+{
++html+{+background:+green;+}
}|3219866|有了这个，你可以想怎么复杂就怎么复杂。|3219867|@media+
++only+screen+and+(min-width:+100px),
++not+all+and+(min-width:+100px),
++not+print+and+(min-height:+100px),
++(color),
++(min-height:+100px)+and+(max-height:+1000px),
++handheld+and+(orientation:+landscape)
{
++html+{+background:+red;+}
}|3219868|注唯一的关键字是为了防止支持非媒体查询的浏览器不加载样式表或使用样式。不确定这曾经/现在有多有用。|3219869|And+for+media+queries+priorites|3219870|资料来源：one+two+three+four+five|3219871|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/23423868/css-getting-changed-when-applying-css-media-queries-for-responsive-design/23423995#23423995|1|http://www.w3.org/TR/css3-mediaqueries/#media0|2|https://developer.tizen.org/dev-guide/2.2.1/org.tizen.web.appprogramming/html/guide/w3c_guide/dom_guide/media_queries_priority.htm|3|https://stackoverflow.com/questions/10815651/why-is-my-css-media-query-being-ignored-or-overridden/10816111#10816111|4|http://css-tricks.com/logic-in-media-queries/|5|http://css-tricks.com/css-media-queries/|6|https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries|7|http://www.w3.org/TR/css3-mediaqueries/^0|0|0|5|D|0|0|0|0|0|0|A|9|K|5|0|0|4|6|B|9|L|5|1M|6|2L|5|1V|H|0|0|0|D|5|1|0|0|4|4|0|0|0|5|4|0|0|0|0|0|0|0|0|0|0|0|0|0|0|2|0|0|0|0|0|2|0|0|0|0|0|7|0|0|0|0|5|0|0|0|0|0|0|0|V|2|0|5|3|3|9|3|4|D|5|5|J|4|6|O|4|7|0^^$0|@$1|2|3|4|5|6|7|3R|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|3S|8|@]|9|@]|A|$]]|$1|G|3|H|5|F|7|3T|8|@$I|3U|J|3V|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|3W|8|@]|9|@]|A|$B|C]]|$1|O|3|P|5|F|7|3X|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|3Y|8|@]|9|@]|A|$B|C]]|$1|S|3|T|5|F|7|3Z|8|@]|9|@]|A|$]]|$1|U|3|V|5|6|7|40|8|@]|9|@]|A|$B|C]]|$1|W|3|X|5|F|7|41|8|@$I|42|J|43|K|L]|$I|44|J|45|K|L]]|9|@]|A|$]]|$1|Y|3|Z|5|6|7|46|8|@]|9|@]|A|$B|C]]|$1|10|3|11|5|F|7|47|8|@$I|48|J|49|K|L]|$I|4A|J|4B|K|L]|$I|4C|J|4D|K|L]|$I|4E|J|4F|K|L]|$I|4G|J|4H|K|L]]|9|@$I|4I|J|4J|1|4K]]|A|$]]|$1|12|3|13|5|6|7|4L|8|@]|9|@]|A|$B|C]]|$1|14|3|15|5|F|7|4M|8|@]|9|@$I|4N|J|4O|1|4P]]|A|$]]|$1|16|3|-4|5|F|7|4Q|8|@]|9|@]|A|$]]|$1|17|3|18|5|19|7|4R|8|@$I|4S|J|4T|K|L]]|9|@]|A|$]]|$1|1A|3|-4|5|F|7|4U|8|@]|9|@]|A|$]]|$1|1B|3|-4|5|F|7|4V|8|@]|9|@]|A|$]]|$1|1C|3|1D|5|F|7|4W|8|@$I|4X|J|4Y|K|L]]|9|@]|A|$]]|$1|1E|3|1F|5|6|7|4Z|8|@]|9|@]|A|$B|C]]|$1|1G|3|1H|5|F|7|50|8|@]|9|@]|A|$]]|$1|1I|3|1J|5|6|7|51|8|@]|9|@]|A|$B|C]]|$1|1K|3|1L|5|F|7|52|8|@]|9|@]|A|$]]|$1|1M|3|1N|5|6|7|53|8|@]|9|@]|A|$B|C]]|$1|1O|3|1P|5|F|7|54|8|@]|9|@]|A|$]]|$1|1Q|3|1R|5|6|7|55|8|@]|9|@]|A|$B|C]]|$1|1S|3|1T|5|F|7|56|8|@]|9|@]|A|$]]|$1|1U|3|1V|5|6|7|57|8|@]|9|@]|A|$B|C]]|$1|1W|3|1X|5|F|7|58|8|@]|9|@]|A|$]]|$1|1Y|3|1Z|5|6|7|59|8|@]|9|@]|A|$B|C]]|$1|20|3|21|5|F|7|5A|8|@]|9|@]|A|$]]|$1|22|3|23|5|F|7|5B|8|@$I|5C|J|5D|K|24]]|9|@]|A|$]]|$1|25|3|26|5|F|7|5E|8|@]|9|@]|A|$]]|$1|27|3|28|5|6|7|5F|8|@]|9|@]|A|$B|C]]|$1|29|3|2A|5|F|7|5G|8|@]|9|@]|A|$]]|$1|2B|3|2C|5|F|7|5H|8|@$I|5I|J|5J|K|24]]|9|@]|A|$]]|$1|2D|3|2E|5|F|7|5K|8|@]|9|@]|A|$]]|$1|2F|3|2G|5|6|7|5L|8|@]|9|@]|A|$B|C]]|$1|2H|3|2I|5|F|7|5M|8|@]|9|@]|A|$]]|$1|2J|3|2K|5|F|7|5N|8|@$I|5O|J|5P|K|24]]|9|@]|A|$]]|$1|2L|3|2M|5|F|7|5Q|8|@]|9|@]|A|$]]|$1|2N|3|2O|5|6|7|5R|8|@]|9|@]|A|$B|C]]|$1|2P|3|2Q|5|F|7|5S|8|@$I|5T|J|5U|K|24]]|9|@]|A|$]]|$1|2R|3|2S|5|F|7|5V|8|@]|9|@]|A|$]]|$1|2T|3|2U|5|6|7|5W|8|@]|9|@]|A|$B|C]]|$1|2V|3|2W|5|F|7|5X|8|@]|9|@]|A|$]]|$1|2X|3|2Y|5|6|7|5Y|8|@]|9|@]|A|$B|C]]|$1|2Z|3|30|5|F|7|5Z|8|@]|9|@]|A|$]]|$1|31|3|32|5|F|7|60|8|@]|9|@$I|61|J|62|1|63]]|A|$]]|$1|33|3|34|5|F|7|64|8|@]|9|@$I|65|J|66|1|67]|$I|68|J|69|1|6A]|$I|6B|J|6C|1|6D]|$I|6E|J|6F|1|6G]|$I|6H|J|6I|1|6J]]|A|$]]|$1|35|3|-4|5|F|7|6K|8|@]|9|@]|A|$]]]|36|$37|$5|38|39|3A|A|$3B|3C]]|3D|$5|38|39|3A|A|$3B|3E]]|3F|$5|38|39|3A|A|$3B|3G]]|3H|$5|38|39|3A|A|$3B|3I]]|3J|$5|38|39|3A|A|$3B|3K]]|3L|$5|38|39|3A|A|$3B|3M]]|3N|$5|38|39|3A|A|$3B|3O]]|3P|$5|38|39|3A|A|$3B|3Q]]]]

<pre><code>@media all and (min-width: 1280px) {
 /* css for width greater than 1280px */
}

@media all and (max-width: 1280px) and (min-width: 1024px) {
 /* css for width between 1280px and 1024px */
}

@media all and (max-width: 1023px) {
 /* css for width less than 1024px */
}
</code></pre>

 

<a href="https://stackoverflow.com/questions/23423868/css-getting-changed-when-applying-css-media-queries-for-responsive-design/23423995#23423995">Here</a> is detailed explainition of media queries.

 

include this in <code>&lt;head&gt;&lt;/head&gt;</code> (if you have not)

<pre><code> &lt;meta name="viewport" content="width=device-width, user-scalable=no" /&gt; &lt;-- user-scalable=yes if you want user to allow zoom --&gt;
</code></pre>

change you @media style as this // change width as per your requirements

<pre><code>@media only screen (max-width: 500px) {
 // or as per your needs, as I try to explain below
}
</code></pre>

Now I try to explain maybe..:)

<pre><code>@media (max-width:500px)
</code></pre>

for a window with a <code>max-width</code> of <code>500px</code> that you want to apply these styles. At that size you would be talking about anything smaller than a desktop screen in most cases. 

<pre><code>@media screen and (max-width:500px)
</code></pre>

for a device with a <code>screen</code> and a window with <code>max-width</code> of <code>500px</code> apply the style. This is almost identical to the above except you are specifying <code>screen</code> as opposed to the <a href="https://stackoverflow.com/questions/23423868/css-getting-changed-when-applying-css-media-queries-for-responsive-design/23423995#23423995">other media types</a> the most common other one being <code>print</code>.

<pre><code>@media only screen and (max-width:500px)
</code></pre>

Here is a <a href="http://www.w3.org/TR/css3-mediaqueries/#media0" rel="nofollow noreferrer">quote</a> straight from W3C to explain this one.

<blockquote>
 The keyword ‘<code>only</code>’ can also be used to hide style sheets from older user agents. User agents must process media queries starting with ‘only’ as if the ‘only’ keyword was not present.
</blockquote>

As there is no such media type as "<code>only</code>", the style sheet should be ignored by older browsers.

 

<pre><code>If
</code></pre>

That's what media queries are: logical if statements. "If" these things are true about the browser, use the CSS inside.

<pre><code>And
</code></pre>

The keyword and.

<pre><code>@media (min-width: 600px) and (max-width: 800px) {
 html { background: red; }
}

Or
</code></pre>

Comma separate.

<pre><code>@media (max-width: 600px), (min-width: 800px) {
 html { background: red; }
}
</code></pre>

Technically these are treated like to separate media queries, but that is effectively and or.

<pre><code>Not
</code></pre>

Reverse the logic with the keyword not.

<pre><code>@media not all and (max-width: 600px) {
 html { background: red; }
}
</code></pre>

Just doing not (max-width: 600px) doesn't seem to work for me, hence the slightly funky syntax above. Perhaps someone can explain that to me. Note that not only works for the current media query, so if you comma separate, it only affects the media query it is within. Also note that not reverses the logic for the entire media query as a whole, not individual parts of it. not x and y = not (x and y) ≠ (not x) and y

Exclusive

To ensure that only one media query is in effect at time, make the numbers (or whatever) such that that is possible. It may be easier to mentally manage them this way.

<pre><code>@media (max-width: 400px) {
 html { background: red; }
}
@media (min-width: 401px) and (max-width: 800px) {
 html { background: green; }
}
@media (min-width: 801px) {
 html { background: blue; }
}
</code></pre>

Logically this is a bit like a switch statement, only without a simple way to do "if none of these match do this" like default.

Overriding

There is nothing preventing more than one media query from being true at the same time. It may be more efficient to use this in some cases rather than making them all exclusive.

<pre><code>@media (min-width: 400px) {
 html { background: red; }
}
@media (min-width: 600px) {
 html { background: green; }
}
@media (min-width: 800px) {
 html { background: blue; }
}
</code></pre>

Media queries add no specificity to the selectors they contain, but source order still matters. The above will work because they are ordered correctly. Swap that order and at browser window widths above 800px the background would be red, perhaps inquisitively.

Mobile First

Your small screen styles are in your regular screen CSS and then as the screen gets larger you override what you need to. So, min-width media queries in general.

<pre><code>html { background: red; }

@media (min-width: 600px) {
 html { background: green; }
}
</code></pre>

Desktop First

Your large screen styles are in your regular screen CSS and then as the screen gets smaller you override what you need to. So, max-width media queries in general.

<pre><code>html { background: red; }

@media (max-width: 600px) {
 html { background: green; }
}
</code></pre>

You can be as complex as you want with this.

<pre><code>@media 
 only screen and (min-width: 100px),
 not all and (min-width: 100px),
 not print and (min-height: 100px),
 (color),
 (min-height: 100px) and (max-height: 1000px),
 handheld and (orientation: landscape)
{
 html { background: red; }
}
</code></pre>

Note the only keyword was intended to prevent non-media-query supporting browsers to not load the stylesheet or use the styles. Not sure how useful that ever was / still is.

<a href="https://developer.tizen.org/dev-guide/2.2.1/org.tizen.web.appprogramming/html/guide/w3c_guide/dom_guide/media_queries_priority.htm" rel="nofollow noreferrer">And for media queries priorites</a>

sources : <a href="https://stackoverflow.com/questions/10815651/why-is-my-css-media-query-being-ignored-or-overridden/10816111#10816111">one</a> <a href="http://css-tricks.com/logic-in-media-queries/" rel="nofollow noreferrer">two</a> <a href="http://css-tricks.com/css-media-queries/" rel="nofollow noreferrer">three</a> <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries" rel="nofollow noreferrer">four</a> <a href="http://www.w3.org/TR/css3-mediaqueries/" rel="nofollow noreferrer">five</a>

<pre><code>@media only screen and (min-width : 1824px) {}

@media only screen and (min-width : 1224px) {}
</code></pre>

I am using these mediaqueries and these are working fine but when I see my website at 1280px resolution, it does not work

responsive webdesign: Media Queries not working for other screens

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

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

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

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

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

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

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

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

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

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

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

@media only screen and (min-width : 1824px) {}@media only screen and (min-width : 1224px) {}我正在使用这些媒体库，它们工作得很好，但当我看到我的网站分辨率为1280px时，它就不工作了

问响应式网页设计:媒体查询不适用于其他屏幕
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问响应式网页设计:媒体查询不适用于其他屏幕EN