你如何隐藏移动设备的div边界？

Question

我正在设计一个响应式网站，但我无法隐藏一个右侧边框，该边框将页面的内容侧与侧边栏分开。边框位于div标签的右侧，我想在屏幕缩小到移动尺寸时隐藏边框。任何帮助将不胜感激。

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;
  }
}