css - 页面缩小时不可见的 CSS 边框

Question

我正在一个网站上工作，我举了一个例子来说明我在这里遇到的问题

http://codepen.io/avovk/pen/pFkmb

这是一个 600 页的 div，左右两侧的两个紫色边框是通过在其各自两侧设置负位置来创建的。当我拖动浏览器窗口使页面宽度为 600 像素或更少时，左边框消失，但如果我向右滚动，右边框仍然可见。我希望这两个边框仅在页面为 600 像素或更宽时才可见，否则用户不应该通过向右滚动来看到右边框。有点像左边框消失的方式。

是的，边框必须是 Div，因为它们是我实际网站中的图像，我想在没有 javascript 的情况下执行此操作。

谢谢，亚历克斯

Answer 1

实现此目的的一种方法是使用CSS 媒体查询：

@media only screen and (max-width:600px) {
    #rightBorder, #leftBorder {
        display: none;
    }
}