您是否需要@media查詢的引導工作

Question

您好我嘗試使用媒體查詢，一切似乎確定，我實際上從另一個線程複製它在這裏堆棧溢出標記好，但是當我查看'響應式佈局' Firefox中的網頁開發面板（我嘗試過的每個屏幕大小），我看不到任何更改！

有人說過把祖先元素添加到css中。誰能幫我這個？

Answer 1

@media屏幕（最大寬度：767px）{} @media 屏幕（最小寬度：768px）{}

您不必重複這每一次。只需將這些媒體查詢中的所有內容進

-webkit- -moz- -ms- Etc..to使在不同瀏覽器的工作。

Answer 2

這全是關於specificity和cascading/inheritance。

如果你把你的file.CSS放在bootstrap.CSS之後並且使用相同的選擇器作爲引導使用，那就不用擔心了，你很好走，因爲級聯效果會照顧你。 這是推薦的事情要做。您也可以使用更具體的選擇器來覆蓋它。

如果你沒有把你的file.CSS放在bootstrap之後，比你的總是需要更具體的那麼bootstrap.CSS的選擇器。 不是一件好事。

你可以計算出你選擇的特異性here

Answer 3

嘗試在你的HTML代碼

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

Answer 4

頭不需要引導的@media查詢工作將這個元標記。你必須在你的html文檔的頭部有meta標籤。

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

一個<meta>視元素對如何控制網頁的尺寸和縮放瀏覽器的說明。

width=device-width部分設置頁面的寬度以跟隨設備的屏幕寬度（根據設備的不同而不同）。

initial-scale=1.0部分設置瀏覽器首次加載頁面時的初始縮放級別。