Question

我是使用Dreamweaver CS6的相对较新的网页设计师。我知道最好在实际浏览器中预览页面，Dreamweaver的设计和实时视图只是实际代码的近似值。我通常在IE 11和Chrome中预览我的页面。

我的网页在设计视图中看起来像我希望的那样，但在实时视图或浏览器中却看不到。

在这种情况下，我想要＆＃34;学术书评和＆＃34;在Courier New中显示，它在设计视图中显示。但是，在实时视图和Chrome本身＆＃34;学术书评和＆＃34;尽管在Courier New中显示了h1 CSS命令，但仍然是Times New Roman。

我认为DW和Chrome之间的这种不匹配导致我在许多其他领域出现了一些问题。我附上代码和截图。

我桌面上的全屏是1920x1200。我正在尝试从240px开始构建响应式页面，并在常见分辨率下使用断点进行构建。

这可能是我忽视的小事。

top是索引文件中的html。底部是styles.css文件中的CSS。

我还在DW中添加了它的外观图像。

谢谢。

<!doctype html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Rogers Reviews: Academic Book Reviews</title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>

<body>
    <div ID="wrapper">
        <header="main_header">
            <img src="_images/RR_logo_phone.png" alt="Rogers Reviews logo">
        </header>
        <h1>Academic Book Reviews</h1>    
    </div>
</body>
</html>

   @media screen and (max-width:320px) {
    #wrapper {
        width: 100%;
        margin: auto;
    }
    h1 {
        font-family: "Courier New", Courier, monospace;
    }
}

@media screen and (min-width:321px) and (max-width:728px) {
}

@media screen and (min-width:729px) and (max-width:1920px) {
}

以下是图片的链接：

http://imgur.com/DhEXfdg

和DW：

http://i.imgur.com/B6594As.jpg

Answer 1

将h1标记放在您的媒体查询之外，除非您希望它仅在最大屏幕宽度为320px时更改:)

 h1 {
            font-family: "Courier New", Courier, monospace;
        }

@media screen and (max-width:320px) {
    #wrapper {
        width: 100%;
        margin: auto;
    }

}

@media screen and (min-width:321px) and (max-width:728px) {
}

@media screen and (min-width:729px) and (max-width:1920px) {
}

Answer 2

我已经通过将DW的文件关联从文档根目录切换到站点根目录来解决问题。

每个人建议的更改现在都在Chrome中生效。

感谢大家的帮助和对新手的热情款待（有些人可能会有些讽刺:)）。

页面在Dreamweaver CS6与Chrome 43.0.2357.124 m中的显示方式不同

2 个答案: