如何隱藏移動設備的div邊框？

Question

我在設計一個響應式網站，我無法隱藏右側邊框，該邊框將側邊欄的頁面內容側分開。邊框位於div標籤的右側，我想在屏幕縮小至手機尺寸時隱藏邊框。任何幫助將非常感激。

Answer 1

要獲得響應式移動網頁設計的最佳做法，最好的做法是使用所謂的媒體查詢：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries。我最喜歡的資源是這裏，由Shay Howe編寫：http://learn.shayhowe.com/advanced-html-css/responsive-web-design

這個想法是，你的CSS將「檢測」瀏覽器的大小，並根據特定尺寸的顯示器應用CSS規則。

要做到這一點，確保在HTML頭的標記，添加以下行：

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

然後你就可以使用媒體查詢「檢測」這樣的顯示屏的尺寸：

@media all and (max-width: 800px) { 
    .element { 
    border-right: none; 
    } 
} 

Answer 2

媒體查詢允許您根據屏幕大小，分辨率或類似情況更改樣式的屬性。

只需編寫媒體查詢並將其中的條件樣式放入其中即可。例如：

@media only screen and (max-width: 800px) { 
    .element { 
    border-right: none; 
    } 
} 

雖然這工作正常，但最好先移動移動設備。首先編寫CSS移動設備時，您的基本CSS適用於小型設備，而通過媒體查詢爲大屏幕添加規則。只需將媒體查詢中的max-width更改爲min-width，並在編寫CSS時使用反向邏輯。

以下是關於媒體查詢的兩篇文章，如果您需要更多信息：CSS-Tricks,MDN。