html - How do you hide a div border for mobile divices?

Question

I'm designing a responsive website and I'm having trouble hiding a right border that divides the content side of a page from the sidebar. The border is on the right site of a div tag and I want to hide the border when the screen shrinks down to a mobile size. Any help would be much appreciated.

Answer 1

媒体查询允许您根据屏幕大小、分辨率或类似内容更改样式的属性。

只需编写一个媒体查询并将您的条件样式放入其中。例如：

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

虽然这很好用，但首先使用移动设备通常是一个更好的主意。首先编写 CSS mobile 时，您的基本 CSS 是针对小型设备的，而您通过媒体查询为更大的屏幕添加规则。只需max-width将媒体查询中的 更改为min-width并在编写 CSS 时使用反向逻辑即可。

如果您需要更多信息，这里有两篇关于媒体查询的文章：CSS-Tricks，MDN。

Answer 2

对于响应式移动网页设计的最佳实践，最好的方法是使用所谓的媒体查询：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;
  }
}