页面缩小时CSS边框不可见

Question

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

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

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

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

谢谢， 亚历

Answer 1

实现此目标的一种方法是使用CSS media queries：

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