如何使一個網頁移動友好與CSS媒體查詢

我增加了一些CSS媒體查詢，但它似乎並沒有做任何改變，我的意思是我加入這個代碼如何使一個網頁移動友好與CSS媒體查詢

@media screen and (min-width:10px) and (max-width:640px) { 
.leftSideBar{display:none !important;} 
.rightSideBar{display:none !important;} 
}

，但左邊和右側邊欄仍然可見我也試着改變最小寬度和最大寬度的範圍它仍然沒有任何區別，我在這裏丟失了什麼？我是否必須在CSS中添加更多內容才能使其工作？

下面給出的是兩個類

.leftSideBar{display:block !important;} 
.rightSideBar{display:block !important;}

來源

2015-06-28 tina

是否設置視？ https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag – ne1410s

是的，我有這一個權利「」 – tina

https：// jsfiddle.net/dm4eryfz/我已經試過你的代碼，它的工作正常。你通過在小提琴中調整窗口大小來檢查。爲了進一步調試問題，可以請您分享HTML還是完整的CSS？ – gauravmuk

我的建議是，以測試在真實手機的代碼不使用瀏覽器，如果這就是你在做什麼原因的瀏覽器不同的表現

你必須做的另一個重要的事情是加元視口標籤，而不在於它不會從您的默認CSS使用CSS的特異性，而不是工作是否像下面

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

給出的刪除！重要的它真的有必要讓你的默認CSS應該是

.leftSideBar{display:block;} 
.rightSideBar{display:block;}

如果即使這不起作用，你必須告訴我們你的整個CSS或HTML來識別問題

來源

2015-06-30 15:56:06

一切都在你的代碼看起來不錯我的默認CSS。嘗試使用此元在你的HTML：

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

而且，如果我可以給你一個小建議，嘗試移動第一種方式。它看起來像這樣：

.leftSideBar{display:none !important;} 
.rightSideBar{display:none !important;} 

@media screen and (min-width:640px) { 
    /*design for screen-width >= 640px */ 
}

這使移動設備上的一個優先級，這樣的計算機將爲了對它們相當比電腦不太強大的移動設備執行更少的代碼被設置爲例外;）這裏是一個很好的教程在移動第一種方法： http://www.html5rocks.com/en/mobile/responsivedesign/

祝你好運，並給你的HTML和完整的CSS，如果它仍然不工作。

來源

2015-06-28 07:47:08 Gunthari

min-width和!important可能是無用的。查詢很好，但可能會縮短爲：

@media screen and (max-width:640px) { 
.leftSideBar, .rightSideBar {display:none} 
}

應以任一方式工作。你確定這個html很好嗎？你也可以在這裏顯示。

來源

2015-06-30 16:23:28

此代碼是最好的移動友好的響應式網站：

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

來源

2015-10-14 04:43:03 abhishek

如何使一個網頁移動友好與CSS媒體查詢

回答

相關問題