CSS系列 — 媒体查询-一一网

作用

“媒体查询”，顾名思义就是查询当前是属于什么媒体设备

媒体查询的最大作用就是根据查看网页的设备的窗口大小，适配布局和元素大小

基本语法

/*正常样式*/
@media (条件) {
    /** 达到条件时的样式 **/
}
复制代码

或

<link rel="stylesheet" media="(条件)" href="达到条件时引入的css文件">
复制代码

条件里的语法逻辑

主要的逻辑也就是以下四个：

and
, 【 or 的意思】
not 【对查询结果取反】
only 【only操作符仅在媒体查询匹配成功的情况下被用于应用一个样式，这对于防止让选中的样式在老式浏览器中被应用到。】

@media (min-width: 600px) and (max-width: 700px) {
    /** 窗口宽度在600-700像素的样式 **/
}
@media (not min-width: 600px) and (not max-width: 700px) {
    /** 窗口宽度在小于600或大于700像素的样式 **/
}
@media (max-width: 600px,min-width: 700px) {
    /** 窗口宽度在小于600或大于700像素的样式 **/
}
复制代码

使用示例

示例一

实现功能：
1. 默认情况下左栏的背景色是黄色的
2. 当浏览器窗口小于400像素时，左栏的背景色变成橙色
3. 当窗口继续缩小，小于300像素时，左栏的背景色变成红色
复制代码

@media (max-width: 400px) {
    .leftColumn {
         background-color:orange;
    }
}
@media (max-width: 300px) {
    .leftColumn {
         background-color:OrangeRed;
    }
}
复制代码

示例二

实现功能：
（1）默认情况下，页面分为左右两栏。左栏固定宽度，右栏自适应宽度
（2）一般移动版网站都只用一栏，因为屏幕小，并排两栏并不好看。
所以当浏览器窗口宽度小于568像素时，左侧导航栏会转移到主内容之下。
复制代码

/*左栏固定宽度，右栏自适应宽度（通过浮动和负边距实现）*/
aside.NavSidebar
{
  padding: 5px 15px 5px 15px;
  width: 203px;
  background-color:#f9f9f9;
  font-size: small;
  float:left;
  margin-right: -100%;
}
复制代码

效果

/*当浏览器窗口宽度小于568像素时，左侧导航栏会转移到主内容之下。
（由于HTML页面中左栏是定义在主内容之下，所以只要将左右栏去掉浮动、重设栏宽（每栏占满可用宽度）即可）*/
.ContentOuter {
  float: right;
  width:100%; 
}
.Content {
  padding: 20px;
  margin-left:233px;
}
@media (max-width: 700px) {
    aside.NavSidebar {
         float:none;
         width:auto;
         margin-right:auto;
    }
    .ContentOuter {
         float:none;
         width:auto;
    }
    .Content {
          margin-left:0px;
    }
}
复制代码

效果

替换整个样式表

<!--窗口宽度大于568px时用hangge.css文件，窗口宽度大于568px时用hangge_small.css文件-->
<head>
  <link rel="stylesheet" href="hangge.css">
  <link rel="stylesheet" media="(max-width: 568px)" href="hangge_small.css">
</head>
复制代码

还可以用来识别移动设备

使用max-device-width可以区别普通计算机和移动设备。根据经验，将max-device-width设置为568像素就能够涵盖目前的iPhone和Android手机（不管横向还是竖向）

<link rel="stylesheet" media="(max-device-width: 568px)" href="hangge_mpbile.css">
复制代码

文章版权归作者所有，未经允许请勿转载。

THE END

前端

自动化测试执行和报告

Snipe Gallery跨站脚本攻击漏洞

Python获取全部基金前十大持仓股并进行选股分析

车轮驾考通v7.6.2解锁会员去广告版

多家厂商NIS+远程缓冲区溢出漏洞

3大能力升级，云效+钉钉，让研发协作更「敏捷」

CSS系列 — 媒体查询

作用

基本语法

条件里的语法逻辑

使用示例

示例一

示例二

替换整个样式表

还可以用来识别移动设备