了解媒体查询@media | 8月更文挑战

Andy_W
240 阅读5分钟

这是我参与8月更文挑战的第21天，活动详情查看：8月更文挑战

今天来看看媒体查询@media

@media的作用其实就是可以在指定的设备上使用对应的样式替代原有的样式。

可以简单理解为告诉浏览器：当满足某条件时，调用某样式。当满足条件A时，调用A样式； 当满足条件B时，调用B样式

  1. 媒体查询可用于检测：

viewport(视窗) 的宽度与高度

设备的宽度与高度

朝向 (智能手机横屏，竖屏)

分辨率

  1. 语法和操作符 语法一：内联@media @media 查询条件表达式｛ CSS样式 ｝
@media not|only mediatype and (expressions) {CSS样式}

媒体查询由多媒体组成，可以包含一个或多个表达式，根据表达式条件判断是否成立，返回 true 或 false。

如果指定的多媒体类型匹配设备类型则返回查询结果为true，文档会在匹配的设备上显示指定样式CSS样式效果。

可以使用操作符 not 或 only 或and或，限定。

and

表示并且，要求必须满足所有的表达式要求时，才能使用media定义样式

not

表示不，除…外，即排除掉某些特定的设备的，如 @media not print（非打印设备），注意：not是针对一整条媒体查询语句，而非其中某一个条件

@media not print and(max-width:1024px){...}
或者
@media not(print and (max-width:1024px)){..}

only 表示只有 仅仅，表示仅仅是某一种的媒体类型设备时应用指定样式

对于支持Media Queries的移动设备来说，如果存在only关键字，移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持Media Queries的设备但能够读取Media Type类型的Web浏览器，遇到only关键字时会忽略这个样式文件。

,

多个条件设定使用逗号分隔，表示或者or的意思，即满足其中之一

方法二：外链 media属性

在不同的媒体上使用不同的样式文件，使用link外链media引入

格式：<link media=“查询条件表达式” href="xxx">

<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">
  1. CSS3 媒体类型(mediatype)

print 打印机

screen 电脑屏幕，平板，智能手机等。

speech 语音合成器等发声设备

all 用于所有多媒体类型设备（默认）

  1. 常见媒体特性

color颜色

color-index 颜色索引

aspect-ratio设备视口的宽高比

如： @media only screen and (min-aspect-ratio:16/9){...}

device-aspect-ratio设备屏幕宽高比

device-height设备屏幕高度

device-width设备屏幕宽度

grid网格栅格

scan扫描

height高度

monochrome黑白

orientation方向，横屏是landscape竖屏是portrait

@media (orientation:landscape){CSS样式}

@media (orientation:portrait){CSS样式}

resolution设备的分辨率范围 分辨率(dpi),分辨率倍数(dppx),

@media screen and (resolution:2dppx){...}

@media screen and (resolution:3dppx){...}

@media screen and (min-resolution:2dppx){...}

width视口宽度 终端设备对页面的渲染区域

视口就是通常我们定义移动端头部meta的viewport，在浏览器窗口中，视口不包括滚动条、顶部或底部工具栏、菜单的部分

如：在屏幕可视窗口尺寸大于 480 像素的设备上应用xxx样式:

@media screen and (min-width:480px){xxx}

以上几乎所有的属性都可以使用【min-】和【max-】前缀做限定 ，grid、scan和orientation除外

max-color：最大颜色

max-color-index：最大颜色索引

max-aspect-ratio：最大宽高比

max-device-aspect-ratio：最大设备屏幕宽高比

max-device-height：设备屏幕的最大高度

max-device-width： 设备屏幕的最大宽度

max-height： 最大高度

max-monochrome：每个像素的最大单色原件个数

max-resolution：最大分辨率 max-width：最大宽度

min-color：最小颜色

min-color-index：最小颜色索引

min-aspect-ratio：最小宽高比

min-device-aspect-ratio：最小设备屏幕宽高比

min-device-height：设备屏幕的最小高度

min-device-width： 设备屏幕的最小宽度

min-height： 最小高度

min-monochrome：每个像素的最小单色原件个数

min-resolution：最小分辨率

min-width：最小宽度

  1. 移动端配置媒体查询步骤

（1）定义移动端视口，即设置好meta标签

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

width=device-width宽度等于当前设备的宽度

initial-scale=1.0 初始缩放比例

minimum-scale允许用户缩放到的最小比例

maximum-scale允许用户缩放到的最大比例

user-scalable用户是否可手动缩放

注意：手机系统默认会给予一定的视口宽度设置，并且允许用户进行页面缩放，这样一些未做移动端处理的PC网站虽然也可以在手机上呈现，但是页面的内容会看上去很小。因此我们设置meta的目的就是要修改默认设置，达到页面尺寸和移动端设备能匹配

（2）针对IE兼容处理

I. 为防止IE的实际浏览器模式默认较低，需要设置IE渲染方式为最新（ edge ）

格式：<meta http-equiv="X-UA-Compatible" content="IE=edge">

II. IE9以下不支持HTML5、不支持@Media，所以需要加载两个JS文件，来保证代码实现兼容

<!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

（3）移动端常用尺寸

常见尺寸宽度有：320px、480px、640px、768px、960px、1024px、1200px等

以上就是媒体查询相关的内容

avatar
文章
阅读
粉丝