当我尝试为浏览器和移动设备创建布局时，它破坏了除一种 css 样式之外的所有样式。我以前让它只适用于最小/最大宽度(浏览器大小的 3 种样式)，但由于在视网膜显示移动设备上没有选择该设置，所以它没有我想象的那么有用。我添加了 min/max-device-width 来解决 iphone 但我无法再在浏览器中获得替代格式。如果我尝试为浏览器窗口添加设置，则只会显示最大的 CSS，而其他的则未格式化(包括在 iPhone 上)。我留下了代码，以便可以复制和粘贴它进行测试 - 以防万一:)
第一次尝试修复: 带逗号的语法 @media 和(最小设备宽度:800px)， 和(最小宽度:800 像素){
但我认为这样使用是不正确的。
第二次尝试修复: 我复制了样式并尝试将其粘贴到单独的媒体查询中，即。最小宽度:600px {style, style, style} min-device-width: 600px{same style, style, style}
第三次修复尝试: 我尝试了几种不同的媒体查询“样式”(@media all ... @ media screen)，但没有任何效果。
larges 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>
最佳答案
这里 ( 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;
}
}
至于哪里出了问题，您有一些额外的 和 并且您不需要同时定位设备宽度和宽度。
关于html - 使用最小/最大宽度和最小/最大设备宽度无法使多个媒体查询工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20040004/