如何为移动视口设置CSS文件中的HTML元素样式

Question

我真的不明白提出这个问题的正确方法，如果我导致混淆，请提前抱歉。

我需要在CSS页面上为移动视口设置HTML元素的样式，然后在移动样式开始的位置添加注释。从我从书中收集的内容来看，设计元素的方式只是将固定大小改为相对大小，但问题的第二部分让我相信我需要为每个元素设置一组全新的样式，那么我将如何一种风格适合我的正常视角，然后是移动视口的主要新风格？

对不起，再次为可怕的措辞，我没有要求任何编码，只是一些方向。

Answer 1

使用媒体查询！ Here is the MDN page on them

例如，这将使所有h1的红，如果视口小于600px

@media screen and (max-width: 600px) { 
    h1 { 
     color: red; 
    } 
} 

Answer 2

如果我理解正确的话，你想创建一个网页，这也是移动友好。

Twitter Bootstrap是实现这一目标的最流行的框架，几乎用于每个新的Web应用程序。

我建议看一些Bootstrap tutorials就可以了。 Derek Banas有非常好的介绍性教程，向您展示不同的语言/框架如何相互作用。

我不会推荐他深入了解关于他的视频主题的所有进出的内容，但他在展示视频的特定主题非常出色时非常出色。

Answer 3

你的问题不太清楚。

考虑在CSS中使用媒体查询以使用您的视口。

参见：https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

也许你喜欢用一些CSS框架来帮助你，就像Bootstrap欧Materialize。

我推荐Bootstrap，因为学习比实现更容易。