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

试试这个：

<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 2

样式标记始终位于“head”部分下，除非您使用“scoped”属性，其中您可以在正文中定义样式。

Answer 3

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

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

它可能对你有帮助。

Answer 4

您当前的元标记：

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

我当前的工作元标记：

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

也许＆＃34; 0＆＃34;初始规模的结束正在出现问题。

响应不起作用

4 个答案: