媒体查询适用于移动设备但不适用于浏览器调整大小答案

【问题标题】：Media Queries Working on Mobile But Not on Browser Resize媒体查询适用于移动设备但不适用于浏览器调整大小
【发布时间】：2014-08-18 00:38:06
【问题描述】：

我在文档顶部使用以下代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1" /> 
    <link href="<?php bloginfo('template_url'); ?>/css/960-12-15-15-fluid.css" rel="stylesheet" type="text/css" />
    <link href="<?php bloginfo('template_url'); ?>/css/gsfest.css" rel="stylesheet" type="text/css" />
    <link href="<?php bloginfo('template_url'); ?>/css/gsfest-tablet-portrait.css" rel="stylesheet" type="text/css" media="screen and (max-width: 768px)" />
    <!--<link href="<?php bloginfo('template_url'); ?>/css/gsfest-smartphone-landscape.css" rel="stylesheet" type="text/css" media="screen and (max-width: 480px)" />-->
    <link href="<?php bloginfo('template_url'); ?>/css/gsfest-smartphone-portrait.css" rel="stylesheet" type="text/css" media="screen and (max-width: 320px)" />
</head>

在使用移动设备浏览时以及使用 FF 中的响应式设计视图时，响应式 CSS 加载良好，但是当我只是尝试在 FF 或 Chrome 中调整浏览器的大小时，它会与桌面布局保持一致。

有人知道为什么吗？我使用的是我一直使用的相同代码，并且过去没有遇到过这个问题，除非我忘记包含一些东西

【问题讨论】：

你也可以分享一些css吗？一个jsfiddle会更好。

标签： html css mobile responsive-design response

【解决方案1】：

很难从您发布的内容中讲述完整的故事，但您可以先将视口元标记调整为

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

另外，请记住标准级联规则仍然适用，因此，如果您在前两个样式表（960-12-15-15-fluid.css 和 gsfest.css）中设置了规则，则该规则将适用于不同的视口如果它有更高的specificity。

祝你好运

【讨论】：

谢谢，刚试了一下，好像没用。然后在查看了更多之后，我意识到它可以很好地加载平板电脑样式，但浏览器在调整大小时不会像 320px 那样窄！而且还没有为智能手机肖像设置样式表