Question

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

<!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中调整浏览器大小时，它会坚持使用桌面布局。

有谁知道为什么？我使用的是我一直使用的相同代码，过去没有遇到过这个问题，除非有一些我忘记包含的内容

Answer 1

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

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

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

祝你好运

在移动设备上工作的媒体查询但不在浏览器调整大小上

1 个答案: