响应不工作

Question

我想制作一个我尝试使用 html 和 css 的网站。但问题是如何制作 响应式网站 。当我尝试永远不会得到像响应这样的任何输出。在这里我已经尝试过了，但我仍然没有得到正确的响应站点。

    <head>
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <style>
        @media only screen and (min-device-width : 768px) and (max-device-width :1024px) 
        {
            #wrapper
            {
                background-color:#000;
            }
        }
    </style>

谢谢

Answer 1

样式标签始终放在 "head" 部分下，除非您使用 "scoped" 属性，您可以在正文中定义样式。

Answer 2

您可以使用以下规则进行响应式 css 设计：-

@media (min-width: 768px) and (max-width: 1024px) {
    // Add your css here
    #wrapper
    {
         background-color:#000;
    }
}

可能对你有帮助。

Answer 3

试试这个：

<style>
        @media only screen and (min-device-width : 768px) and (max-device-width :1024px) 
        {
            #wrapper
            {
                background-color:#000!important;
            }
        }
    </style>

或者，这个：

@media (min-width: 768px) and (max-width: 1024px) {
    // Add your css here
    #wrapper
    {
         background-color:#000!important;
    }
}

Answer 4

您当前的元标记：

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

我当前的工作元标记：

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

也许初始比例的“0”端出现问题。

响应不工作

Responsive not working

css

media-queries

responsive-design

web