2016.3.16__HTML5新特性__第八天

HTML 5 + CSS 3

假设您认为这篇文章还不错，能够去H5专题介绍中查看很多其它相关文章。

今日代码非常冗杂，所以非常多内容直接摘自网上，假设造成您的不适。请留言告知。

非常感谢。

输入标签，通用标签和全局属性今日不做很多其它阐述，日后使用中遇到再另行说明。

1. HTML 5 新特性

今日课程预览

1.1 结构标签

1.1.1 <article> 标签

<article> 标签定义独立的内容。

<article> 标签定义的内容本身必须是有意义的且必须是独立于文档的其余部分。

<article> 的潜在来源：

  • 论坛帖子
  • 博客文章
  • 新闻故事
  • 评论
    <!DOCTYPE html>
    <html>
    <body>

    <article>
      <h1>Internet Explorer 9</h1>
      <p>Windows Internet Explorer 9 (abbreviated as IE9) was released to
      the  public on March 14, 2011 at 21:00 PDT.....</p>
    </article>

    </body>
    </html>

1.1.2 <aside> 标签

<aside> 标签定义 <article> 标签外的内容。

aside 的内容应该与附近的内容相关。

提示：<aside> 的的内容可用作文章的側栏。

<!DOCTYPE html>
<html>
<body>

<p>My family and I visited The Epcot center this summer.</p>

<aside>
<h4>Epcot Center</h4>
<p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>

</body>
</html>

1.1.3 <figure> 标签

规定独立的流内容（图像、图表、照片、代码等等）。

<figure> 元素的内容应该与主内容相关，同一时候元素的位置相对于主内容是独立的。

假设被删除，则不应对文档流产生影响。

<!DOCTYPE html>
<html>
<body>

<p>The Pulpit Rock is a massive cliff 604 metres (1982 feet) above Lysefjorden, opposite the Kjerag plateau, in Forsand, Ryfylke, Norway. The top of the cliff is approximately 25 by 25 metres (82 by 82 feet) square and almost flat, and is a famous tourist attraction in Norway.</p>

<figure>
  <img src="img_pulpit.jpg" tppabs="http://w3schools.com/tags/img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
</figure>

</body>
</html>

1.1.4 <figcaption> 标签

<figcaption> 标签为 <figure> 元素定义标题。

<figcaption> 元素应该被置于 <figure> 元素的第一个或最后一个子元素的位置。

提示：<figcaption> 元素被用来为 <figure> 元素定义标题。

<!DOCTYPE html>
<html>
<body>

<p>The Pulpit Rock is a massive cliff 604 metres (1982 feet) above Lysefjorden, opposite the Kjerag plateau, in Forsand, Ryfylke, Norway. The top of the cliff is approximately 25 by 25 metres (82 by 82 feet) square and almost flat, and is a famous tourist attraction in Norway.</p>

<figure>
  <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
  <figcaption>Fig.1 - A view of the pulpit rock in Norway.</figcaption>
</figure>

</body>
</html>

1.1.4 <header> 标签

<header> 标签定义文档或者文档的一部分区域的页眉。

<header> 元素应该作为介绍内容或者导航链接栏的容器。

在一个文档中。您能够定义多个 <header> 元素。

凝视：<header> 标签不能被放在 <footer>、<address> 或者还有一个 <header> 元素内部。

<!DOCTYPE html>
<html>
<body>

<article>
  <header>
    <h1>Internet Explorer 9</h1>
    <p><time pubdate datetime="2011-03-15"></time></p>
  </header>
  <p>Windows Internet Explorer 9 (abbreviated as IE9) was released to
  the  public on March 14, 2011 at 21:00 PDT.....</p>
</article>

</body>
</html>

1.1.5 <footer> 标签

<footer> 标签定义文档或者文档的一部分区域的页脚。

<footer> 元素应该包括它所包括的元素的信息。

在典型情况下。该元素会包括文档创作者的姓名、文档的版权信息、使用条款的链接、联系信息等等。

在一个文档中，您能够定义多个 <footer> 元素。

<!DOCTYPE html>
<html>
<body>

<footer>
  <p>Posted by: Hege Refsnes</p>
  <p><time pubdate datetime="2012-03-01"></time></p>
</footer>

</body>
</html>

1.1.6 <nav> 标签

<nav> 标签定义导航链接的部分。

并非全部的 HTML 文档都要使用到 <nav> 元素。

<nav> 元素仅仅是作为标注一个导航链接的区域。

在不同设备上（手机或者PC）能够制定导航链接是否显示。以适应不同屏幕的需求。

<!DOCTYPE html>
<html>
<body>

<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>

</body>
</html>

1.1.7 <section> 标签

<section> 标签定义了文档的某个区域。

比方章节、头部、底部或者文档的其它区域。

<!DOCTYPE html>
<html>
<body>

<section>
  <h1>WWF</h1>
  <p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
</section>

<section>
  <h1>WWF‘s Panda symbol</h1>
  <p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p>
</section>

</body>
</html>

1.2 多媒体标签

1.2.1 <video> 标签

<video> 标签定义视频，比方电影片段或其它视频流。

眼下，<video> 元素支持三种视频格式：MP4、WebM、Ogg。

浏览器 MP4 WebM Ogg
Internet Explorer 9+ YES NO NO
Chrome 6+ YES YES YES
Firefox 3.6+ NO YES YES
Safari 5+ YES NO NO
Opera 10.6+ NO YES YES

* MP4 = MPEG 4文件使用 H264 视频编解码器和AAC音频编解码器

* WebM = WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器

* Ogg = Ogg 文件使用 Theora 视频编解码器和 Vorbis音频编解码器

音频格式的 MIME 类型

格式 MIME-type
MP4 video/mp4
WebM video/webm
Ogg video/ogg

HTML5 中的新属性。

属性 值 描写叙述
autoplay autoplay 假设出现该属性，则视频在就绪后立即播放。
controls controls 假设出现该属性，则向用户显示控件。比方播放button。
height pixels 设置视频播放器的高度。
loop loop 假设出现该属性，则当媒介文件完毕播放后再次開始播放。
muted muted 假设出现该属性，视频的音频输出为静音。
poster URL 规定视频正在下载时显示的图像，直到用户点击播放button。
preload auto metadata none 假设出现该属性，则视频在页面载入时进行载入。并预备播放。

假设使用 “autoplay”，则忽略该属性。
src URL 要播放的视频的 URL。
width pixels 设置视频播放器的宽度。 
<video width="320" height="240" controls>
  <source src="movie.mp4"  type="video/mp4">
  <source src="movie.ogg"  type="video/ogg">
  您的浏览器不支持 HTML5 video 标签。
</video>

</body>
</html>

可是须要注意一个事情 每种浏览器支持的格式都是不一样的。

不用浏览器之间支持的格式是不同的。

有可能会造成我们的程序在不同的浏览器下不能播放。那该怎么办呢？

我们能够在 source 之间去设置格式，当我们上面的格式在该浏览器不支持的时候。系统会自己主动匹配下一种视频格式。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>视频_Video</title>
</head>
<body>
  <video controls="controls" width="600px" height="500px" autoplay="autoplay">
    <!--使用 Source 标签引用不同的视频格式，浏览器会依据第一个能正常播放的视频格式进行播放-->
    <source src="素材/视频素材/1.mp4 type="video/mp4">
    <source src="素材/视频素材/1.ogg type="video/ogg">
    <source src="素材/视频素材/1.webm type="video/webm">
  </video>
</body>
</html>

1.2.2 <audio> 标签

<audio> 标签定义声音。比方音乐或其它音频流。

眼下，<audio> 元素支持的3种文件格式：MP3、Wav、Ogg。

属性 值 描写叙述
autoplay autoplay 假设出现该属性，则音频在就绪后立即播放。
controls controls 假设出现该属性，则向用户显示控件，比方播放button。
loop loop 假设出现该属性，则每当音频结束时又一次開始播放。
preload preload 假设出现该属性。则音频在页面载入时进行载入，并预备播放。假设使用 “autoplay”，则忽略该属性。
src url 要播放的音频的 URL。

当中重点说一下咱们的 controls，假设设置了咱们的 controls，应该包括例如以下button。

- controls 效果
1 播放
2 暂停
3 定位
4 音量
5 全屏切换
6 字幕（假设可用）
7 音轨（假设可用）

不同浏览器之间支持的格式

格式 IE 9 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0
Ogg Vorbis √ √ √
MP3 √ √ √
Wav √ √ √ 
<audio controls>
  <source src="horse.ogg" >
  <source src="horse.mp3" >
您的浏览器不支持 audio 元素。

</audio>

</body>
</html>

相同的，我们的视频和音频格式相同也存在问题。就是不同之间的格式可能存在问题。

我们相同使用 Source 来去控制格式的问题。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>音频_Audio</title>
</head>
<body>
   <audio controls="controls">
      <source src="素材/音频素材/Sugar.mp3" type="audio/mp3">
      <source src="素材/音频素材/Sugar.ogg" type="audio/ogg">
      <source src="素材/音频素材/Sugar.amr" type="audio/amr">
      <source src="素材/音频素材/Sugar.wav" type="audio/wav">
      <source src="素材/音频素材/Sugar.wma" type="audio/wma">
   </audio>
</body>
</html>

1.2.3 <embed> 标签

<embed> 标签定义了一个容器，用来嵌入外部应用或者互动程序（插件）。

HTML5 中的新属性

属性 值 描写叙述
height pixels 规定嵌入内容的高度。
src URL 规定被嵌入内容的 URL。
type MIME_type 规定嵌入内容的 MIME 类型。注：MIME = Multipurpose Internet Mail Extensions。
width pixels 规定嵌入内容的宽度。 
<embed src="helloworld.swf" tppabs="http://w3schools.com/tags/helloworld.swf">

</body>
</html>

1.2.4 <mark> 标签

<mark> 标签定义带有记号的文本。

请在须要突出显示文本时使用 <mark> 标签。

<!DOCTYPE html>
<html>
<body>

<p>Do not forget to buy <mark>milk</mark> today.</p>

</body>
</html>

1.2.5 <canvas> 标签

<canvas> 标签通过脚本（一般是 JavaScript）来绘制图形（比方图表和其它图像）。

<canvas> 标签仅仅是图形容器。您必须使用脚本来绘制图形。

属性 值 描写叙述
height pixels 规定画布的高度。
width pixels 规定画布的宽度。 
<canvas id="myCanvas">Your browser does not support the HTML5 canvas tag.</canvas>

<script>
var c=document.getElementById(‘myCanvas‘);
var ctx=c.getContext(‘2d‘);
ctx.fillStyle=‘#FF0000‘;
ctx.fillRect(0,0,80,100);
</script>

</body>
</html>

1.2.6 <progress> 标签

<progress> 标签定义执行中的任务进度（进程）。

提示：请将 <progress> 标签与 JavaScript 一起使用来显示任务的进度。

凝视：<progress> 标签不适合用来表示度量衡（比如。磁盘空间使用情况或相关的查询结果）。

表示度量衡。请使用 <meter> 标签取代。

属性 值 描写叙述
max number 规定须要完毕的值。
value number 规定进程的当前值。 
Downloading progress:
<progress value="22" max="100">
</progress>

<p><strong>Note:</strong> The progress tag is not supported in Internet Explorer 9 and earlier versions.</p>

</body>
</html>

1.2.7 <meter> 标签

<meter> 标签定义度量衡。仅用于已知最大和最小值的度量。

比方：磁盘使用情况，查询结果的相关性等。

注意： <meter> 不能作为一个进度条来使用。 进度条 <progress> 标签。

属性 值 描写叙述
form form_id 规定 <meter> 元素所属的一个或多个表单。
high number 规定被界定为高的值的范围。
low number 规定被界定为低的值的范围。
max number 规定范围的最大值。
min number 规定范围的最小值。
optimum number 规定度量的最优值。
value number 必需。规定度量的当前值。 
<p>Display a gauge:</p>
<meter value="2" min="0" max="10">2 out of 10</meter><br>
<meter value="0.6">60%</meter>

<p><strong>Note:</strong> The meter tag is not supported in Internet Explorer.</p>

</body>
</html>

1.2.8 <time> 标签

<time> 标签定义公历的时间（24 小时制）或日期。时间和时区偏移是可选的。

该元素能够以机器可读的方式对日期和时间进行编码，这样。举例说。

用户代理能够把生日提醒或排定的事件加入到用户日程表中，搜索引擎也能够生成更智能的搜索结果。

属性 值 描写叙述
datetime datetime 规定日期/时间。

还有一种方式，则是由元素的内容给定日期/时间。

 
<p>We open at <time>10:00</time> every morning.</p>

<p>I have a date on <time datetime="2008-02-14">Valentines day</time>.</p>

<p>The &amp;lt;time&amp;gt; tag does not render as anything special in any of the major browsers.</p>

</body>
</html>

1.2.9 <iframe> 标签

<iframe> 标签规定一个内联框架。

一个内联框架被用来在当前 HTML 文档中嵌入还有一个文档。

提示：

您能够把须要的文本放置在 <iframe> 和 </iframe> 之间，这样就能够应对不支持 <iframe> 的浏览器。

提示：使用 CSS 为 <iframe> （包括滚动栏）定义样式。

属性 值 描写叙述
align left right top middle bottom HTML5 不支持。

HTML 4.01 已废弃。 规定怎样依据周围的元素来对齐 <iframe>。
frameborder 1 0 HTML5 不支持。规定是否显示 <iframe> 周围的边框。
height pixels 规定 <iframe> 的高度。
longdesc URL HTML5 不支持。规定一个页面，该页面包括了有关 <iframe> 的较长描写叙述。
marginheight pixels HTML5 不支持。规定 <iframe> 的顶部和底部的边距。
marginwidth pixels HTML5 不支持。规定 <iframe> 的左側和右側的边距。
name name 规定 <iframe> 的名称。
sandbox allow-forms allow-same-origin allow-scripts allow-top-navigation 对 <iframe> 的内容定义一系列额外的限制。
scrolling yes no auto HTML5 不支持。规定是否在 <iframe> 中显示滚动栏。
seamless seamless 规定 <iframe> 看起来像是父文档中的一部分。
src URL 规定在 <iframe> 中显示的文档的 URL。
srcdoc HTML_code 规定页面中的 HTML 内容显示在 <iframe> 中。
width pixels 规定 <iframe> 的宽度。

 
<iframe src="http://www.w3cschool.cc">
  <p>您的浏览器不支持  iframe 标签。</p>
</iframe>

</body>
</html>

1.2.10 总结 & HTML5 语义元素

语义= 意义. 语义元素 = 元素的意义.

什么是语义元素?

一个语义元素能够清楚的描写叙述其意义给浏览器和开发人员。

无语义 元素实例: <div> 和 <span> - 无需考虑内容.

语义元素实例: <form>, <table>, and <img> - 清楚的定义了它的内容.

HTML5中新的语义元素

很多现有站点都包括下面HTML代码： <div id="nav">, <div class="header">, 或者 <div id="footer">, 来指明导航链接, 头部, 以及尾部.

HTML5提供了新的语义元素来明白一个Web页面的不同部分:

  • <header>
  • <nav>
  • <section>
  • <article>
  • <aside>
  • <figcaption>
  • <figure>
  • <footer>

HTML5 <section> 元素

<section> 标签定义文档中的节（section、区段）。

比方章节、页眉、页脚或文档中的其它部分。

依据W3C HTML5文档: section 包括了一组内容及其标题。

HTML5 <article> 元素

<article> 标签定义独立的内容。.

<article> 元素使用实例:

  • Forum post
  • Blog post
  • News story
  • Comment

HTML5 <nav> 元素

<nav> 标签定义导航链接的部分。

<nav> 元素用于定义页面的导航链接部分区域。可是。不是全部的链接都须要包括在 <nav> 元素中!

HTML5 <aside> 元素

<aside> 标签定义页面主区域内容之外的内容（比方側边栏）。

aside 标签的内容应与主区域的内容相关.

HTML5 <header> 元素

<header>元素描写叙述了文档的头部区域

<header>元素注意用于定义内容的介绍展示区域.

在页面中你能够使用多个<header> 元素.

HTML5

元素

<footer> 元素描写叙述了文档的底部区域.

<footer> 元素应该包括它的包括元素

一个页脚通常包括文档的作者。著作权信息，链接的使用条款，联系信息等

文档中你能够使用多个 <footer>元素.

HTML5 <figure> 和 <figcaption> 元素

<figure>标签规定独立的流内容（图像、图表、照片、代码等等）。

<figure> 元素的内容应该与主内容相关。但假设被删除，则不应对文档流产生影响。

<figcaption> 标签定义 <figure> 元素的标题.

<figcaption>元素应该被置于 “figure” 元素的第一个或最后一个子元素的位置。

我们能够開始使用这些语义元素吗?

以上的元素都是块元素(除了<figcaption>).

为了让这些块及元素在全部版本号的浏览器中生效。你须要在样式表文件里设置一下属性 (下面样式代码能够让旧版本号浏览器支持本章介绍的块级元素):

header, section, footer, aside, nav, article, figure
{
display: block;
}

2. HTML5之viewport使用參数

互联网发展越来越快，各种技术层出不穷。当中各种设备的显示尺寸分辨率大小不一，这也是眼下我们前端人员比較纠结的问题：怎样一次开发，在不同的界面都能友好显示呢。

幸好HTML5中Viewport的出现了。Viewport的出现让我们开发出来的应用或页面在不同大小的设备上都能统一友好显示！

viewport 语法介绍：

<!– html document –>
 <meta name=”viewport”
content=”
height = [pixel_value | device-height] ,
 width = [pixel_value | device-width ] ,
 initial-scale = float_value ,
 minimum-scale = float_value ,
 maximum-scale = float_value ,
 user-scalable = [yes | no] ,
 target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]
”
/>

參数解释：

  • width——控制 viewport 的大小，能够指定的一个值或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
  • height——和 width 相对应，指定高度
  • target-densitydpi——一个屏幕像素密度是由屏幕分辨率决定的，通常定义为每英寸点的数量（dpi）。

    Android支持三种屏幕像素密度：低像素密度，中像素密度。高像素密度。一个低像素密度的屏幕每英寸上的像素点更少，而一个高像素密度的屏幕每英寸上的像素点很多其它。

    Android Browser和WebView默认屏幕为中像素密度。

下面是 target-densitydpi 属性的取值范围

  • device-dpi: 使用设备原本的 dpi 作为目标 dp。 不会发生默认缩放。
  • high-dpi: 使用hdpi 作为目标 dpi。 中等像素密度和低像素密度设备对应缩小。
  • medium-dpi: 使用mdpi作为目标 dpi。 高像素密度设备对应放大， 像素密度设备对应缩小。

    这是默认的target density.

  • low-dpi: 使用mdpi作为目标 dpi。中等像素密度和高像素密度设备对应放大。
  • <value>: 指定一个详细的dpi 值作为target dpi. 这个值的范围必须在70–400之间。
    <!– html document –>
     <meta name=”viewport” content=”target-densitydpi=device-dpi” />
     <meta name=”viewport” content=”target-densitydpi=high-dpi” />
     <meta name=”viewport” content=”target-densitydpi=medium-dpi” />
     <meta name=”viewport” content=”target-densitydpi=low-dpi” />
     <meta name=”viewport” content=”target-densitydpi=200″ />

为了防止Android Browser和WebView 依据不同屏幕的像素密度对你的页面进行缩放，你能够将viewport的target-densitydpi 设置为 device-dpi。

当你这么做了，页面将不会缩放。相反，页面会依据当前屏幕的像素密度进行展示。

在这样的情形下。你还须要将viewport的width定义为与设备的width匹配，这样你的页面就能够和屏幕相适应。

  • initial-scale——初始缩放。即页面初始缩放程度。

    这是一个浮点值，是页面大小的一个乘数。

    比如。假设你设置初始缩放为“1.0”。那么，web页面在展现的时候就会以target density分辨率的1:1来展现。假设你设置为“2.0”。那么这个页面就会放大为2倍。

  • maximum-scale——最大缩放。即同意的最大缩放程度。这也是一个浮点值，用以指出页面大小与屏幕大小相比的最大乘数。比如，假设你将这个值设置为“2.0”。那么这个页面与target size相比。最多能放大2倍。
  • user-scalable——用户调整缩放。即用户能否改变页面缩放程度。假设设置为yes则是同意用户对其进行改变，反之为no。

    默认值是yes。假设你将其设置为no，那么minimum-scale 和 maximum-scale都将被忽略。由于根本不可能缩放。

    全部的缩放值都必须在0.01–10的范围之内。

例：1.设置屏幕宽度为设备宽度。禁止用户手动调整缩放

<meta name=”viewport” content=”width=device-width,user-scalable=no” />

例:2.设置屏幕密度为高频，中频，低频自己主动缩放，禁止用户手动调整缩放

<meta name=”viewport” content=”width=device-width,target-densitydpi=high-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no”/>

3. 流式布局

固定布局经不起未来考验

固定像素尺寸的网页是匹配固定像素尺寸显示器的最简单办法。

但这样的方法不是一种全然兼容未来网页的制作方法。我们须要一些适应未知设备的方法。

什么是流式布局

通俗来说就是百分比布局。包括了width百分比。定位百分比，用em/rem替换px,弹性图片；

将网页从固定布局改动为百分比布局

须要牢记的公式：目标元素宽度 / 上下文元素宽度 = 百分比宽度

用em替换px

理由：

1.使用IE6的用户也能缩放文字。

2.em的实际大小是相对于其上下文的字体大小而言。

相同，目标元素尺寸 / 上下文元素尺寸 = 百分比尺寸 相同适用于将文字的像素单位转换为相对单位。

注：现代浏览器默认文字大小都是16px。因此一開始给body标签使用一下随意一条规则产生效果相同

1.  font-size:100%;
2.  font-size:16px;
3.  font-size:1em;

弹性图片

去掉图片的width,height属性。指定max-width:100%可使图片自己主动缩放到与其容器100%匹配，

此样式可应用在其它多媒体标签上。

img, object, video, embed{
width:100%;
}

给弹性图片设置阀值：

图片能够随着视口伸缩，但假设将视口拉大。图片可能超出本身大小，因此须要指定max-width:202px。设置阀值

.oscarMainImg{
    width:28.9398281%; /* 201/698 */
    max-width:202px;
}

超级全能max-width属性：还有一种限制页面无限扩张的方法是给最外层div设置max-width属性。

4. 响应式布局

讲到响应式布局，相信大家都有一定的了解，响应式布局是今年非常流行的一个设计理念，

随着移动互联网的盛行。为解决现在各式各样的浏览器分辨率以及不同移动设备的显示效果，

设计师提出了响应式布局的设计方案。

今天就和大家来讲讲响应式布局这件小事。

包括什么是响应式布局、响应式布局的长处和缺点以及响应式布局该怎么设计.

一、什么是响应式布局?

响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，

简而言之。就是一个站点能够兼容多个终端——而不是为每一个终端做一个特定的版本号。

这个概念是为解决移动互联网浏览而诞生的。

响应式布局能够为不同终端的用户提供更加舒适的界面和更好的用户体验，

并且随着眼下大屏幕移动设备的普及，用大势所趋来形容也不为过。

随着越来越多的设计师採用这个技术。我们不仅看到非常多的创新，还看到了一些成形的模式。

二、响应式布局有哪些长处和缺点?

长处：

  • 面对不同分辨率设备灵活性强
  • 能够快捷解决多设备显示适应问题

缺点：

  • 兼容各种设备工作量大。效率低下
  • 代码累赘，会出现隐藏没用的元素，载入时间加长
  • 事实上这是一种折衷性质的设计解决方式，多方面因素影响而达不到最佳效果
  • 一定程度上改变了站点原有的布局结构。会出现用户混淆的情况

三、响应式布局该怎么设计?

我们在上面了解了什么是响应式布局。那在我们的实际项目中应该怎么去设计呢?

在以往我们设计站点的时候都会受到不同浏览器的兼容性的困扰，现在还要来个不同尺寸设备。

我们该怎么淡定下来呢?

有需求就会有解决方式，呵呵，说到响应式布局，

就不得不提起CSS3中的Media Query（媒介查询），

Media Query是制作响应式布局的一个利器，使用这个工具，我们能够非常方便快捷的制造出各种丰富的有用性强的界面。

接下来就一起来深入的了解Media Query。

1、CSS中的Media Query（媒介查询）是什么?

通过不同的媒体类型和条件定义样式表规则。

媒体查询让CSS能够更精确作用于不同的媒体类型和同一媒体的不同条件。

媒体查询的大部分媒体特性都接受min和max用于表达”大于或等于”和”小与或等于”。

如：width会有min-width和max-width媒体查询能够被用在CSS中的@media规则上。

通过这个标签属性，我们能够非常方便的在不同的设备下实现丰富的界面，特别是移动设备，将会运用更加的广泛。

2、media query能够获取哪些值?

设备的宽和高device-width，device-heigth显示屏幕/触觉设备。

渲染窗体的宽和高width。heigth显示屏幕/触觉设备。

设备的手持方向，横向还是竖向orientation(portrait|lanscape)和打印机等。

（下面几种做为拓展内容：）

画面比例aspect-ratio点阵打印机等。

设备比例device-aspect-ratio-点阵打印机等。

对象颜色或颜色列表color，color-index显示屏幕。

设备的分辨率resolution。

3、语法结构及使用方法

@media 设备名 only (选取条件) not (选取条件) and(设备选取条件)，设备二{sRules}

演示样例一：在link中使用@media：

<link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px),only screen and (max-device-width: 480px)" href="link.css" rel="external nofollow" />

上面使用中only可省略。限定于计算机显示器，第一个条件max-width是指渲染界面最大宽度。第二个条件max-device-width是指设备最大宽度。

演示样例二：在样式表中内嵌@media：

@media (min-device-width:1024px) and (max-width:989px),screen and (max-device-width:480px),(max-device-width:480px) and (orientation:landscape),(min-device-width:480px) and (max-device-width:1024px) and (orientation:portrait) {srules}

在演示样例二中。设置了电脑显示器分辨率（宽度）大于或等于1024px（并且最大可见宽度为989px）。

屏宽在480px及其下面手持设备；屏宽在480px以及横向（即480尺寸平行于地面）放置的手持设备；

屏宽大于或等于480px小于1024px以及垂直放置设备的css样式。

从上面的样例能够看出。字符间以空格相连，选取条件包括在小括号内，srules为兼容设置的样式表，包括在中括号中面。

only（限定某种设备。可省略）。and（逻辑与），not（排除某种设备）为逻辑keyword，多种设备用逗号分隔，这一点继承了css基本的语法。

4、可用设备名參数：

媒体特性 值 可用媒体类型 接受min/max 简单介绍
width <length> 视觉屏幕/触摸设备 yes 定义输出设备中的页面可见区域宽度(单位一般为px)
heigth <length> 视觉屏幕/触摸设备 yes 定义输出设备中的页面可见区域高度(单位一般为px)
device-width <length> 视觉屏幕/触摸设备 yes 定义输出设备的屏幕可见宽度(单位一般为px)
device-heigth <length> 视觉屏幕/触摸设备 yes 定义输出设备的屏幕可见高度(单位一般为px)
orientation portrait landscape 位图介质类型 no 定义’height’是否大于或等于’width’。值portrait代表是，landscape代表否。即设备手持方向：portait为竖屏，landscape为横屏。

width和height。设备的分辨率尺寸，iphone6s屏幕的分辨率为980像素,

device-width、device-height。设备屏幕的物理尺寸，iphone6s屏幕的物理尺寸为375像素.

5、測试Media Queries

最后。我们须要对我们刚刚设计的Media Queries进行測试，想要在不同设备上測试Media Queries的效果，能够通过改变浏览器的宽度来检验不同尺寸屏幕下的显示效果

6、通过Media Queries实现响应式布局设计

好了，我们明白了什么是Media Query，那我们一起来运用到响应式布局的设计项目中去。

设计思路非常easy，首先先定义在标准浏览器下的固定宽度

（假如标准浏览器的分辨率为1024px，那么我们设置宽为980px），

然后用Media Query来监測浏览器的尺寸变化，当浏览器的分辨率小于1024px的时候，

则通过Media Query预设的样式表来将页面的宽度设置为百分比显示。

这样子页面的结构元素就会依据浏览器的的尺寸来进行相对应的调整。

同理，当浏览器的可视区域改变到某个值（假如为650px）的时候。

页面的结构元素依据Media Query预设的层叠样式表来进行相对应的调整。

时间： 2024-11-05 20:29:13

2016.3.16__HTML5新特性__第八天的相关文章

atitit.Windows Server 2003 2008 2012系统的新特性 attilax 总结

atitit.Windows Server 2003  2008  2012系统的新特性 attilax 总结 1. Windows Server 2008 新特性也可以归纳为4个方面. 1 2. 相比Windows Server 08,R2 2 3. win 2012  新特性 2 4. 参考 6 1. Windows Server 2008 新特性也可以归纳为4个方面. 即将发布的Windows Server 2008是企业级的应用平台,可以为CRM等企业级应用提供更好更强的支撑,其新特性也

浅尝Windows Server 2016&mdash;&mdash;Hyper-V的部分新特性

Hyper-V从Windows Server 2008到Windows Server 2012,一直到Windows Server 2016,促进了私有云和公有云两方面的进步和领先的市场地位. 之前很早翻译过Windows Server 2016的Hyper-V的简介,现在在TP中已经看到对应的功能了.   添加新硬件中,已经不见Legacy Network Adapter了,做了整合.而启动支持UEFI,支持更多的功能并提供更好的安全性.   而为了在多租户或者托管云.公有云等场景保护虚拟机,

SQL Server -&gt;&gt; 深入探讨SQL Server 2016新特性之 --- Temporal Table（历史表）

原文:SQL Server ->> 深入探讨SQL Server 2016新特性之 --- Temporal Table(历史表) 作为SQL Server 2016(CTP3.x)的另一个新特性,Temporal Table(历史表)记录了表历史上任何时间点所有的数据改动.Temporal Table其实早在ANSI SQL 2011就提出了,而SAP HANA, DB2和Oracle早已在它们的产品中加入/实现了这一特性.所以说微软其实是落后了几个竞争对手.既然在CTP3.0中加入了,相信

SharePoint 2016 的新特性概览（二）（What&#39;s New for IT Professionals in SharePoint Server 2016）

博客地址:http://blog.csdn.net/FoxDave SharePoint 2016 的新特性 三. 监测和数据(Insights and Data) 实时数据监测,包括对使用情况.存储.状况等的数据分析. 文档库中的开放文档格式(ODF),允许在文档库中创建ODF文档. 四. 云加速体验(Cloud Accelerated Experiences) 云端和本地服务器的合规性审查. 新的云搜索服务应用程序. 网站发布功能,将内网网站发布到外网. 新的工作组协作网站. 混和部署自动化

Dynamics CRM 2016 的新特性

新版本CRM (2016 with update 0.1) 发布已有几个月了,总结一下新特性,从几个方面来看: 1. 针对整合功能的新特性 (1) 增加了CRM App for Outlook. 这个是一个轻量级的CRM Email app,目前并不能完全替代 Dynamics CRM for Outlook,但是我觉得只是个时间问题,目前的区别如下(April 2016) Feature Dynamics CRM App for Outlook Dynamics CRM for Outlook

SharePoint 2016 的新特性概览（一）（What&#39;s New for IT Professionals in SharePoint Server 2016）

??博客地址:http://blog.csdn.net/FoxDave 今天看霖雨大神的转的微软最新的关于SharePoint 2016的Update,正好看到了SP2016新发布的视频,整理一下发出来,英语不是很好,也许并不是很全面,所以大家凑合看吧.地址戳这里,里面有幻灯片和视频的下载地址. 根据微软最新的Update,2016将在2016年第二季度发布,在2015年第四季度将出测试版. SharePoint 2016 的新特性 一. 管理(Management) 此部分主要讲述了Share

SQL Server 2016新特性：DROP IF EXISTS

原文:SQL Server 2016新特性:DROP IF EXISTS ?? 在我们写T-SQL要删除某个对象(表.存储过程等)时,一般会习惯先用IF语句判断该对象是否存在,然后DROP,比如: 旧版本: IF OBJECT_ID('dbo.PERSON','U') IS NOT NULL DROP TABLE PERSON IF EXISTS (SELECT * FROM sys.objects where name = 'PERSON') DROP TABLE PERSON SQL Ser

AlwaysOn 2016新特性和提升

AlwaysOn 2016新特性和提升 AlwaysOn可用性组作为SQL Server 2012的新特性被引入,它增强了数据库镜像和故障转移集群技术,提供了高可用和灾难恢复. 在SQL Server 2016中AlwaysOn有些特性的增强要求运行在Windows Server 2016上.然而,如果你仍然运行在Windows Server 2012 R2上,仍然有很多提升是可用的. AlwaysOn 2016一些新特性和增强: l 支持更多故障转移目标 l 更好的日志传输性能 l 可读副本的

xcode 4.5 new feature __ ios6 新特性

上两周看了wwdc 2012 developer session 400 - 412的视频,以下总结一下xcode4.5的新特性.(部分參考onevcat的文章,在此感谢.) @synthesize by default(属性自己主动绑定)在xcode4.4曾经,当我们想为类加入一个新的属性,一般都要相应写实例变量和相应的synthesis,可是在Xcode 4.4之后,synthesis如今会相应property自己主动生成.默认行为下,对于属性foo,当开发人员没有写相应的synthesis