移动媒体查询

Question

我有一个website，我需要在移动设备上工作，它显示如下图所示。在@media only screen标签之间再次

1. 复制680线CSS的同一文档中：

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

2. 相同的代码复制到一个mobile.css样式表，并重新开始

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

iPhone查看：

Answer 1

这将需要一些工作，但也是值得的。您必须采用移动设备上过大的CSS，并根据尺寸将其放入特定的媒体查询中。比方说，你希望你的标题，从80px变更为40PX当屏幕尺寸小于600px的：

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

Answer 2

在你的HTML

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