Question

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

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

以下是网站：http://www.dubuquedreamcenter.com/

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

Answer 1

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）“提交”按钮默认为较小尺寸的浏览器默认值。

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

Answer 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中

使用@media查询时，CSS图像和文本不会缩放

2 个答案: