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

<!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中调整浏览器的大小时,它仍然保持桌面布局。

有人知道为什么吗?我使用的是我一直使用的相同代码,过去从未遇到过此问题,除非我忘了包含一些内容

最佳答案

从您发布的内容中很难说出完整的故事,但是您可以先将视口meta标签调整为

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


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

祝好运

10-06 04:44