Yさん

• max-width:○○px=最大の大きさは○○pxまで
• min-width:○○px=最小の大きさは○○pxまで

という意味です。

• maxが最大値
• minが最小値

ですね

横から失礼します。

例えば次のように記述した場合、768pxの時だけどちらも適用され上下にボーダーが出ます。

@media screen and (max-width: 768px) {
    div {
        border-top:1px solid #000;
    }
}
@media screen and (min-width: 768px) {
    div {
        border-bottom:1px solid #000;
    }
}

理由があって設定されているかもしれないのでわかりませんが、768pxを区切りとするならば(min-width: 769px)が好ましいのではないか？という疑問があって質問されたのかなと思います。

草むらさんありがとうございます。

まさにそのとおりです。

どうやら、僕がコードを書いていないものは、そのようになっているようです。
min-width: 768pxになっているものは、カエレバのスタイルジェネレーターからそのまま貼り付け後、修正したので、そのようになっていたようです（その他は別作者のスキン）。

min-width: 769pxに変更しておきました。

https://github.com/yhira/cocoon
最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。

ただ、たとえmax-width: 768pxとmin-width: 768pxが混在していたとしても、同一要素に対してスタイリングしていなければ基本的に問題ないと思います。今回のカエレバのケースもこのケースです。

以下のように、同一の要素にスタイリングされていると、後から書き込んだものが優先されちょっと紛らわしいです。

@media screen and (max-width: 768px) {
    .aaa {
        background-color: red;
    }
}
@media screen and (min-width: 768px) {
    .aaa {
        background-color: blue;
    }
} 

けれど以下のようになっていると、スタイリングは重複しません（今回のケース）。

@media screen and (max-width: 768px) {
    .aaa {
        background-color: red;
    }
}
@media screen and (min-width: 768px) {
    .bbb {
        background-color: blue;
    }
}