在 CSS 中使用@media 进行响应式设计

Question

我试图让我的网站响应，但它不起作用。使用@media，我想定义不同的区域，但使用我的代码没有任何机会。

    @media (max-width: 1400px) {
    #football {
        left: 70%;
        top: 0%;
    }
    
    #skiing {
        left: 70%;
        top: 30%;
    }
    
    #volleyball {
        left: 70%;
        top: 60%;
    }
    
}

有什么问题吗？

Answer 1

确保您已将元标记嵌入 <head>:

html:

<meta name="viewport" content="width= device-width, initial-scale= 1.0">

css:

@media all and (max-width: 1400px){

/* your code */

}

Answer 2

尝试定义类型

@media all and (max-width: 1400px){
     your code
}

并确保在 head 标签中添加元标签

<meta name="viewport" content="width= device-width, initial-scale= 1.0">

Answer 3

确保将媒体查询放在代码的 end 处。也不要忘记将此元标记添加到 html 文件中的头部元素。

<meta name="viewport" content="width= device-width, initial-scale= 1.0">

顺便说一下，尝试像这样编辑查询：

@media only screen and (max-width: 1400px) {
    #football {
        left: 70%;
        top: 0%;
    }
    
    #skiing {
        left: 70%;
        top: 30%;
    }
    
    #volleyball {
        left: 70%;
        top: 60%;
    }
    
}

在 CSS 中使用@media 进行响应式设计

Responsive Design with @media in CSS

html

css

sass

responsive-design