仓酷云

标题: 带来一篇CSS3进修教程:Media Queries [打印本页]

作者: 老尸 时间: 2015-1-15 23:10
标题: 带来一篇CSS3进修教程:Media Queries
表现和结构分离，在团队开发中更容易分工合作而减少相互关联性
破洛洛文章简介：本文对照具体，以是良多实践顶用不到。以是假如只是想复杂懂得MediaQueries，保举参考CSS3MediaQueries。
提及CSS3的新特征，就不能不提到MediaQueries。

本文对照具体，以是良多实践顶用不到。以是假如只是想复杂懂得MediaQueries，保举参考CSS3MediaQueries。

CSS2.1界说了Media的部分，包含范例、组别和划定规矩等。CSS并不是为了显现器而制造，而是使用于林林总总的媒体，好比罕见的显现器，越来愈多的手持设备，大概略显过期的电视机等等。

而MediaQueries的引进，其感化就是同意增加表达式用以断定媒体的情形，以此来使用分歧的款式表。换句话说，其同意我们在不改动内容的情形下，改动页面的结构以准确顺应分歧的设备，以此增强体验。以是MediaQueries和CSS优化没有干系，乃至是冲突的。

援用CSS3MediaQueries里的直不雅的DEMO，当扫瞄器宽度改动时，使用的CSS产生变更。而这些，底本必要JavaScript的把持才干做到。

Web挪动化的趋向越加分明。固然国际遭到良多制约，可是这类海潮却没法反对。前段工夫jQuery公布mobile项目，也减速了这类变更。MediaQueries不久的未来应当就会被更多的利用，以更好的撑持新兴设备好比iPad。现实上，jQuery乃至有MediaQueries的插件。

看看MediaQueries做了甚么

一个三栏结构，在屏幕变窄的情形下，酿成1栏结构，乃至是打消过剩两栏而只留下一般的内容的第2栏。MediaQueries是怎样事情的？先看看link标签的写法：

<linkrel="stylesheet"type="text/css"href="swordair.css"media="screenand(min-width:400px)"

在media属性里：

screen是媒体范例里的一种，CSS2.1界说了10种媒体范例
and被称为关头字，其他关头字还包含not(扫除某种设备)，only(限制某种设备)
(min-width:400px)就是媒体特征，其被安排在一对圆括号中。完全的特征参看相干的Mediafeatures部分

媒体特征共13种，能够说是一个相似CSS属性的汇合。但和CSS属性分歧的是，媒体特征只承受单个的逻辑表达式作为其值，大概没有值。而且个中的年夜部分承受min/max的前缀，用来暗示年夜于即是/小于即是的逻辑，以此制止利用<和>这些字符。

那末，回到方才的那条MediaQuery，media="screenand(min-width:400px)"的意义就是当屏幕的宽度年夜于即是400px的时分，使用此条CSS。

一个MediaQuery包括一种媒体范例，假如媒体范例没有指定，那末就是默许范例all，好比：

<linkrel="stylesheet"type="text/css"href="example.css"
media="(max-width:600px)">

一个MediaQuery包括0到多个表达式，表达式又包括0到多个关头字，和一种媒体特征，好比：

<linkrel="stylesheet"type="text/css"href="example.css"
media="handheldand(min-width:20em)and(max-width:50em)">

复制代码

逗号(,)被用来暗示并列，暗示大概。好比上面的例子暗示此CSS被使用于宽度小于20em的手持，大概宽度小于30em的屏幕：

<linkrel="stylesheet"type="text/css"href="example.css"
media="handheldand(max-width:20em),screenand(max-width:30em)">

not关头字用来扫除切合表达式的设备，好比：

<linkrel="stylesheet"type="text/css"href="example.css"
media="notscreenand(color)">

再看些其他例子(禁绝确，只是用来讲明)：

<linkrel="stylesheet"type="text/css"href="styleA.css"
media="screenand(min-width:800px)">
<linkrel="stylesheet"type="text/css"href="styleB.css"
media="screenand(min-width:600px)and(max-width:800px)">
<linkrel="stylesheet"type="text/css"href="styleC.css"
media="screenand(max-width:600px)">

下面将设备分红3种，分离是宽度年夜于800px时，使用styleA，宽度在600px到800px之间时使用styleB，和宽度小于600px时使用styleC。这实际上是一个CSS掩盖的成绩，以是当宽度恰好即是800px时该使用谁人款式？谜底是styleB，由于前两条表达式都建立，后者掩盖了前者。

以是说下面的例子固然能事情，可是禁绝确。这个例子一般情形应当如许写：

<linkrel="stylesheet"type="text/css"href="styleA.css"
media="screen">
<linkrel="stylesheet"type="text/css"href="styleB.css"
media="screenand(max-width:800px)">
<linkrel="stylesheet"type="text/css"href="styleC.css"
media="screenand(max-width:600px)">

并不是一切的扫瞄器都撑持MediaQueries，那末这些扫瞄器怎样对待MediaQueries？

MediaQueries是CSS3关于MediaType的一个扩大，以是不撑持MediaQueries的扫瞄器，应当仍旧要辨认MediaType，可是IE只是复杂的疏忽了款式。only关头字大概显得有些过剩，对撑持MediaQueries的扫瞄器来讲的确是如许，由于加不加only没有影响。only的感化，良多时分是用来对那些不撑持MediaQueries可是却读取MediaType的设备埋没款式表的。好比：

<linkrel="stylesheet"type="text/css"href="example.css"
media="onlyscreenand(color)">

撑持MediaQueries的设备，准确使用款式，就似乎only不存在
不撑持MediaQueries但准确读取MediaType的设备，因为先读取到only而不是screen，将疏忽这个款式
不撑持MediaQueries的IE不管是不是有only，都疏忽款式

最初再来看看MediaQueries的撑持情形。不出不测的，IE678全体出局，可是IE9幸免。依据IEBlog上的这篇HTML5andSameMarkup来看，IE9撑持MediaQueries。至于其他扫瞄器，一样不出不测的，全体撑持MediaQueries。

完全的撑持情形排列成以下表：

其他界说media的办法好比@media等，使用MediaQueries的办法不异，以是不在反复叙说。程度无限，若有成绩请指出给我，感谢:)</p>
你可以轻松地控制页面的布局。

作者: 爱飞 时间: 2015-1-17 20:09
不管老师做怎样的解释，而我却对它感到很是吃力，诸如里面有许多不知道的功能。

作者: 兰色精灵 时间: 2015-1-24 21:05
使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。

作者: 小魔女 时间: 2015-2-2 14:54
Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。

作者: 因胸联盟 时间: 2015-2-8 01:47
由CS4 版本开始，则转用WebKit 排版引擎（亦即Google Chrome和Apple Safari浏览器所用的排版引擎）作为网页预览。

作者: 活着的死人 时间: 2015-2-24 05:31
我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中，我总结了四大定律：兴趣、恒心、虚心、时间。

作者: 只想知道 时间: 2015-3-7 11:46
Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。

作者: 金色的骷髅 时间: 2015-3-15 05:37
这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。

作者: 小妖女 时间: 2015-3-21 22:01
这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。

欢迎光临仓酷云 (http://ckuyun.com/)