html - 移动媒体查询

Question

我有一个网站，我需要在移动设备上工作，目前它显示如下图所示。

到目前为止，我有以下想法：

1. @media only screen在标签之间的同一文档中再次复制 680 行 CSS 。
2. 将相同的代码复制到 mobile.css 样式表中并重新开始

“2”是我最不喜欢的选项，但最有可能我只是想知道你的选择是什么？

iPhone 视图：

Answer 1

把它放在你的 HTML 的头部

    <meta name='viewport' content='width=device-width, initial-scale=1 />

Answer 2

这将需要一些工作，但值得。您必须采用在移动设备上太大的 CSS，并根据大小将它们放入特定的媒体查询中。假设您希望在屏幕尺寸小于 600 像素时将标题从 80 像素更改为 40 像素：

@media screen and (max-width: 1000px) {
.mytitle {
   font-size: 80px;
   }
}
@media screen and (max-width: 600px) {
.mytitle {
   font-size: 40px;
   }
}