响应式不工作答案

【问题标题】：Responsive not working响应式不工作
【发布时间】：2016-03-18 03:39:23
【问题描述】：

我想创建一个我正在尝试使用 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>

谢谢

【问题讨论】：

标签： css web responsive-design media-queries

【解决方案1】：

样式标签始终放在“head”部分下，除非您使用“scoped”属性，您可以在其中定义主体本身的样式。

【讨论】：

不，有两个文件 css 单独的文件。只是我通过html和css分开文件的方式像内联样式一样发布
嗯...这很奇怪，它在我的浏览器上完美运行。
可能是我的浏览器问题？？我也用FF检查一下

【解决方案2】：

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

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

也许对你有帮助。

【讨论】：

【解决方案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;
    }
}

【讨论】：

【解决方案4】：

您当前的元标记：

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

我当前的工作元标记：

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

也许初始刻度的“0”结尾有问题。

【讨论】：