Question

我必须创建一个特定的CSS文件，以便将旧网站转变为响应式设计兼容性。问题是，即使新样式适用于桌面浏览器（缩小窗口大小），它似乎也不会加载到智能手机上。

我使用了这样的@media查询：

@media all and (max-width: 900px)
    {
     /* CSS */
    }

还尝试了不同的变化和大小，但没有成功。

@media all and (max-device-width: 900px)
{
    /* CSS */
}

由于这是一个奇怪编码的旧网站，某处可能存在不兼容性，但我不明白为什么它无论如何都会在桌面上运行。当然，我试图清空缓存，但都没有成功。

以下是网站：http://www.antiquaire-du-vitrail.com/

知道问题可能是什么？

Answer 1

问题解决了！我刚忘了标题中的VIEWPORT META。感谢您的快速回复。

Answer 2

你应该尝试：

@media screen and (max-width: 900px)
{
    /* CSS */
}

Answer 3

试试这个：

@media only screen and (max-width: 900px)  { 
/*put your styles here*/ 
}

在样式表中应用后按CTRL + SHIFT + R（删除浏览器的缓存）

Answer 4

您的<meta>部分中是否有<head>标记？

<meta name="viewport" content="width=device-width, initial-scale=1 , maximum-scale=1.0, user-scalable=no">

其次我也会使用@duy nguyen解决方案：

@media screen and (max-width: 900px)
{
 /* CSS */
}

Answer 5

您可以在html上添加元标记内部标题

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />

根据需要使用媒体查询。

例如：

@media screen and (max-width: 1024px) {
    /*your css doce here...*/
}

/*or*/
@media screen and (min-width: 1024px) {
    /*your css doce here...*/
}

您可以根据需要添加min-height，max-height

自适应CSS不适用于智能手机

5 个答案: