CSS图像和文本赢得'；t使用@media查询进行缩放_Css_Html_Responsive Design

CSS图像和文本赢得'；t使用@media查询进行缩放

css html responsive-design

CSS图像和文本赢得'；t使用@media查询进行缩放,css,html,responsive-design,Css,Html,Responsive Design,我正在为当地一家非营利机构设计欢迎页面。我正在尝试我的第一个响应性网站，所以它有点像一个大杂烩。以下是我为实现这一目标而遵循的教程。我有一种预感，这个问题完全在CSS内部。本教程要求我包括一个reset.css文件来重置所有HTML样式我遇到的问题是，1）图像和文本无法使用@media进行缩放，在ios上查看时，图像似乎以各种大小重复2）当我将所有CSS组合到一个外部样式表中时，@font-face和text元素不起作用3）在Chrome中查看时，h1文本将被切断4）提交按钮默认为较小尺寸的浏

我正在为当地一家非营利机构设计欢迎页面。我正在尝试我的第一个响应性网站，所以它有点像一个大杂烩。以下是我为实现这一目标而遵循的教程。我有一种预感，这个问题完全在CSS内部。本教程要求我包括一个reset.css文件来重置所有HTML样式

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

以下是网站：

非常感谢。我感谢任何能帮助我更好地了解这一点的帮助。

1）图像和文本不能与@media查询一起缩放

要缩放图像，请将它们以一定的宽度放入容器

。然后在图像上设置

最大宽度：100%

不幸的是，无法通过媒体查询缩放文本。您必须在每个断点手动调整

字体大小

…在ios上查看时，图像似乎以各种大小复制

您将在HTML中加载徽标，但也可以在较小的视口中作为背景图像。在媒体查询中隐藏HTML版本：

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

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

当我将

@font-face

规则添加到主样式表的顶部时，似乎对我来说效果不错

3）在Chrome中查看时，h1文本将被截断

在Chrome 29中，

文本对我来说很好

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

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