CSS3---媒体查询与响应式布局

时间 2019-12-19

标签 css3 css 媒体查询响应布局栏目 CSS 繁體版

原文原文链接

1.css

值android	设备类型web
All浏览器	全部设备app
Brailleiphone	盲人用点字法触觉回馈设备布局
Embossed网站	盲文打印机url
Handheldspa	便携设备
Print	打印用纸或打印预览视图
Projection	各类投影设备
Screen	电脑显示器
Speech	语音或音频合成器
Tv	电视机类型设备
Tty	使用固定密度字母栅格的媒介，好比电传打字机和终端

其中Screen、All和Print为最多见的三种媒体类型。

2.媒体类型的引用方法也有多种，常见的有：link标签、@import和CSS3新增的@media几种：

　　link方法

link方法引入媒体类型其实就是在<link>标签引用样式的时候，经过link标签中的media属性来指定不一样的媒体类型。以下所示。

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />

　　@import方法

@import能够引用样式文件，一样也能够用来引用媒体类型。@import引入媒体类型主要有两种方式，一种是在样式中经过@import调用另外一个样式文件；另外一种方法是在<head></head>标签中的<style></style>中引入，但这种使用方法在IE6~7都不被支持，如样式文件中调用另外一个样式文件时，就能够指定对应的媒体类型。

@importurl(reset.css) screen;   
@importurl(print.css) print;

在<head>中的<style>标签中引入媒体类型方法。

<head>
<style type="text/css">
    @importurl(style.css) all;
</style>
</head>

@media方法

@media是CSS3中新引进的一个特性，被称为媒体查询。在页面中也能够经过这个属性来引入媒体类型。@media引入媒体类型和@import有点相似也具备两方式。

（1）在样式文件中引用媒体类型：

@media screen {
   选择器{/*你的样式代码写在这里…*/}
}

（2）使用@media引入媒体类型的方式是在<head>标签中的<style>中引用。

<head>
<style type="text/css">
    @media screen{
    选择器{/*你的样式代码写在这里…*/}
}
</style>
</head>

3.Media Queries的使用方法以下。

@media 媒体类型and （媒体特性）{你的样式}

　　注意：使用Media Queries必需要使用“@media”开头，而后指定媒体类型（也能够称为设备类型），随后是指定媒体特性（也能够称之为设备特性）。媒体特性的书写方式和样式的书写方式很是类似，主要分为两个部分，第一个部分指的是媒体特性，第二部分为媒体特性所指定的值，并且这两个部分之间使用冒号分隔。例如：

(max-width: 480px)

从前面表中能够得知，主要有十种媒体类型和13种媒体特性，将其组合就相似于不一样的CSS集合。但与CSS属性不一样的是，媒体特性是经过min/max来表示大于等于或小于作为逻辑判断，而不是使用小于（<）和大于（>）这样的符号来判断。接下来一块儿来看看Media Queries在实际项目中经常使用的方式。
　　1. 最大宽度max-width

“max-width”是媒体特性中最经常使用的一个特性，其意思是指媒体类型小于或等于指定的宽度时，样式生效。如：

@media screen and (max-width:480px){
 .ads {
   display:none;
  }
}

上面表示的是：当屏幕小于或等于480px时,页面中的广告区块（.ads）都将被隐藏。

　　2.最小宽度min-width

“min-width”与“max-width”相反，指的是媒体类型大于或等于指定宽度时，样式生效。

@media screen and (min-width:900px){
.wrapper{width: 980px;}
}

上面表示的是：当屏幕大于或等于900px时，容器“.wrapper”的宽度为980px。

　　3.多个媒体特性使用

Media Queries可使用关键词"and"将多个媒体特性结合在一块儿。也就是说，一个Media Query中能够包含0到多个表达式，表达式又能够包含0到多个关键字，以及一种媒体类型。

当屏幕在600px~900px之间时，body的背景色渲染为“#f5f5f5”，以下所示。

@media screen and (min-width:600px) and (max-width:900px){
  body {background-color:#f5f5f5;}
}

　　4.设备屏幕的输出宽度Device Width

在智能设备上，例如iPhone、iPad等，还能够根据屏幕设备的尺寸来设置相应的样式（或者调用相应的样式文件）。一样的，对于屏幕设备一样可使用“min/max”对应参数，如“min-device-width”或者“max-device-width”。

<link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css" />

上面的代码指的是“iphone.css”样式适用于最大设备宽度为480px，好比说iPhone上的显示，这里的“max-device-width”所指的是设备的实际分辨率，也就是指可视面积分辨率。

　　5. not关键词

使用关键词“not”是用来排除某种制定的媒体类型，也就是用来排除符合表达式的设备。换句话说，not关键词表示对后面的表达式执行取反操做，如：

@media not print and (max-width: 1200px){样式代码}

上面代码表示的是：样式代码将被使用在除打印设备和设备宽度小于1200px下全部设备中。

　　6.only关键词

only用来指定某种特定的媒体类型，能够用来排除不支持媒体查询的浏览器。其实only不少时候是用来对那些不支持Media Query但却支持Media Type的设备隐藏样式表的。其主要有：支持媒体特性的设备，正常调用样式，此时就当only不存在；表示不支持媒体特性但又支持媒体类型的设备，这样就会不读样式，由于其先会读取only而不是screen；另外不支持Media Queries的浏览器，不管是否支持only，样式都不会被采用。如

<linkrel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" />

在Media Query中若是没有明确指定Media Type，那么其默认为all，如：

<linkrel="stylesheet" media="(min-width:701px) and (max-width:900px)" href="mediu.css" />

另外在样式中，还可使用多条语句来将同一个样式应用于不一样的媒体类型和媒体特性中，指定方式以下所示。

<linkrel="stylesheet" type="text/css" href="style.css" media="handheld and (max-width:480px), screen and (min-width:960px)" />

上面代码中style.css样式被用在宽度小于或等于480px的手持设备上，或者被用于屏幕宽度大于或等于960px的设备上。

到目前为止，CSS3 Media Queries获得了众多浏览器支持，除了IE6-8浏览器不支持以外，在全部现代浏览器中均可以完美支持。还有一个不同凡响的时，Media Queries在其余浏览器中不要像其余CSS3属性同样在不一样的浏览器中添加前缀。

4. 什么是响应式设计呢？维基百科是这样对响应式做的描述：“Responsive设计简单的称为RWD，是精心提供各类设备都能浏览网页的一种设计方法，RWD能让你的网页在不一样的设备中展示不一样的设计风格。”从这一点描述来讲，RWD不是流体布局，也不是网格布局，而是一种独特的网页设计方法。　

1.流体网格

　　流体网格是一个简单的网格系统，这种网格设计参考了流体设计中的网格系统，将每一个网格格子使用百分比单位来控制网格大小。这种网格系统最大的好处是让你的网格大小随时根据屏幕尺寸大小作出相对应的比例缩放。

2.弹性图片

　　弹性图片指的是不给图片设置固定尺寸，而是根据流体网格进行缩放，用于适应各类网格的尺寸。而实现方法是比较简单，一句代码就能搞定的事情。

　　img {max-width:100%;}
不幸的是，这句代码在IE8浏览器存在一个严重的问题，让你的图片会失踪。固然弹性图片在响应式设计中如何更好的实现，到目前为止都还存在争议，也还在不断的改善之中。

为每个断点提供不一样的图片，这是一个比较头痛的事情，由于Media Queries并不能改变图片“src”的属性值，那有没有办分法能够解决呢？能够参考一下下面的解决方法。使用background-image给元素使用背景图片，显示/隐藏父元素，给父元素使用不一样的图片，而后经过Media Queries来控制这些图片显示或隐藏。

3.媒体查询

　　Responsive设计最关注的就是：根据用户的使用设备的当前宽度，你的Web页面将加载一个备用的样式，实现特定的页面风格。

4.屏幕分辨率

屏幕分辨简单点说就是用户显示器的分辨率，深一点说，屏幕分辨率指的是用户使用的设备浏览您的Web页面时的显示屏幕的分辨率，好比说智能手机浏览器、移动电脑浏览器、平板电脑浏览器和桌面浏览器的分辨率。Responsive设计利用Media Queries属性针对浏览器使用的分辨率来适配对应的CSS样式。

5.主要断点

主要断点，在Web开发中是一个新词，但对于Responsive设计中是一个很重要的一部分。简单的描述就是，设备宽度的临界点。在Media Queries中，其中媒体特性“min-width”和“max-width”对应的属性值就是响应式设计中的断点值。简单点说，就是使用主要断点和次要断点，建立媒体查询的条件。而每一个断点会对应调用一个样式文件（或者样式代码）

5. 响应式布局（Responsive Web design）指的是在网页开发过程当中针对不一样设备开发一套网站，而后根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)自适应地显示不一样布局。

响应式布局的核心是媒体查询。媒体查询（ Media Query ）是获取用户行为和设备环境、而后提供相应的CSS规则的过程的简称。

媒体查询让CSS能够更精确做用于不一样的媒体类型和同一媒体的不一样条件。
Responsive布局技巧

在Responsive布局中，能够毫无保留的丢弃：

　　第一，尽可能少用可有可无的div；

　　第二，不要使用内联元素（inline）；

　　第三，尽可能少用JS或flash；

　　第四，丢弃没用的绝对定位和浮动样式；

　　第五，摒弃任何冗余结构和不使用100%设置。

有舍才有得，丢弃了一些对Responsive有影响的东东，那么有哪些东东能帮助Responsive肯定更好的布局呢？

　　第一，使用HTML5 Doctype和相关指南；

　　第二，重置好你的样式（reset.css）；

　　第三，一个简单的有语义的核心布局；

　　第四，给重要的网页元素使用简单的技巧，好比导航菜单之类元素。

使用这些技巧，无非是为了保持你的HTML简单干净，并且在你的页面布局中的关键部分（元素）不要过度的依赖现代技巧来实现，好比说CSS3特效或者JS脚本。

6.Responsive设计——meta标签

<meta name=”viewport” content=”” />

在实际项目中，为了让Responsive设计在智能设备中能显示正常，也就是浏览Web页面适应屏幕的大小，显示在屏幕上，能够经过这个可视区域的meta标签进行重置，告诉他使用设备的宽度为视图的宽度，也就是说禁止其默认的自适应页面的效果，具体设置以下：

<meta name=”viewport” content=”width=device-width,initial-scale=1.0” />

另一点，Responsive设计是结合CSS3的Media Queries属性，才能尽显Responsive设计风格.