任务2 实现响应式布局_Bootstrap与移动应用开发-QQ阅读男生历史网

上QQ阅读APP看书，第一时间看更新

任务2 实现响应式布局

使用小屏幕设备（如平板电脑、智能手机）上网正成为趋势。一个不争的事实是，使用小屏幕设备上网的人数正以前所未有的速度增长。与此同时，27英寸（68.58cm）和30英寸（76.2cm）的大显示器也在快速普及。上网设备之间的尺寸差距与日俱增。

大家可能会觉得弹性布局就可以让网页适应不同浏览器的大小。其实不然，小屏设备上的网页并非把大屏网页压缩就可以完成，在小屏网页上必然会对一些网页内容进行舍弃，一些网页元素的样式也会有所变化，这时候应该怎样去布局呢？接下来学习的响应式网页设计，它能制作出可以适配不同设备的网页。

1.2.1 响应式网页设计

响应式网页设计（Responsive，RWD Web Design）由伊桑·马科特（Ethan Marcotte）提出，他在A List Apart上发表了一篇开创性的文章，将三种已有的开发技术（弹性布局、弹性图片、媒体和媒体查询）整合起来，并命名为响应式网页设计。这个术语还有一些其他叫法，如流布局、自适应布局、跨设备设计以及弹性设计。

图1.21是响应式网页设计的一个很典型的应用，只需写一套网页代码就能适应于不同的终端。不过仔细观察会发现，这个网页在台式机、平板电脑和手机上显示的内容并非一模一样。在屏幕小的设备上只显示网页的主要框架内容。那些装饰性的、可有可无的元素就不再显示。要怎样才能实现这样的效果呢？媒体查询是实现这些效果的最强大的工具，下面就来学习一下媒体查询的相关知识。

图1.21　网页中常见的响应式布局页面

1.2.2 媒体查询

媒体查询是向不同设备提供不同样式的一种不错选择，它为每种类型的用户提供最佳的体验效果。要使用媒体查询来制作网页，首先需要学习三个属性：媒体类型、媒体特性、关键词。先了解一下媒体类型有哪些？

1. 媒体类型

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

在CSS3中常遇到的媒体类型有All（全部）、Screen（屏幕）、Print（页面打印或打印预览模式）三种。W3C共列出10种媒体类型，如表1-1所示。

表1-1　媒体类型

企业中最常用的媒体类型就是Screen、All、Print三种。媒体类型的常用引入方式有两种。

（1）@media方式

@media是CSS3中新引入的一个特性，称为媒体查询。

@media 媒体类型｛ 
 选择器｛ / *样式代码写在这里…* /｝ 
｝

（2）link方法

link方法就是在<link/>标签引用样式的时候，通过link标签中的media属性来指定不同的媒体类型。

<link  rel="stylesheet"  href="style1.css"  media="媒体类型"/>

说明

除了@media和link外，还可以使用@import、xml等方式来引入媒体类型，但这两种方式在企业中使用得不多，所以就不再讲解，感兴趣的读者可以查阅相关的文档了解。

2. 媒体特性

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

W3C共列出13种CSS3中常用的媒体特性，常用的如表1-2所示。

表1-2　常用的媒体特性

注意

到目前为止，CSS3媒体特性得到了众多浏览器的支持，除了IE6～IE8浏览器之外。还有一点与众不同的是，媒体特性不需要像其他CSS3属性那样在不同的浏览器中使用时添加前缀。

媒体特性能在不同的条件下使用不同的样式，使页面在不同终端设备下达到不同的渲染效果。

语法

@media  媒体类型  and  （媒体特性）｛ CSS样式 ｝

使用媒体特性时必须要使用@media开头，然后指定媒体类型，最后指定媒体特性。媒体特性的书写方式和样式的书写方式非常相似，例如：

(max-width:520px

从表1-1和表1-2中了解了常用的媒体类型和媒体特性，将它们组合就构成了不同的CSS集合。但与CSS属性不同的是，媒体特性是通过min/max来表示大于、等于或小于等逻辑判断，而不是只用小于（<）和大于（>）这样的符号来判断。

3. 关键词

媒体特性有的时候不只一条，当出现多个条件并存时就需要通过关键词连接。

（1）and关键词，表示同时满足这两者时生效。如：

@media sreen and(max-width:1200px) ｛样式代码…｝

表示样式代码将被使用在计算机显示器和屏幕小于1200px的所有设备中。

（2）only关键词，用来指定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。only很多时候用来对不支持媒体特性却支持媒体类型的设备隐藏样式表。例如，IE8能成功解读媒体类型，却无法解读and后面的媒体特性语句，就会连带媒体类型一起忽略，为了让不识别媒体特性的浏览器依然能够识别媒体类型，可以使用only关键字。如：

<link  rel="stylesheet"  href="style1.css"   media="only screen and(max-width:500px)"/>

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

@media  not  print and(max-width:1200px)｛样式代码…｝

表示样式代码将被使用在除打印机设备和屏幕小于1200px的所有设备中。

4. 媒体查询的使用

在使用媒体查询制作网页的时候有些地方需要注意一下。

（1）遇到冲突时的机制

<link rel="stylesheet" href="styleA.css" media="screen and (min-width: 800px)"> 
<link rel="stylesheet" href="styleB.css" media="screen and (min-width: 600px) and (max-width: 800px)"> 
<link rel="stylesheet" href="styleC.css" media="screen and (max-width: 600px)">

上面的代码将设备分成三种，分别是计算机的屏幕宽度大于800px时，应用样式styleA，宽度在600px到800px之间时应用样式styleB，宽度小于600px时应用样式styleC。若宽度正好等于800px该应用哪个样式呢？是样式styleB。因为前两条表达式都成立，按照CSS的默认优先级规则，后者覆盖了前者。

因此，为了避免产生冲突，这个例子正常情况下应该这样写：

<link rel="stylesheet" href="styleA.css" media="screen"> 
<link rel="stylesheet" href="styleB.css" media="screen and (max-width: 800px)"> 
<link rel="stylesheet" href="styleC.css" media="screen and (max-width: 600px)">

（2）设置主要断点

主要断点简单的理解就是设备宽度的临界点。在媒体特性中，min-width和max-width对应的属性值就是响应式设计中的断点值。使用主要断点创建媒体查询的条件，每个断点会对应调用一个样式文件（或者样式代码）。

常见的断点值有320px、480px、640px、768px、1024px等。

了解了关于媒体查询的三个属性后，下面来制作一个简单的响应式网页。具体如示例3所示。

示例3

<!--省略部分HTML代码--> 
<div class="box"> 
    <h2>热门活动<strong>更多</strong></h2> 
    <ul class="list"> 
        <li> 
            <img src="image/img1.png" alt=""/> 
            <p>推荐活动 | 原创音乐现金榜T榜</p> 
        </li> 
        <li> 
            <img src="image/img2.png" alt=""/> 
            <p>推荐节目|《TAImusic》爆笑来袭</p> 
        </li> 
         <!--省略部分HTML代码--> 
    </ul> 
</div>

CSS关键代码如下。

/ *大于1024px * / 
@media all and (min-width:1024px)｛ 
    .box｛ 
        width: 1024px; 
        padding: 30px; 
        margin: 10px auto 0; 
        background: red; 
    ｝ 
    h2｛ font-size: 28px;  ｝ 
    h2 strong｛ 
        font-size: 14px; 
        color: #5b666b; 
        float: right; 
        margin-right: 30px; 
    ｝ 
    .list｛ 
           margin-top: 30px; 
           display: flex; 
           justify-content: space-around; 
    ｝ 
    .list li img｛ width: 90%;  ｝ 
    .list li p｛ font-size: 12px;  ｝ 
｝ 
/ *640px到1023px之间 * / 
@media all and (min-width:640px) and (max-width:1023px)｛ 
    .box｛ 
        width: 640px; 
        padding: 24px; 
        margin: 10px auto 0; 
        background: pink; 
        display: flex; 
        flex-direction: column; 
    ｝ 
    h2｛ font-size: 20px;   ｝ 
    h2 strong｛ 
        font-size: 16px; 
        color: #5b666b; 
        float: right; 
        margin-right: 24px; 
    ｝ 
    .list｛ 
        margin-top: 30px; 
        display: flex; 
        flex-wrap: wrap; 
    ｝ 
    .list li img｛  width: 90%;  ｝ 
    .list li p｛ font-size: 14px; ｝ 
｝ 
/ *320px到639px之间 * / 
@media all and (min-width:320px) and (max-width:639px) 
    .box｛ 
        width: 320px; 
        padding: 20px; 
        margin: 10px auto 0; 
        background: yellow; 
        display: flex; 
        flex-direction: column; 
    ｝ 
    h2｛  font-size: 22px;  ｝ 
    h2 strong｛ 
        font-size: 18px; 
        color: #5b666b; 
        float: right; 
        margin-right: 20px; 
    ｝ 
    .list｛ 
           margin-top: 30px; 
           display: flex; 
           flex-wrap: wrap; 
           justify-content: center; 
    ｝ 
    .list li img｛ width: 100%;  ｝ 
    .list li p｛ font-size: 16px; ｝ 
｝ 
 
｝

浏览器宽度大于1024 px时的显示效果如图1.22所示。