前端响应式のmedia文件分离

响应式cssのmedia文件分离

media简介

1.媒体查询，添加自CSS3

2.一个媒体查询由一个可选的媒体类型和零个或多个使用媒体功能的限制了样式表范围的表达式组成,允许内容的呈现针对一个特定范围的输出设备而进行裁剪，而不必改变内容本身

语法

1.媒体查询包含一个可选的媒体类型和媒体特性表达式(0或多个)最终会被解析为true或false

2.如果媒体查询中指定的媒体类型匹配展示文档所使用的设备类型，并且所有的表达式的值都是true，那么该媒体查询的结果为true

demo

@media (max-width: 600px) {
  .sidebar {
    display: none;
  }
}

逻辑操作符

and

and操作符用来把多个媒体属性组合成一条媒体查询，对成链式的特征进行请求，只有当每个属性都为真时，结果才为真

@media (min-width: 700px) and (orientation: landscape) {
    /* Write css 仅在可视区域宽度不小于700像素并在横屏时有效*/
}

逗号分隔列表

媒体查询中使用逗号分隔效果等同于or逻辑操作符。当使用逗号分隔的媒体查询时，如果任何一个媒体查询返回真，样式就是有效的

@media (min-width: 700px), handheld and (orientation: landscape) {
    /* 在最小宽度为700像素或是横屏的手持设备上应用一组样式 */
    /* orientation: portrait 竖屏 */
}

not

not 关键字应用于整个媒体查询，在媒体查询为假时返回真

not关键字仅能应用于整个查询，而不能单独应用于一个独立的查询

@media not all and (monochrome) {
}

等价于

@media not (all and (monochrome)) {
}

only

防止老旧的浏览器不支持带媒体属性的查询而应用到给定的样式

@media only screen and (color) {
}

媒体查询样式分离

我们不必把所有的媒体查询写到一个css文件中,我们一般这样写

<link rel="stylesheet" href="common.css">
<link media="(min-width: 500px)" rel="stylesheet" href="desktop.css">
<link media="(max-width: 500px)" rel="stylesheet" href="mobile.css">

desktop.css和mobile.css中直接写样式就可以了,不必写查询条件