css @media screen 不能完全工作

Posted 2023-03-06

【中文标题】css @media screen 不能完全工作

【英文标题】：css @media screen does not work fully

【发布时间】：2013-10-29 00:40:26

【问题描述】：

我在我的 CSS 文档中添加了一个 @media 屏幕。我认为我会直接复制粘贴第一个屏幕尺寸的 CSS，并调整元素以使其在较小的屏幕上调整。我这样做并改变了一个元素，h1。当我去查看我的站点时，h1 是样式表中唯一出现的项目。我复制的其他项目都不能在小尺寸屏幕上工作。为什么？如果所有项目都不起作用，我会认为@media screen 和 (max-width:599px) 代码行是错误的，但它有四分之一的时间起作用，所以我真的很茫然。为什么其余的 CSS 不起作用？谢谢。

@media screen and (min-width:600px)
    body
        background-image: url('leavesBackground.jpg');
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: bottom;
        position:relative;
        margin-left: 0px;
    

    h1
        text-align:left;
        font-family:Georgia,"Times New Roman", Serif;
        font-size:3em;
        margin-left: 0px;
    

    h2
        margin-left: 0px;
        width:40%;
        height:250px;
        overflow-x:scroll; 
        overflow-y:hidden;
        border-style:solid;
        border-width:1px;
    

    p
        text-align:left;
        font-family:Arial,Helvetica, Sans-Serif;
        font-size:.9em;
        margin-left: 10px;
        width:60%;
    







@media screen and (max-width:599px) 
body    position:relative;
margin-left: 0px;


h1  text-align:left;
font-family:Georgia,"Times New Roman", Serif;
font-size:2em;
margin-left: 0px;


h2  margin-left: 0px;
width:40%;
height:250px;
overflow-x:scroll; 
overflow-y:hidden;
border-style:solid;
border-width:1px;


p   text-align:left;
font-family:Arial,Helvetica, Sans-Serif;
font-size:.9em;
margin-left: 10px;
width:60%;

【问题讨论】：

检查（除其他外）条件“min-width:600px”是否与“max-width:599px”相反......也许行为不是预期的“IF .. ELSE ..”。

【参考方案1】：

尝试使用限定词“仅”

@media only screen and (min-width:600px) 

@media only screen and (max-width:599px) 

这是直接来自 W3C 的引用来解释这一点。

The keyword ‘only’ 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.

参考这篇文章：What is the difference between "screen" and "only screen" in media queries?

【讨论】：

哇。那行得通。谢谢你。有没有解释让我能理解？或者这是我应该知道并记住的基本内容，就像 p 是段落一样？

很高兴听到。如果这是一个足够的解决方案，您介意对此答案进行投票并选中赞成/反对票下方的复选框吗？

我试过了，但显然我在这个网站上的时间还不够多，无法投票。