移动媒体查询

Question

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

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

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，并根据大小将它们放入特定的媒体查询中。假设您希望在屏幕尺寸小于600px时，您的标题从80px更改为40px：

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