css - ページ縮小時に見えない CSS ボーダー

Question

私はウェブサイトに取り組んでおり、ここで私が抱えている問題の例を作りました

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

これは 600 ページの div で、左側と右側にある 2 つの紫色の境界線は、それぞれの側に負の位置を設定することによって作成されます。ブラウザー ウィンドウをドラッグしてページの幅を 600 ピクセル以下にすると、左の境界線が消えますが、右にスクロールすると、右の境界線がまだ表示されます。ページが 600 ピクセル以上の場合にのみ 2 つの境界線が表示されるようにしたいと考えています。左の境界線が消えるようなものです。

はい、境界線は実際の Web サイトの画像であり、javascript を使用せずにこれを行いたいため、Divs である必要があります。

ありがとう、アレックス

Answer 1

これを実現する 1 つの方法は、CSS メディア クエリを使用することです。

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