CSS MediaQuery小记

media type

all 所有装置 (此为默认值，可省略不写)screen 萤幕装置print 印刷装置speech 朗读装置

    @media print {      /* 印刷装置用，通常会关闭动画 & hover */    }

方向 orientation

landscape (宽>高) 横屏portrait (高>宽) 竖屏

逗号判断

逗号 代表 or (表任一符合即套用)

  @media (min-width: 700px), handheld and (orientation: landscape) { ... }

HTML 载入不同的CSS档

<link rel="stylesheet" type="text/css" href="all.css" media="screen"><link rel="stylesheet" type="text/css" href="a.css" media="screen and (max-width: 767px)"><link rel="stylesheet" type="text/css" href="b.css" media="screen and (min-width: 768px) and (max-width: 979px)">

基础 media mixin 使用

  $media-md: 768px;  @mixin media-md() {    // 大于 768px 套用    @media all and (min-width: $media-md) {      @content;    }  }    // 可以写于元件之下  .test {    @include media-md{        border: 1px solid red;    };  }    // 亦可统一管理同一个条件下的样式  @include media-md{      .test2 {      background-color: green;    }  };

代入变数

mixin 代入变数的版本可用 up / down / between

$media-md: 768px;$media-xs: 576px;@mixin media-bp-up($width) {  @media all and (min-width: $width) {    @content;  }}@mixin media-bp-down($width) {  @media all and (max-width: $width) {    @content;  }}@mixin media-bp-between($min-w,$max-w) {  @media all and (min-width: $min-w) and (max-width: $max-w){    @content;  }}

使用

// 可写于元件之下.test {  // 大于 768px   @include media-bp-up($media-md){     color: red;  };  // 小于 768px   @include media-bp-down($media-md){     border: 1px solid blue;  };  // xs(576) & md(768) 之间  @include media-bp-between($media-xs,$media-md){    background-color: #eee;  };}// 亦可统一管理同一个条件下的样式@include media-bp-down($media-md){    .test2 {    background-color: green;  }};

参考资料

CodePenPlayGround
CSS Media Queries 详细介绍
[CSS] Media Query
MDN