Question

当我尝试为浏览器和移动设备创建布局时，除了其中一种css样式外，它都会破坏。我之前只使用了最小/最大宽度（浏览器大小为3种样式），但由于设置未在视网膜显示移动设备上拾取，因此它没有我想象的那么有用。我添加了min / max-device-width来解决iphone，但我不再能在浏览器中获得备用格式。如果我尝试添加浏览器窗口的设置，则仅显示最大的CSS，而其他CSS未格式化（包括在iphone上）。我留下了代码，以便可以复制和粘贴它以进行测试 - 以防万一：）

第一次尝试修复：带逗号的语法 @media和（min-device-width：800px），和（最小宽度：800px）{

但我认为使用不正确。

第二次尝试修复：我复制了这个样式并尝试将其粘贴到单独的媒体查询中，即。最小宽度：600px {样式，样式，样式} min-device-width：600px {相同样式，样式，样式}

第三次尝试修复：我尝试了一些不同的“风格”的媒体查询（@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>

Answer 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;
    }
}

至于出了什么问题，你有一些额外的and，你不需要同时定位设备的宽度和宽度。

使用min / max-width和min / max-device宽度无法使多个媒体查询工作

1 个答案: