CSS3中媒体特性的示例分析

发布时间：2021-10-15 14:14:07 作者：小新
来源：亿速云阅读：134

这篇文章主要介绍了CSS3中媒体特性的示例分析，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

CSS3 媒体特性与Responsive设计

随着科学技术不断地向前发展，网页的浏览终端越来越多样化，用户可以通过宽屏电视、台式电脑、笔记本电脑、平板电脑和智能手机来访问网站。尽管无法保证一个网站在不同屏幕尺寸和不同设备上看起来一模一样，但至少要让你的Web页面能适配用户的终端，让它更好地呈现在用户面前。使用CSS3中的MediaQuery模块来让一个页面适应不同的终端（或屏幕尺寸），从而让页面有一个更好的用户体验。

媒体类型媒体类型（ Media Type）在CSS2中是一个常见的属性，也是一个非常有用的属性，可以通过媒体类型对不同的设备指定不同的样式。

媒体类型引用方法在实际中媒体类型有近十种之多，实际常用的也就那么几种。不过媒体类型的引用方法也有多种，常见的媒体类型引用方法主要有：

link标签、

xml方式、

@import

CSS3新增的@media

1. 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" />

2. xml方式

xml方式引用媒体类型和link引入媒体类型极其相似，也是通过media属性来指定。

<? xml- stylesheet rel=" stylesheet" media=" screen" href=" style. css" ?>

3. @import方式

@import是用来引用样式文件方法之一，同样也可以用来引用媒体类型。@import引入媒体类型主要有两种方式，

http:/ /www.iis7.com/b/plc/

一种：是在样式中通过@import调用另一个样式文件；

另一种：是在<head></ head>标签中的<style></style>中引入，但这种使用方法在IE 6 和 IE 7 中都不被支持，如样式文件中调用另一个样式文件时，就可以指定对应的媒体类型。 @import url(reset. css) screen; @import url(print. css) print; 在<head>中的<style>标签中引入媒体类型方法。 <head> <style type=" text/css"> @import url(style.css) all; </style> </head>

4. @media方式

@media是CSS3中新引进的一个特性，称为媒体查询。在页面中也可以通过这个属性来引入媒体类型。@media引入媒体类型和@import有点类似，也具有两种方式：

1). 在样式文件中引用媒体类型： @media screen { 选择器{/* 你的样式代码写在这里…*/} }

2). 使用@media引入媒体类型的方式是在<head> 标签中的<style>中引用。 <head> <style type=" text/css"> @media screen{ 选择器{/* 你的样式代码写在这里…*/} } </ style> </ head>

媒体特性：

媒体特性（Media Query）是CSS3对媒体类型（ Media Type）的增强版，其实可以将Media Query看成“ Media Type（判断条件）+ CSS（符合条件的样式规则）”。

Media Query和CSS的属性集合很相似，主要区别在如下：

·Media Query 只接受单个的逻辑表达式作为其值，或者没有值。

·CSS属性用于声明如何表现页面的信息；而Media Query是一个用于判断输出设备是否满足某种条件的表达式。

·Media Query 中的大部分接受 min/ max 前缀，用来表达其逻辑关系，表示应用于大于等于或小于等于某个值的情况。

·CSS属性要求必须有属性值， Media Query 可以没有值，因为其表达式返回的只有真或假两种。

Media Query使用方法：

Media Query 能在不同的条件下使用不同的样式，使页面在不同在终端设备下达到不同的渲染效果。 Media Query 有其自己的使用规则。具体来说， Media Query 的使用方法如下：

@media 媒体类型 and （媒体特性）{ 你的样式} 使用 Media Query 时必须要使用@media开头，然后指定媒体类型（也可以称为设备类型），随后是指定媒体特性（也可以称之为设备特性）。

媒体特性的书写方式和样式的书写方式非常相似，主要分为两个部分，

第一个部分指的是媒特性，

第二个部分为媒体特性所指定的值，而且这两个部分之间使用冒号分隔。例如： (max- width: 480px) 将其组合就类似于不同的 CSS集合。但与CSS属性不同的是，媒体特性是通过min/ max 来表示大于、等于或小于作为逻辑判断，而不是使用小于（<）和大于（>）这样的符号来判断。

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

2. 最小宽度 min-width min-width与max-width相反，即媒体类型大于或等于指定宽度时，样式生效。

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

4. 设备屏幕的输出宽度Device Width在智能设备上，例如 iPhone、iPad 等，还可以根据屏幕尺寸来设置相应的样式（或者调用相应的样式文件）。对于屏幕同样可以使用 min/ max 对应参数，如min-device-width 或者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 Query 的浏览器，不论是否支持 only，样式都不会被采用。

：Responsive(响应式)布局概念：

随着用户访问Web页面终端多样化，比如说 iPad、iPhone、平板电脑、台式机以及笔记本等，以前的设计目前再无法适应这些多样化的终端设备。为了满足用户的需求，Ethan Marcotte 在A List Apart 发表了一篇开创性的文章，将三种已有的开发技术（弹性网格布局、弹性图片、媒体和媒体查询）整合起来，并将其命名为RWD（ Responsive Web Design，响应式设计）。

什么是响应式设计呢？

维基百科是这样描述的： Responsive设计为RWD，是精心提供各种设备都能浏览网页的一种设计方法， RWD能让网页在不同的设备中展现不同的设计风格。由此可见， RWD不是流体布局，也不是网格布局，而是一种独特的网页设计方法。

Responsive设计特点

Responsive网页设计，不但要考虑其元素布局的秩序，还要做到“有求必应”，因此需要满足三个条件。Responsive设计之父EthanMarcotte是这样描述这三个条件的。

-网站必须建立灵活的网格基础；

-引用到网站的图片必须是可伸缩的；

-不同的显示风格，需要在 Media Query 上设置不同的样式。

-缺少任何一个功能，就不能称为是合格的Responsive网页设计。

Responsive中的术语

在响应式设计中，有一些其专有的术语，而且理解这些术语对于帮助理解和学习响应式设计至关重要。

1. 流体网格

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

2. 弹性图片

弹性图片指的是不给图片设置固定尺寸，而是根据流体网格进行缩放，用于适应各种网格的尺寸。而实现方法是比较简单，一条代码就能确定。img {max- width: 100%;}

3. 媒体查询

媒体查询在CSS3中得到了强大的扩展。使用这个属性可以让设计根据用户终端设备适配对应的样式。这也是响应式设计中最为关键的。可以说，Responsive设计离开了 Medial Query 就失去了它生存的意义。简单地说，媒体查询可以根据设备的尺寸，查询出适配的样式。

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

4. 屏幕分辨率

屏幕分辨率指的是用户使用的设备浏览Web页面时的分辨率，比如智能手机浏览器、移动电脑浏览器、平板电脑浏览器和桌面浏览器。 Responsive设计利用Media Query属性针对浏览器使用的分辨率来适配对应的CSS样式。因此屏幕分辨率在Responsive设计中是一个很重要的东西，因为只有知道Web页面要在哪种分辨率下显示何种效果，才能调用对应的样式。

5. 主要断点

主要断点，在Web开发中是一个新词，但其是 Responsive 设计中很重要的一部分。简单的描述就是，设备宽度的临界点。在 Media Query 中，媒体特性 min-width 和 max- width 对应的属性值就是响应式设计中的断点值。简单点说，就是使用主要断点和次要断点，创建媒体查询的条件。而每个断点会对应调用一个样式文件（或者样式代码），主要断点加载样式文件将直接影响Web的效果。除了主要断点之外，为了满足更多效果，还可以在这个基础上添加次要断点。不过主要断点和次要断点增加之后，需要维护的样式也相应地增加，成本也相对应地增加。因此在实际使用中，需要根据自身产品需求，决定断点。综合下来，设置断点应把握以下三个要点。

-满足主要的断点；

-有可能的话添加一些别的断点；

-设置高于1024px的桌面断点。

Responsive 布局技巧：

布局是一个再简单不过的问题了，也是每个网页设计中必须包含的部分，但使用 Responsive 设计第一步要做的事情是让页面布局尽量简单。实现一个简单的布局有一些小技巧。

1. 尽量少用无关紧要的div；

2. 不要使用内联元素（ inline）；

3. 尽量少用JS或Flash；

4. 丢弃没用的绝对定位和浮动样式；

5. 摒弃任何冗余结构和不使用100%设置。有舍才有得，哪些东西能帮助 Responsive 确定更好的布局呢？

6. 使用HTML5 Doctype和相关指南；

7. 重置好样式（ reset. css）；

8. 一个简单的有语义的核心布局；

9. 给重要的网页元素使用简单的技巧，比如导航菜单之类元素。

使用这些技巧，无非是为了保持HTML简单干净，而且在页面布局中的关键部分（元素）不要过分依赖现代技巧来实现，比如说 CSS3 特效或者JS脚本。说了这么多，怎么样的布局或者说HTML 结构才是简单干净的呢？这里介绍一个快速测试的方法。首先禁掉页面中所有的样式（以及与样式相关的信息），在浏览器中打开，如果内容排列有序，方便阅读，那么这个结构就不会差到哪里去。

meta标签：

当Responsive设计页面在智能设备中进行测试的时候（比如说iPhone或Android），会惊奇地发现，所有的媒体查询都不会生效—页面仍展示为普通的样式，即一个全局缩小后的页面。这是因为许多智能手机都使用了一个比实际屏幕尺寸大很多的虚拟可视区域，主要目的就是让页面在智能手机端阅读时不会因为实际可视区域而变形。为了让智能手机能根据媒体查询匹配对应样式，让页面在智能手机中正常显示，特意添加了一个特殊的meta标签。这个标签的主要作用就是让智能手机浏览网页时能进行优化，并且可以自定义界面可视区域的尺寸和缩放级别。 meta标签使用方法如右： < meta name=" viewport" content="" />

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

另外，由于Responsive设计只有结合CSS3的Media Queries属性，才能尽显Responsive设计风格，故浏览器必须支持 CSS3 Media Queries。

感谢你能够认真阅读完这篇文章，希望小编分享的“CSS3中媒体特性的示例分析”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!

CSS3中媒体特性的示例分析

相关阅读