如何隐藏移动设备的 div 边框？答案

【问题标题】：How do you hide a div border for mobile divices?如何隐藏移动设备的 div 边框？
【发布时间】：2013-10-11 18:33:41
【问题描述】：

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

【问题讨论】：

【解决方案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;
  }
}

【讨论】：

【解决方案2】：

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

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

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

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

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

【讨论】：