當屏幕尺寸很小時，媒體查詢的css無法正常工作

-1

我使用Swiper創建了一個響應式網站。我在我的CSS中使用了@media查詢來適應不同的屏幕大小和方向。當屏幕尺寸很小時，媒體查詢的css無法正常工作

最初，我有1個主要的CSS，1個景觀CSS和1個垂直CSS。我將兩個方向css導入主css。只有主要的CSS是在HTML文件。該網站適用於所有屏幕尺寸。關於媒體的CSS代碼段是如下：

@media screen and (orientation:landscape) and (min-width:700px) { 

    @media screen and (orientation:landscape) and (min-aspect-ratio:16/10) { 

    @media screen and (orientation:portrait)

然後我讀關於不使用對CSS的進口，所以我cat所有的CSS成一個文件。我也刪除了兩條線@import。然後該網站無法正常工作。具體來說，小屏幕上的所有元素都會恢復到正常大小。我檢查了css結構：這些元素在@media {}中丟失了它們的樣式，因此它們的父css固有。

所有代碼的小提琴是here。它不工作，因爲它假設抓住本地圖像文件。

單獨的css文件的工作網站是this。它在Github上，所以你可以很容易地看到源文件。

我真的很新的CSS所以這可能是由於一個愚蠢的錯誤..

來源

2017-10-12 CrazyFrog

這是小提琴輸出，} //]]> 這不是CSS相關 – Tomm

我沒看到從我的結尾輸出。我只是看到一個帶有導航箭頭和Swiper分頁的空白屏幕。我相信這是與css相關的，因爲我必須要做的就是從一體化的css文件切換到單獨的文件。 – CrazyFrog

這是我的愚蠢。我錯過了'@ media'組件之一的'}'。所以當把後者的css合併在一起時就成了越野車。 – CrazyFrog

使用這些媒體屏幕平板電腦和手機，如果你不導入希望這將有助於謝謝的你的小提琴旁邊顯示此之上} //]]>我不知道爲什麼會被JS問題或身體的一些文字

@media only screen and (max-width: 1024px){} 
@media only screen and (max-width: 768px){} 
@media only screen and (max-width: 767px){}

來源

2017-10-12 07:08:02

爲什麼兩個'max-width：'在768px和767px？ – cjmling

您還應該添加'min-width'，因爲，例如，在1440px的屏幕寬度上，所有3個規則集都將被應用。 – Styx

這是我的愚蠢。我錯過了一個'}'來關閉我的一個'@ media'標籤。它現在工作正常。感謝您的幫助。 – CrazyFrog

當屏幕尺寸很小時，媒體查詢的css無法正常工作

回答

相關問題