LoginSignup
4

More than 5 years have passed since last update.

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

Last updated at Posted at 2016-07-25

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4