Question

好的，我完全不知所措。我已经在互联网上搜寻了一种解决方案，似乎唯一为人们服务的解决方案是此meta标签：

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

问题是，我已经在所有页面的标题中添加了它。媒体查询在我的index.php页面上工作得很好，但是当我为其他页面设置样式时，除了移动设备之外，其他所有功能都可以工作。也就是说，平板电脑和台式机样式就可以了。我有标准

/*----Mobile Styling----*/

@media only screen and (min-width: 768px) {

/*----Tablet Styling----*/

}

@media only screen and (min-width: 1000px) {

/*----Desktop Styling----*/

}

我完全不知所措，所有括号都闭合了，CSS看起来还不错。还有什么可能吗？

Answer 1

这取决于您在智能手机上使用哪种浏览器。如果您使用only，它将阻止所有旧版浏览器访问智能手机。因此，在这种情况下，请尝试使用：

@media (min-width: 768px) {

/*----Tablet Styling----*/

}

@media (min-width: 1000px) {

/*----Desktop Styling----*/

}

Answer 2

这样编写您的媒体查询。并将媒体查询放在主要CSS的末尾。
例如。如果您的台式机字体为14px，移动版字体为10px。比您在CSS中写14px时要高，在移动设备的媒体查询中要写10px。排序不匹配可能是代码中的问题。

@media(min-width:320px) and (max-width:479px) {
//Mobile Portrait
}

@media(min-width:480px) and (max-width:767px) {
//Mobile Landscape
}

@media(min-width:768px) and (max-width:991px) {
//Tablet Portrait
}

@media(min-width:992px) and (max-width:1199px) {
//Tablet Landscape
}

@media(min-width:1200px) and (max-width:1600px) {
//Desktop and bigger devices
}

移动媒体查询不起作用

2 个答案: