如何爲移動視口設置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，因爲學習比實現更容易。