@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。

那媒体查询该如何使用呢?

一、铺垫

1.首先我们在使用 @media 的时候需要先设置下面这段代码,来兼容移动设备的展示效果

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
width = device-width:宽度等于当前设备的宽度
initial-scale:初始的缩放比例(默认设置为1.0,即代表不缩放)
user-scalable:用户是否可以手动缩放(默认设置为no,不放大缩小页面)
2:加载兼容文件JS

因为IE8既不支持HTML5也不支持CSS3 @media ,所以我们需要加载两个JS文件,来保证我们的代码实现兼容效果:

<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
if 判断,假如是ie9,则加载这两个兼容IE9的JS文件,不是的话就注释这两段js文件
3:设置IE渲染方式默认为谷歌(可选)
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

这段代码后面加了一个chrome=1,如果用户的电脑里安装了 chrome,就可以让电脑里面的IE不管是哪个版本的都可以使用Webkit引擎及V8引擎进行排版及运算,如果没有安装,就显示IE最新的渲染模式。

二、css3语法

1.内部样式语法

@media  mediatype  and/not/only  (media feature) { CSS-Code }

如何理解@media的语法规则:

使用媒体查询必须是以 @media 开头;

然后指定设备类型(媒体类型mediatype);

接着是括号()里的规定媒体/设备特征(media feature),媒体特征的书写格式与css样式类似,都是属性名:属性值(例如min-width:200px);

最后跟着的大括号{ css-code },里面放置的是要设置的css样式。

逻辑运算符:

  not:用来排除某种设备。比如,排除打印设备 @media not print;

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

  all:适用于所有的设备类型;

  and:媒体查询中使用来连接多种媒体特性,一个媒体查询中可以包含0或多个表达式,表达式可以是0或多个关键字,以及一种媒体类型。

如:

@media (min-width: 600px) and (max-width: 700px) {

    /** 窗口宽度在600-700像素的样式 **/
}
@media (not max-width600px) and (max-width700px) {

    /** 窗口宽度在600-700像素的样式 **/
}

2.link标签引用样式

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

定义媒体查询的部分放在<link>标签内,用media属性标注,media="  媒体类型  and/not/only(媒体特性)"

3.媒体类型(mediaType )

类型有很多,在这里不一一列出来了,只列出了常用的几个。

描述
all 用于所有设备
print 用于打印机和打印预览
screen 用于电脑屏幕,平板电脑,智能手机等。(最常用)
speech 应用于屏幕阅读器等发声设备

4.媒体查询中最常用的媒体特性(media feature)

 特性名 应用场景
 width
 min-width
 max-width
 显示区域的宽度(对打印机而言是打印表面)  改变布局以适应非常窄(如手机)或非常宽的显示器。
 height
 min-height
 max-height
 显示区域的高度  改变布局以适应非常长或非常短的显示器
 device-width
 min-device-width
 max-device-width
 当前计算机或设备屏幕的宽度
(或打印输出时纸面的宽度)
 根据不同设备(如手机)调整布局
 device-height
 min-device-height
 max-device-height
 屏幕或纸面的高度  根据不同设备(如手机)调整布局
 orientation  landscape(横向)或portrait(纵向)  根据设备的朝向调整布局
 device-aspect-ratio
 min-device-aspect-ratio
 max-device-aspect-ratio
 显示区域的宽高比(1/1是正方形)  根据窗口形状调整样式(问题可能比较复杂)
 color
 min-color
 max-color
 屏幕颜色的位深
(1位表示黑白,目前主流显示器都是24位)
 检查是否支持彩色输出(比如是不是黑白打印),
 或者支持的颜色数量
虽然有这么多媒体特性,但目前最流行最常用的是如下几个:
max-width 定义输出设备中的页面最大可见区域宽度
min-width 定义输出设备中的页面最小可见区域宽度

!注意:为元素设置css样式的属性,假如与媒体查询中设置的媒体样式是相同的属性时。那么需要注意 ,元素的css样式要写在媒体查询上面,否则css样式会覆盖媒体样式,使其失效

简单使用媒体查询@media的更多相关文章

  1. 巧妙使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的好方法

    有无数的理由要求我们在任何时候都应该知道用户是使用的什么设备浏览我们的网站——宽屏,普通屏,平板,手机?知道这些特征,我们web应用的CSS和JavaScript才能同步做相应的操作.在给Mozill ...

  2. 媒体查询media参数以及其兼容性问题

    一.设置meta标签 在使用媒体查询media之前我们需要先设置meta标签,对设备的缩放等参数进行设定. <!--设置缩放和绘制--> <meta name="viewp ...

  3. 媒体查询@media query

    @media query 媒体查询 @media (min-width:768px)小屏 (>=) @media (min-width:992px)中屏 @media (min-width:12 ...

  4. CSS3 之媒体查询Media Query

    Media Queries是CSS3有关媒体查询的属性,有了CSS3 之媒体查询Media Queries就可以进行媒体查询,针对每个不同的媒体进行不同的样式编写.传说中的Web响应式布局就可以毫无压 ...

  5. css3的媒体查询(Media Queries)

    我今天就总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. 先看一个简单的例子: <link rel="stylesheet" media="scr ...

  6. CSS3的媒体查询(Media Queries)与移动设备显示尺寸大全

    媒体查询介绍 我今天就总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. 先看一个简单的例子: <link rel="stylesheet" media=&q ...

  7. 响应式设计的思考:媒体查询(media query)

    Jason Grigsby发表了篇文章,<CSS Media Query for Mobile is Fool’s Gold>对媒体查询(media query)吐槽,大意是在移动设备上使 ...

  8. 关于媒体查询 @Media Screen 与响应式

    其实CSS2中已经有了媒体查询的概念,但是CSS3中媒体查询功能更加的强大! 首先,我们来看一个小例子 设置媒体查询的 Max Width ,改变窗口大小到600px的时候就会触发一下代码: @med ...

  9. 媒体查询Media Queries详解

    @media 标签可以说是响应式网页的开发基础.其主要由媒体类型(Media Type)和 媒体特性(Media Query)两部分组成. Media Type 设定后面规则生效的展示类型,包括all ...

随机推荐

  1. hive常用函数五

    复合类型构建操作 1. Map类型构建: map 语法: map (key1, value1, key2, value2, …) 说明:根据输入的key和value对构建map类型 举例: hive& ...

  2. AJ学IOS(01) UI之Hello World与加法计算器

    不多说,AJ分享,必须精品 这两个一个是HelloWorld(左边) 另一个是 加法计算器(右边)的截图. 先运行第一个 程序看看效果 1.打开Xcode(没有哦mac系统的没有xcode的帮你们默哀 ...

  3. HttpWebRequest在Post的时候,遇到特殊符号+号(加号)变成空格了

    今天在调用一个外部接口的时候遇到一个问题,外部接口说要用FOMR的POST方法提交. OK,没问题,我加了个ASPX页面,里面加了个FORM表单和一些元素,提交,返回值成功.注意看下面这一句:但返回值 ...

  4. DataGridView编辑状态自动提交

    在使用bindingSource.bindingNavigator+DataGridView修改时会发现,当你需要保存修改过后的内容,必须将光标指向另外一行,DataGridView才会将编辑过后的数 ...

  5. GCD - Extreme (II) UVA - 11426 欧拉函数与gcd

    题目大意: 累加从1到n,任意两个数的gcd(i,j)(1=<i<n&&i<j<=n). 题解:假设a<b,如果gcd(a,b)=c.则gcd(a/c,b ...

  6. 一站式轻量级框架 Spring

    Spring 简介 Spring 是一个轻量级的 Java 开发框架,它是为了解决企业应用开发的复杂性而创建的.Spring 的核心是控制反转(IoC)和面向切面编程(AOP).简单来说,Spring ...

  7. ADO.NET(一)

    最近在公司有用到了ADO.NET技术,由浅入深的复习一下. 如图所示,水源就像一个水库,进水龙头就像Connection,同理,抽水机:Command,输水管:DataAdapter 或 DataRe ...

  8. Nginx知多少系列之(十四)Linux下.NET Core项目Nginx+Keepalived高可用(主从模式)

    目录 1.前言 2.安装 3.配置文件详解 4.工作原理 5.Linux下托管.NET Core项目 6.Linux下.NET Core项目负载均衡 7.负载均衡策略 8.加权轮询(round rob ...

  9. Pascal 字符串

    Dancing with Strings http://baskent.edu.tr/~tkaracay/etudio/ders/prg/pascal/PasHTM1/pas/pasl1007.htm ...

  10. Latex-0-latex2word

    Latex-0-latex2word LatexXeLaTex Latex 转 Word 虽然latex 格式很方便,能够满足绝大部分的排版要求,但是在与人沟通的时候不可避免地需要用到其他格式文件,比 ...