0

我正在为当地的非营利组织设计欢迎页面。我正在尝试我的第一个响应式网站，所以它是一种大杂烩的代码。这是我为实现这一目标而遵循的教程的链接。我有一种预感，问题完全出在 CSS 内部。本教程让我包含一个 reset.css 文件来重置所有 HTML 样式。

我遇到的问题是1)图像和文本无法使用 @media 进行缩放，并且在 ios 上查看时图像似乎以各种尺寸重复。2)当我将所有 CSS 合并到一个外部样式表中时，@font-face 和 text 元素不起作用。3)在 Chrome 中查看时，h1 文本被截断。4)提交按钮默认为浏览器默认的较小尺寸。

这是网站：http ://www.dubuquedreamcenter.com/

非常感谢。我感谢任何帮助我更好地学习这一点。

4

2 回答 2

2

1) 图像和文本不会随@media 查询缩放

要缩放图像，请将它们放在<div>具有百分比宽度的容器中。然后设置max-width: 100%在图像上。

不幸的是，无法使用媒体查询来缩放文本。您必须font-size在每个断点处手动调整。

...在 ios 上查看时，图像似乎以各种尺寸重复

您在 HTML 中加载您的徽标，然后在较小的视口中加载为背景图像。在媒体查询中隐藏 HTML 版本：

@media (max-width: 783px) {
  #logo img {
    display: none;
  }
}

2) 当我将所有 CSS 合并到一个外部样式表中时，@font-face 和 text 元素不起作用

@font-face当我将规则添加到主样式表的顶部时，对我来说似乎工作正常。

3) 在 Chrome 中查看时 h1 文本被截断

在 Chrome 29 中，<h1>文本对我来说似乎很好。

4) 提交按钮默认为浏览器默认的较小尺寸。

我也没有看到，但很可能您没有在所有媒体查询中设置自定义按钮样式。

于 2013-09-01T22:24:43.413 回答
2

除了来自cantera25的建议外，在您的页面顶部，您还有： 

...  
<title>Dubuque Dream Center</title>  
<link rel="stylesheet" type="text/css" href="scripts/ddc_styles2.css">  
<link rel="stylesheet" type="text/css" href="scripts/reset.css">  
....

从颠倒这个顺序开始，你总是首先调用 reset.css 脚本。

一旦你这样做了，就没有理由不能将页面头部的 CSS 样式放入 ddc_styles2.css

于 2013-09-01T22:32:12.030 回答