Edited at

Material Design Liteのブレイクポイント

More than 3 years have passed since last update.

Bootstrapの記事はたくさんあるのにMaterial Design Liteは紹介されているばっかりで実装に関する情報が全然ないです。

Material Design LiteはMindBEMdingと言う命名規則に則って書かれている。個人的にはBootstrapのOOCSSより使いやすい。

コンポーネントが少なくゴリゴリ書かなければいけない系のフレームワークなので、まず最初にブレイクポイントぐらい知っておきたいですよね。

/* =================================

Media Queries
================================== */

@media (max-width: 479px) {
.demo:before { content: "phone";}
}

/* ---------------------------------
phone
---------------------------------- */

@media (max-width: 479px) {
.demo:before { content: "phone";}
}

/* ---------------------------------
tablet
---------------------------------- */

@media (max-width: 839px) {
.demo:before { content: "tablet 以下";}
}
@media (min-width: 480px) and (max-width: 839px) {
.demo:before { content: "tablet";}
}
@media (min-width: 480px){
.demo:before { content: "tablet 以上";}
}

/* ---------------------------------
desktop
---------------------------------- */

@media (min-width: 840px) {
.demo:before { content: "desktop";}
}

/* ---------------------------------
desktop large
---------------------------------- */

@media screen and (min-width: 1025px) {
.demo:before { content: "desktop large";}
}

こんな感じです。普通ですね。

Material Design Liteを使う前に知ってほしいことはフォーム回りが貧弱だということです。

詳しくはコンポーネントを見てください。