使用 min/max-width 和 min/max-device width 让多个媒体查询工作时遇到问题
Posted
技术标签:
【中文标题】使用 min/max-width 和 min/max-device width 让多个媒体查询工作时遇到问题【英文标题】：Having trouble getting multiple media queries to work using min/max-width and min/max-device width 【发布时间】：2013-12-01 03:27:08 【问题描述】：当我尝试为浏览器和移动设备创建布局时，它会破坏除一种 CSS 样式之外的所有样式。我之前让它只适用于最小/最大宽度（浏览器大小的 3 种样式），但由于该设置没有在视网膜显示移动设备上使用，它并没有我想象的那么有用。我添加了 min/max-device-width 来解决 iphone 但我不再可以在浏览器中获得替代格式。如果我尝试为浏览器窗口添加设置，则只会显示最大的 CSS，而其他的则未格式化（包括在 iphone 上）。我留下了代码，以便可以复制和粘贴以进行测试 - 以防万一:)
第一次尝试修复： 带逗号的语法 @媒体和（最小设备宽度：800px）， 和（最小宽度：800px）
但我认为这样使用是不正确的。
第二次尝试修复： 我复制了样式并尝试将其粘贴到单独的媒体查询中，即。 min-width: 600px style, style, style min-device-width: 600pxsame style, style, style
第三次尝试修复： 我尝试了几种不同的媒体查询“样式”（@media all ... @media screen），但没有任何效果。
只有在顺序从小到大的情况下，大的 css 才会起作用。相反，它们都不起作用。如果正常工作，文本将从绿色（最大）、红色（中等）、橙色（小）变化。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
/*START LARGE*/
@media and(max-width: 499px)
(max-device-width: 499px)
html width:100%; height: 100%;
p color: orange;
@media and(min-width: 500px)
and (min-device-width: 500px)
and (max-width: 799px)
and (max-device-width: 799px)
html width:100%; height: 100%;
p color: red;
/*MEDIUM ENDS*/
@media(min-device-width: 800px)
and (min-width: 800px)
html width:100%; height: 100%;
p color: green;
</style>
<!--unique to this page-->
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</body>
</html>
【问题讨论】：
我有点紧张，我不会正确地问这个问题。我没有沉浸在开发世界中，所以我不确定我是否足够简洁。这个问题我已经有几个月的时间了，我试着问我遇到的任何对代码有任何了解的人（我真的很想解决它）。 【参考方案1】：这里 (demo) 是您的 CSS 的清理版本（您应该在媒体查询之外定义一组基本规则（我喜欢从最小的表示开始）
html
width:100%;
height: 100%;
p
color: orange;
@media (min-width: 500px) and (max-width: 799px)
p
color: red;
@media(min-width: 800px)
p
color: green;
至于哪里出了问题，你有一些额外的ands，你不需要同时定位设备宽度和宽度。
【讨论】：
好吧，我看不到发送屏幕截图的方法。如果您在视网膜显示设备上加载样式表，那么它会将其记录为超过 800 像素。这就是我的全部问题。我想设置设备和浏览器。我感谢有关语法的反馈。我可能会要求一些不可能的事情 我不知道如何编辑示例。我问的问题是由视网膜显示设备和媒体查询问题引起的。您需要包含一个在头部设置视口的元标记： 该标记解决了我遇到的问题。跨度>以上是关于使用 min/max-width 和 min/max-device width 让多个媒体查询工作时遇到问题的主要内容，如果未能解决你的问题，请参考以下文章
css的min-width,max-width,max-height,min-height在啥情况下有效