CSS
CSS3

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

More than 1 year has 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を使う前に知ってほしいことはフォーム回りが貧弱だということです。
詳しくはコンポーネントを見てください。