CSS 响应式设计

  响应式设计是依赖于不同分辨率的装备受到,网页布局好自适应之调。这种弹性化的布局要网站以不同装备受到之布局都比较合理,可以吧不同终端的用户提供更为舒适的界面和再次好的用户体验,其根本意见是要是原来
PC
上的网站兼容手机及机械。简单明了就是是得叫一个网站兼容多单极,而休是也每个终端做一个特定的本,响应式设计是动装备很快崛起下的结局,这个定义就是为着解决移动互联网而生的。大部分响应式网页都是通过媒体询问,根据不同之媒体设备所以加载不同体裁的
CSS 文件来贯彻之。

1、响应式 Web 设计 – Viewport

  (1)、什么是 Viewport?

  viewport
翻译为中文也”视区/视窗/视口”,就是据用户网页的可视区域。手机浏览器是把页面在一个虚构的
viewport 中,通常这个虚拟的 viewport
比屏幕宽,这样就算绝不管每个网页挤至不可开交粗之窗口被,这样见面损坏没有指向手机浏览器优化的网页的布局,用户可以通过移动和缩放来查阅网页的不等部分。

  (2)、**设置
Viewport**

  一个常用之针对性移动网页优化了的页面的
viewport <meta> 元素大致如下:

<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" />

  代码解析:

  width:控制
viewport 的轻重缓急,可以是指定的一个价值,比如 1920,或者是异常之价,如
device-width 为设备的宽,单位也缩放为 100% 时的 CSS 的像素。

  height:和
width 相对应,指定高度,可以是指定的一个价,比如
1080,或者是特的值,如 device-height 为装备的可观。

  initial-scale:初始缩放比例,即当页面第一不善载入是时缩放比例。

  maximum-scale:允许用户缩放到之极其深比重。

  minimum-scale:允许用户缩放到之极端小比例。

  user-scalable:用户是否足以手动缩放。

2、 响应式 Web 设计 – CSS 栅格系统

  (1)、什么是栅格系统?

  栅格系统啊称为网格视图,即透过稳定的格子结构,来展开设计布局网页,响应式设计虽是网格视图的实现方式。

  很多网页都是基于网格设计的,这证明网页是随列来布局之。使用网格视图有助于我们计划网页,这被我们往网页上加元素变的再简短。

  响应式网格视图通常是
12 列,宽度为 100%,在浏览器窗口大小调整时会自行伸缩。如下:

图片 1

  响应式设计虽是让一个网站兼容多个顶,即为一个页面设计多布局结构,分别适配不同屏幕尺寸的装置,就比如下图显示这样:

图片 2

  通过达成图,不难窥见一个页面可以拆分成基本上单章,而这些回就构成了网页的布局,根据不同的屏幕尺寸,调整这些章的排版,就足以兑现响应式设计。此外,通过对照上图备受不同装备的区块位置,当屏幕宽度较充分时,区块倾向于水平分布,而当屏幕缩小时,区块则支持于垂直堆叠。

  (2)、**开创响应式网格视图**

  首先保证有的
HTML 元素都发生 box-sizing 属性且设置也
border-box。该属性允许为恰当的主意定义适应某个区域之具体内容。当值为
border-box
时,为元素设定的幅度和可观决定了元素的边框盒。也就是说,为因素指定的旁内边距和边框都用于就设定的增幅和可观内开展绘图。通过打曾经设定的涨幅和高度分别减少边框和内边距才会取内容之小幅和可观。

  确保边距和边框包含在要素的宽窄和高度间,可以长如下代码:

1 *{
2     box-sizing:border-box;
3 }

  下面的事例,是一个大概的响应式网页,包含两列:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
 6     <title>简单的响应式网页</title>
 7 <style>
 8 *{
 9     box-sizing:border-box;
10 }
11 .header{
12     border:1px solid red;
13     padding:15px;
14 }
15 .menu{
16     width:25%;
17     float:left;
18     padding:15px;
19     border:1px solid red;
20 }
21 .main{
22     width:75%;
23     float:left;
24     padding:15px;
25     border:1px solid red;
26 }
27 </style>
28 </head>
29 <body>
30 <div class="header">
31     <h1>页头</h1>
32 </div>
33 <div class="menu">
34     <ul>
35         <li>菜单 1</li>
36         <li>菜单 2</li>
37         <li>菜单 3</li>
38         <li>菜单 4</li>
39     </ul>
40 </div>
41 <div class="main">
42     <h2>内容</h2>
43     <p>响应式设计是指在不同分辨率的设备中,网页布局可以自适应的调整。这种弹性化的布局使网站在不同设备中的布局都比较合理,可以为不同终端的用户提供更加舒适的界面和更好的用户体验,其根本理念是使原本 PC 上的网站兼容手机和平板。</p>
44     <p>响应式网格视图通常是 12 列,宽度为 100%,在浏览器窗口大小调整时会自动伸缩。</p>
45 </div>
46 </body>
47 </html>

  上例被的响应式设计仅含两排。12
列的网格系统可重好之操纵响应式网页。

  首先我们得以测算每列的百分比:100%
/ 12 列 = 8.33%,在每列中指定 class, class=”col-” 用于概念每列有几只
span:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
 6     <title>简单的响应式网页</title>
 7 <style>
 8 *{
 9     box-sizing:border-box;
10 }
11 .header{
12     border:1px solid red;
13     padding:15px;
14 }
15 /* 所有列左浮动 */
16 [class*="col-"]{
17     float:left;
18     padding:15px;
19     border:1px solid red;
20 }
21 /* 清除浮动 */
22 .row:after{
23     content:"";
24     display:block;
25     clear:both;
26 }
27 /* 每列的百分比: */
28 .col-1{width:8.33%;}
29 .col-2{width:16.66%;}
30 .col-3{width:25%;}
31 .col-4{width:33.33%;}
32 .col-5{width:41.66%;}
33 .col-6{width:50%;}
34 .col-7{width:58.33%;}
35 .col-8{width:66.66%;}
36 .col-9{width:75%;}
37 .col-10{width:83.33%;}
38 .col-11{width:91.66%;}
39 .col-12{width:100%;}
40 </style>
41 </head>
42 <body>
43 <div class="header">
44     <h1>页头</h1>
45 </div>
46 <div class="row">
47     <!-- <div class="menu"> -->
48     <div class="col-3">
49         <ul>
50             <li>菜单 1</li>
51             <li>菜单 2</li>
52             <li>菜单 3</li>
53             <li>菜单 4</li>
54         </ul>
55     </div>
56     <!-- <div class="main"> -->
57     <div class="col-9">
58         <h2>内容</h2>
59         <p>响应式设计是指在不同分辨率的设备中,网页布局可以自适应的调整。这种弹性化的布局使网站在不同设备中的布局都比较合理,可以为不同终端的用户提供更加舒适的界面和更好的用户体验,其根本理念是使原本 PC 上的网站兼容手机和平板。</p>
60         <p>响应式网格视图通常是 12 列,宽度为 100%,在浏览器窗口大小调整时会自动伸缩。</p>
61     </div>
62 </div>
63 </body>
64 </html>

  代码解析:

  每一行采取
<div> 包裹,所有列数加起来应为 12:

1 <div class="row">
2     <div class="col-3">...</div>
3     <div class="col-9">...</div>
4 </div>

  指定所有的排列于左弯,间距(padding)为
15px:

1 [class*="col-"]{
2     padding:15px;
3     border:1px solid red;
4     float:left;
5 }

  因为安装了转移,所以要破除浮动的震慑,使用 :after
伪元素来打消浮动:

1 .row:after{
2     content:"";
3     display:block;
4     clear:both;
5 }

  最后让此大概的响应式网页添加一些体和颜料,可当
Chrome 的开发者工具中要么以 Firefox
的开发者中选择响应式规划视图,调整显示设备的尺寸来查阅效果。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
 6     <title>简单的响应式网页</title>
 7 <style>
 8 *{
 9     box-sizing:border-box;
10 }
11 .header{
12     padding:15px;
13     background-color:#9933cc;
14     color:#ffffff;
15 }
16 /* 所有列左浮动 */
17 [class*="col-"]{
18     float:left;
19     padding:15px;
20 }
21 /* 清除浮动 */
22 .row:after{
23     content:"";
24     display:block;
25     clear:both;
26 }
27 /* 每列的百分比: */
28 .col-1{width:8.33%;}
29 .col-2{width:16.66%;}
30 .col-3{width:25%;}
31 .col-4{width:33.33%;}
32 .col-5{width:41.66%;}
33 .col-6{width:50%;}
34 .col-7{width:58.33%;}
35 .col-8{width:66.66%;}
36 .col-9{width:75%;}
37 .col-10{width:83.33%;}
38 .col-11{width:91.66%;}
39 .col-12{width:100%;}
40 
41 .menu ul{
42     list-style-type:none;
43     margin:0;
44     padding:0;
45 }
46 .menu li{
47     padding:8px;
48     margin-bottom:7px;
49     background-color:#33b5e5;
50     color:#ffffff;
51     box-shadow:0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
52 }
53 .menu li:hover{
54     background-color:#0099cc;
55 }
56 </style>
57 </head>
58 <body>
59 <div class="header">
60     <h1>页头</h1>
61 </div>
62 <div class="row">
63     <!-- <div class="menu"> -->
64     <div class="col-3 menu">
65         <ul>
66             <li>菜单 1</li>
67             <li>菜单 2</li>
68             <li>菜单 3</li>
69             <li>菜单 4</li>
70         </ul>
71     </div>
72     <!-- <div class="main"> -->
73     <div class="col-9">
74         <h2>内容</h2>
75         <p>响应式设计是指在不同分辨率的设备中,网页布局可以自适应的调整。这种弹性化的布局使网站在不同设备中的布局都比较合理,可以为不同终端的用户提供更加舒适的界面和更好的用户体验,其根本理念是使原本 PC 上的网站兼容手机和平板。</p>
76         <p>响应式网格视图通常是 12 列,宽度为 100%,在浏览器窗口大小调整时会自动伸缩。</p>
77     </div>
78 </div>
79 </body>
80 </html>

3、响应式 Web 设计 – 媒体询问

  使用 @media
查询,你可以对不同之传媒类型定义不同之体。

  (1)、CSS3
@media 查询

  @media
可针对不同的屏幕尺寸设置不同的样式,特别是设您得安装规划响应式的页面,@media
是雅有效之。

  当你重置浏览器大小的经过被,页面也会见因浏览器的小幅和可观重复渲染页面。

  注意:IE9+
以及有浏览器还支持 @media 规则。

  CSS
语法:

1 @media mediatype and|not|only (media feature){
2     ...
3 }

  你吧足以本着不同之传媒以不同
stylesheets:

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="style.css">

  下面的例证,如果浏览器窗口小于
600px,背景以改成浅蓝色:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
 6     <title>媒体查询</title>
 7 <style>
 8 body{
 9     background-color:lightgreen;
10 }
11 @media only screen and (max-width:600px){
12     body{
13         background-color:lightblue;
14     }
15 }
16 </style>
17 </head>
18 <body>
19 <p>调整浏览器尺寸,当页面的宽度小于 600 像素,背景会变为浅蓝色,否则为浅绿色。</p>
20 </body>
21 </html>

  (2)、添加断点

  于事先网格视图的例证中使用行和排来打造网页,虽然他是响应式的,但透过调整浏览器的尺码,可以发现他以聊屏幕及并无能够团结的示。通过媒体询问就得充分好之缓解者题材。我们好当样式表中上加断点,不同之断点有不同的功能。

  下面的例子,使用媒体询问在
768px 添加断点,当屏幕/浏览器窗口小于
768px,每一样排的宽是 100%:

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta charset="UTF-8">
  5     <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
  6     <title>添加断点</title>
  7 <style>
  8 *{
  9     box-sizing:border-box;
 10 }
 11 /* 所有列左浮动 */
 12 [class*="col-"]{
 13     float:left;
 14     padding:15px;
 15 }
 16 /* 清除浮动 */
 17 .row:after{
 18     content:"";
 19     display:block;
 20     clear:both;
 21 }
 22 .header{
 23     background-color:#9933cc;
 24     color:#ffffff;
 25     padding:15px;
 26 }
 27 .menu ul{
 28     list-style-type:none;
 29     margin:0;
 30     padding:0;
 31 }
 32 .menu li{
 33     padding:8px;
 34     margin-bottom:7px;
 35     background-color:#33b5e5;
 36     color:#ffffff;
 37     box-shadow:0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
 38 }
 39 .menu li:hover{
 40     background-color:#0099cc;
 41 }
 42 .sidebar{
 43     background-color:#33b5e5;
 44     padding:15px;
 45     color:#ffffff;
 46     text-align:center;
 47     font-size:14px;
 48     box-shadow:0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
 49 }
 50 .footer{
 51     background-color:#0099cc;
 52     color:#ffffff;
 53     text-align:center;
 54     font-size:12px;
 55     padding:15px;
 56 }
 57 
 58 /* 桌面: */
 59 .col-1{width:8.33%;}
 60 .col-2{width:16.66%;}
 61 .col-3{width:25%;}
 62 .col-4{width:33.33%;}
 63 .col-5{width:41.66%;}
 64 .col-6{width:50%;}
 65 .col-7{width:58.33%;}
 66 .col-8{width:66.66%;}
 67 .col-9{width:75%;}
 68 .col-10{width:83.33%;}
 69 .col-11{width:91.66%;}
 70 .col-12{width:100%;}
 71 
 72 @media only screen and (max-width: 768px){
 73     /* 移动设备: */
 74     [class*="col-"]{
 75         width: 100%;
 76     }
 77 }
 78 </style>
 79 </head>
 80 <body>
 81 <div class="header">
 82     <h1>页头</h1>
 83 </div>
 84 <div class="row">
 85     <div class="col-3 menu">
 86         <ul>
 87             <li>菜单 1</li>
 88             <li>菜单 2</li>
 89             <li>菜单 3</li>
 90             <li>菜单 4</li>
 91         </ul>
 92     </div>
 93     <div class="col-6">
 94         <h2>内容</h2>
 95         <p>响应式设计是指在不同分辨率的设备中,网页布局可以自适应的调整。这种弹性化的布局使网站在不同设备中的布局都比较合理,可以为不同终端的用户提供更加舒适的界面和更好的用户体验,其根本理念是使原本 PC 上的网站兼容手机和平板。</p>
 96         <p>响应式网格视图通常是 12 列,宽度为 100%,在浏览器窗口大小调整时会自动伸缩。</p>
 97     </div>
 98     <div class="col-3 right">
 99         <div class="sidebar">
100             <h2>Viewport</h2>
101             <p>viewport 翻译为中文为"视区/视窗/视口",就是指用户网页的可视区域。</p>
102             <h2>CSS 栅格系统</h2>
103             <p>栅格系统也叫做网格视图,即通过固定的格子结构,来进行设计布局网页,响应式设计就是网格视图的实现方式。</p>
104             <h2>媒体查询</h2>
105             <p>使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。</p>
106         </div>
107     </div>
108 </div>
109 <div class="footer">
110     <p>页脚</p>
111 </div>
112 </body>
113 </html>

  (3)、为活动端优先规划

  移动端优先意味着当设计桌面以及其它装备时事先考虑移动端的设计,这就代表必须对
CSS 做一些改动。

  上面的事例在屏幕小于
768px 进行体制修改,同样走端优先就是以屏幕宽度超过 768px
时修改样式。

  下面的代码,是动端优先规划:

 1 /* 移动端优先: */
 2 [class*="col-"]{
 3     width:100%;
 4 }
 5 @media only screen and (min-width: 768px){
 6     /* 桌面: */
 7     .col-1{width:8.33%;}
 8     .col-2{width:16.66%;}
 9     .col-3{width:25%;}
10     .col-4{width:33.33%;}
11     .col-5{width:41.66%;}
12     .col-6{width:50%;}
13     .col-7{width:58.33%;}
14     .col-8{width:66.66%;}
15     .col-9{width:75%;}
16     .col-10{width:83.33%;}
17     .col-11{width:91.66%;}
18     .col-12{width:100%;}
19 }

  (4)**、其他断点**

  可以依据实际的急需上加断点,同样为得以吗机械设备和活动装备安装断点。

  下面的代码,在屏幕也 600px
时加加媒体询问,并安装新的体裁(屏幕大于 600px 但小于 768px):

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta charset="UTF-8">
  5     <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
  6     <title>其他断点</title>
  7 <style>
  8 *{
  9     box-sizing:border-box;
 10 }
 11 /* 所有列左浮动 */
 12 [class*="col-"]{
 13     float:left;
 14     padding:15px;
 15 }
 16 /* 清除浮动 */
 17 .row:after{
 18     content:"";
 19     display:block;
 20     clear:both;
 21 }
 22 .header{
 23     background-color:#9933cc;
 24     color:#ffffff;
 25     padding:15px;
 26 }
 27 .menu ul{
 28     list-style-type:none;
 29     margin:0;
 30     padding:0;
 31 }
 32 .menu li{
 33     padding:8px;
 34     margin-bottom:7px;
 35     background-color:#33b5e5;
 36     color:#ffffff;
 37     box-shadow:0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
 38 }
 39 .menu li:hover{
 40     background-color:#0099cc;
 41 }
 42 .sidebar{
 43     background-color:#33b5e5;
 44     padding:15px;
 45     color:#ffffff;
 46     text-align:center;
 47     font-size:14px;
 48     box-shadow:0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
 49 }
 50 .footer{
 51     background-color:#0099cc;
 52     color:#ffffff;
 53     text-align:center;
 54     font-size:12px;
 55     padding:15px;
 56 }
 57 
 58 /* 移动端优先: */
 59 [class*="col-"]{
 60     width: 100%;
 61 }
 62 
 63 @media only screen and (min-width: 600px){
 64     /* 平板 */
 65     .col-m-1{width:8.33%;}
 66     .col-m-2{width:16.66%;}
 67     .col-m-3{width:25%;}
 68     .col-m-4{width:33.33%;}
 69     .col-m-5{width:41.66%;}
 70     .col-m-6{width:50%;}
 71     .col-m-7{width:58.33%;}
 72     .col-m-8{width:66.66%;}
 73     .col-m-9{width:75%;}
 74     .col-m-10{width:83.33%;}
 75     .col-m-11{width:91.66%;}
 76     .col-m-12{width:100%;}
 77 }
 78 
 79 @media only screen and (min-width: 768px){
 80     /* 桌面: */
 81     .col-1{width:8.33%;}
 82     .col-2{width:16.66%;}
 83     .col-3{width:25%;}
 84     .col-4{width:33.33%;}
 85     .col-5{width:41.66%;}
 86     .col-6{width:50%;}
 87     .col-7{width:58.33%;}
 88     .col-8{width:66.66%;}
 89     .col-9{width:75%;}
 90     .col-10{width:83.33%;}
 91     .col-11{width:91.66%;}
 92     .col-12{width:100%;}
 93 }
 94 </style>
 95 </head>
 96 <body>
 97 <div class="header">
 98     <h1>页头</h1>
 99 </div>
100 <div class="row">
101     <!-- <div class="col-3 menu"> -->
102     <div class="col-3 col-m-3 menu">
103         <ul>
104             <li>菜单 1</li>
105             <li>菜单 2</li>
106             <li>菜单 3</li>
107             <li>菜单 4</li>
108         </ul>
109     </div>
110     <!-- <div class="col-6"> -->
111     <div class="col-6 col-m-9">
112         <h2>内容</h2>
113         <p>响应式设计是指在不同分辨率的设备中,网页布局可以自适应的调整。这种弹性化的布局使网站在不同设备中的布局都比较合理,可以为不同终端的用户提供更加舒适的界面和更好的用户体验,其根本理念是使原本 PC 上的网站兼容手机和平板。</p>
114         <p>响应式网格视图通常是 12 列,宽度为 100%,在浏览器窗口大小调整时会自动伸缩。</p>
115     </div>
116     <!-- <div class="col-3 right"> -->
117     <div class="col-3 col-m-12 right">
118         <div class="sidebar">
119             <h2>Viewport</h2>
120             <p>viewport 翻译为中文为"视区/视窗/视口",就是指用户网页的可视区域。</p>
121             <h2>CSS 栅格系统</h2>
122             <p>栅格系统也叫做网格视图,即通过固定的格子结构,来进行设计布局网页,响应式设计就是网格视图的实现方式。</p>
123             <h2>媒体查询</h2>
124             <p>使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。</p>
125         </div>
126     </div>
127 </div>
128 <div class="footer">
129     <p>页脚</p>
130 </div>
131 </body>
132 </html>

  注意:上面代码中,平板同桌面两组类样式是一致之,但称不同
col- 和 col-m-,这看起很多余,但是她们好依据屏幕大小活动装不同的体,所以还是坏必要之。如下:

1 <div class="row">
2     <div class="col-3 col-m-3">...</div>
3     <div class="col-6 col-m-9">...</div>
4     <div class="col-3 col-m-12">...</div>
5 </div>

  针对桌面设备:第一以及老三片跨
3 列,中间部分超过 6 列。

  针对平板设备:第一部分超过
3排列,第二有些跨 9 列,第三有些跨 12 列。

  (5)、方向:横屏/竖屏

  结合 CSS
媒体询问,可以创建适应不同装备的大方向(横屏 landscape、竖屏 portrait
等)的布局。

  语法:

orientation:portrait | landscape

  portrait:指定输出设备中之页面可见区域高度过或等于宽度。

  landscape:除
portrait 值情况外,都是 landscape。

  下面的例子,如果是横屏则背景展示为浅蓝色:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
 6     <title>横屏/竖屏</title>
 7 <style>
 8 body{
 9     background-color:lightgreen;
10 }
11 
12 @media only screen and (orientation:landscape){
13     body{
14         background-color:lightblue;
15     }
16 }
17 </style>
18 </head>
19 <body>
20 <p>调整浏览器尺寸,当页面的宽度大于高度时,背景会变为浅蓝色,否则为浅绿色。</p>
21 </body>
22 </html>

4、响应式 Web 设计 – 图片

  (1)、使用
width 属性

  如果
width 属性设置也 100%,图片会冲上下范围实现响应式功能:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
 6     <title>图片</title>
 7 <style>
 8 img{
 9     width:100%;
10     height:auto;
11 }
12 </style>
13 </head>
14 <body>
15 <img src="images/xi.jpg" width="300" height="200">
16 <p>可以调整浏览器窗口,查看图片是如何扩展的。</p>
17 </body>
18 </html>

  注意:上面的事例,图片会比较她的原来图片大,在
Chrome 中显如下:

图片 3

  扩大或缩小浏览器窗口,图片也会相应的调动自我大小,可以动用
max-width 属性很好之化解这题目。

  (2)、使用
max-width 属性

  如果
max-width 属性设置也 100%,图片永远不会见超出其原大小:

1 img{
2     max-width:100%;
3     height:auto;
4 }

  同样的窗口大小,在
Chrome 中显如下:

图片 4

  不管如何调整浏览器窗口大小,他总犹显得原始图片大小。

  (3)、在网页中补充加图

  将地方例子中之图,添加到媒体询问也移动端优先规划的响应式网页遭到:

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta charset="UTF-8">
  5     <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
  6     <title>响应式图片</title>
  7 <style>
  8 *{
  9     box-sizing:border-box;
 10 }
 11 /* 所有列左浮动 */
 12 [class*="col-"]{
 13     float:left;
 14     padding:15px;
 15 }
 16 /* 清除浮动 */
 17 .row:after{
 18     content:"";
 19     display:block;
 20     clear:both;
 21 }
 22 .header{
 23     background-color:#9933cc;
 24     color:#ffffff;
 25     padding:15px;
 26 }
 27 .menu ul{
 28     list-style-type:none;
 29     margin:0;
 30     padding:0;
 31 }
 32 .menu li{
 33     padding:8px;
 34     margin-bottom:7px;
 35     background-color:#33b5e5;
 36     color:#ffffff;
 37     box-shadow:0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
 38 }
 39 .menu li:hover{
 40     background-color:#0099cc;
 41 }
 42 .sidebar{
 43     background-color:#33b5e5;
 44     padding:15px;
 45     color:#ffffff;
 46     text-align:center;
 47     font-size:14px;
 48     box-shadow:0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
 49 }
 50 .footer{
 51     background-color:#0099cc;
 52     color:#ffffff;
 53     text-align:center;
 54     font-size:12px;
 55     padding:15px;
 56 }
 57 
 58 /* 移动端优先: */
 59 [class*="col-"]{
 60     width: 100%;
 61 }
 62 
 63 @media only screen and (min-width: 600px){
 64     /* 平板 */
 65     .col-m-1{width:8.33%;}
 66     .col-m-2{width:16.66%;}
 67     .col-m-3{width:25%;}
 68     .col-m-4{width:33.33%;}
 69     .col-m-5{width:41.66%;}
 70     .col-m-6{width:50%;}
 71     .col-m-7{width:58.33%;}
 72     .col-m-8{width:66.66%;}
 73     .col-m-9{width:75%;}
 74     .col-m-10{width:83.33%;}
 75     .col-m-11{width:91.66%;}
 76     .col-m-12{width:100%;}
 77 }
 78 
 79 @media only screen and (min-width: 768px){
 80     /* 桌面: */
 81     .col-1{width:8.33%;}
 82     .col-2{width:16.66%;}
 83     .col-3{width:25%;}
 84     .col-4{width:33.33%;}
 85     .col-5{width:41.66%;}
 86     .col-6{width:50%;}
 87     .col-7{width:58.33%;}
 88     .col-8{width:66.66%;}
 89     .col-9{width:75%;}
 90     .col-10{width:83.33%;}
 91     .col-11{width:91.66%;}
 92     .col-12{width:100%;}
 93 }
 94 
 95 img{
 96     width:100%;
 97     height:auto;
 98 }
 99 </style>
100 </head>
101 <body>
102 <div class="header">
103     <h1>页头</h1>
104 </div>
105 <div class="row">
106     <!-- <div class="col-3 menu"> -->
107     <div class="col-3 col-m-3 menu">
108         <ul>
109             <li>菜单 1</li>
110             <li>菜单 2</li>
111             <li>菜单 3</li>
112             <li>菜单 4</li>
113         </ul>
114     </div>
115     <!-- <div class="col-6"> -->
116     <div class="col-6 col-m-9">
117         <h2>内容</h2>
118         <p>响应式设计是指在不同分辨率的设备中,网页布局可以自适应的调整。这种弹性化的布局使网站在不同设备中的布局都比较合理,可以为不同终端的用户提供更加舒适的界面和更好的用户体验,其根本理念是使原本 PC 上的网站兼容手机和平板。</p>
119         <p>响应式网格视图通常是 12 列,宽度为 100%,在浏览器窗口大小调整时会自动伸缩。</p>
120         <img src="images/xi.jpg" width="300" height="200">
121     </div>
122     <!-- <div class="col-3 right"> -->
123     <div class="col-3 col-m-12 right">
124         <div class="sidebar">
125             <h2>Viewport</h2>
126             <p>viewport 翻译为中文为"视区/视窗/视口",就是指用户网页的可视区域。</p>
127             <h2>CSS 栅格系统</h2>
128             <p>栅格系统也叫做网格视图,即通过固定的格子结构,来进行设计布局网页,响应式设计就是网格视图的实现方式。</p>
129             <h2>媒体查询</h2>
130             <p>使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。</p>
131         </div>
132     </div>
133 </div>
134 <div class="footer">
135     <p>页脚</p>
136 </div>
137 </body>
138 </html>

  (4)、背景图片

  背景图片可以响应调整大小要缩放。

  以下是三单不同的法子:

  ①、如果 background-size 属性设置也
“contain”,背景图片将依百分比由适应内容区域,图片保持其比例不更换:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
 6     <title>背景图片-1</title>
 7 <style>
 8 div{
 9     width:100%;
10     height:400px;
11     background:url('images/xi.jpg') no-repeat;
12     background-size:contain;
13     border:2px solid red;
14 }
15 </style>
16 </head>
17 <body>
18 <p>调整浏览器大小查看效果。</p>
19 <div></div>
20 </body>
21 </html>

  于
Chrome 中展示如下:

图片 5

  ②、如果
background-size 属性设置也 “100% 100%”
,背景图片将延展覆盖全体区域:

1 div{
2     width:100%;
3     height:400px;
4     background:url('images/xi.jpg') no-repeat;
5     background-size:100% 100%;
6     border:2px solid red;
7 }

  以
Chrome 中形如下:

图片 6

  ③、如果
background-size 属性设置为
“cover”,则会拿背景图像扩展及足够大,以要背景图像完全盖背景区域。注意该属性保持了图的比例,因此背景图像的某些部分无法显示在背景定位区域受到:

1 div{
2     width:100%;
3     height:400px;
4     background:url('images/xi.jpg') no-repeat;
5     background-size:cover;
6     border:2px solid red;
7 }

  于
Chrome 中显示如下:

图片 7

  (5)、不同装备显示不同图片

  大尺寸图片可以来得在怪屏幕及,但于聊屏幕上真正无可知杀好显示。因此无必要当有点屏幕上失去加载大图片,这样十分影响加载速度。所以可以采取媒体询问,根据不同的装置显示不同之图样。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
 6     <title>不同设备显示不同图片</title>
 7 <style>
 8 /* 设备小于 400px:*/
 9 body{
10     background:url('images/xi.jpg') no-repeat;
11 }
12 
13 /* 设备大于 400px: */
14 @media only screen and (min-width:400px){
15     body{
16        background-image: url('images/xi-big.jpg');
17     }
18 }
19 </style>
20 </head>
21 <body>
22 <p>调整浏览器宽度,背景图片在小于 400 px 时将改变。</p>
23 </body>
24 </html>

  当设备宽度超过
400px 时,在 Firefox 的响应式设计视图中显示如下:

图片 8

  当设备宽度小于
400px 时,在 Firefox 的响应式设计视图中显如下:

图片 9

  你可以使媒体询问的
min-device-width 替代 min-width
属性,它用检测的是装备宽度而无是浏览器宽度。注意:浏览器大小重置时,图片大小不会见转。

 1 /* 设备小于 400px:*/
 2 body{
 3     background:url('images/xi.jpg') no-repeat;
 4 }
 5 
 6 /* 设备大于 400px: */
 7 @media only screen and (min-device-width:400px){
 8     body{
 9        background-image: url('images/xi-big.jpg');
10     }
11 }

  (6)、HTML5
<picture> 元素

  HTML5
的 <picture> 元素可以安装多摆设图,该元素用来拍卖响应式图片。

  <picture>
元素类似于 <video> 和 <audio>
元素。可以设置不同的资源,第一单装的资源也首选使用的。

  下面的例证,使用 <picture>
元素为歧之设备显示不同的图:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
 6     <title>picture 元素</title>
 7 </head>
 8 <body>
 9 <picture>
10     <source srcset="images/xi.jpg" media="(max-width:400px)">
11     <source srcset="images/xi-big.jpg">
12     <img src="images/mo.jpg" alt="大漠" style="width:auto;">
13 </picture>
14 <p>调整浏览器宽度,背景图片在小于 400 px 时将改变。</p>
15 </body>
16 </html>

  source 属性的要的,用于定义图片资源。media
属性是可选的,对于不支持 <picture>
元素的浏览器可行使 <img> 元素来代替。

  注意:Chrome
和 Firefox 都支持该因素,IE 浏览器不支持。

  虽然
IE 不支持  <picture> 元素,但是足以经过 Picturefill.js 插件来解决
IE 浏览器的兼容性问题。

  Picturefill
是一个用于拍卖图片响应式的类库,他会被您对不同浏览器屏幕,加载对应之图片元素。我们可使用插件让
IE 浏览器识别 <picture>
元素。在百度搜索 picturefill.js,将文件下充斥下来,然后以文档中引用:

1 <head>
2 <script src="js/picturefill.js"></script>
3 <script>
4     // 通过 HTML5 shiv 方式让 IE 识别 <picture> 元素:
5     document.createElement( "picture" );
6 </script>
7 </head>

  以实际上利用时,可以为援文件之 script
元素添加一个 async 属性:

<script src="js/picturefill.js" async>

  这即告浏览器,可以异步执行脚步,仅适用于外部脚步。

  当浏览器宽度大于
400px 时,在 IE 中显示如下:

图片 10

  当浏览器宽度小于
400px 时,在 IE 中显示如下:

图片 11

  但是该法才适用于
IE10+ 浏览器,IE9 仍然未支持,在 IE9 中形如下:

图片 12

5、响应式 Web 设计 – 视频

  (1)、使用
width 属性

  如果
width 属性设置为 100%,视频播放器会基于屏幕大小活动调整比例:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>视频</title>
 6 <style>
 7 video{
 8     width:100%;
 9     height:auto;
10 }
11 </style>
12 </head>
13 <body>
14 <video width="400" controls>
15     <source src="video/如果你也听说.mp4" type="video/mp4">
16     <source src="video/如果你也听说.webm" type="video/webm">
17 </video>
18 
19 <p>调整浏览器窗口大小,查看视频播放器变化。</p>
20 </body>
21 </html>

  注意:上面的事例,视频播放器根据屏幕大小活动调整比例,且可较原始尺寸大。更多状况下我们好采用
max-width 属性来顶替。在 Chrome 中形如下:

图片 13

  (2)、使用
max-width 属性

  如果
max-width 属性设置为
100%,视频播放器会依据屏幕自动调整比例,但无会见越其老大小:

1 video{
2     max-width:100%;
3     height:auto;
4 }

  同样的窗口大小,在
Chrome 中显示如下:

图片 14

  (3)、在网页遭到补充加视频

  将上面例子中的视频,添加到事先创建的传媒询问也移动端优先规划的响应式网页遭到。

  该视频会根据
div 区域大小活动调整并占用满所有 div 区域:

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta charset="UTF-8">
  5     <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
  6     <title>响应式视频</title>
  7 <style>
  8 *{
  9     box-sizing:border-box;
 10 }
 11 /* 所有列左浮动 */
 12 [class*="col-"]{
 13     float:left;
 14     padding:15px;
 15 }
 16 /* 清除浮动 */
 17 .row:after{
 18     content:"";
 19     display:block;
 20     clear:both;
 21 }
 22 .header{
 23     background-color:#9933cc;
 24     color:#ffffff;
 25     padding:15px;
 26 }
 27 .menu ul{
 28     list-style-type:none;
 29     margin:0;
 30     padding:0;
 31 }
 32 .menu li{
 33     padding:8px;
 34     margin-bottom:7px;
 35     background-color:#33b5e5;
 36     color:#ffffff;
 37     box-shadow:0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
 38 }
 39 .menu li:hover{
 40     background-color:#0099cc;
 41 }
 42 .sidebar{
 43     background-color:#33b5e5;
 44     padding:15px;
 45     color:#ffffff;
 46     text-align:center;
 47     font-size:14px;
 48     box-shadow:0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
 49 }
 50 .footer{
 51     background-color:#0099cc;
 52     color:#ffffff;
 53     text-align:center;
 54     font-size:12px;
 55     padding:15px;
 56 }
 57 
 58 /* 移动端优先: */
 59 [class*="col-"]{
 60     width: 100%;
 61 }
 62 
 63 @media only screen and (min-width: 600px){
 64     /* 平板 */
 65     .col-m-1{width:8.33%;}
 66     .col-m-2{width:16.66%;}
 67     .col-m-3{width:25%;}
 68     .col-m-4{width:33.33%;}
 69     .col-m-5{width:41.66%;}
 70     .col-m-6{width:50%;}
 71     .col-m-7{width:58.33%;}
 72     .col-m-8{width:66.66%;}
 73     .col-m-9{width:75%;}
 74     .col-m-10{width:83.33%;}
 75     .col-m-11{width:91.66%;}
 76     .col-m-12{width:100%;}
 77 }
 78 
 79 @media only screen and (min-width: 768px){
 80     /* 桌面: */
 81     .col-1{width:8.33%;}
 82     .col-2{width:16.66%;}
 83     .col-3{width:25%;}
 84     .col-4{width:33.33%;}
 85     .col-5{width:41.66%;}
 86     .col-6{width:50%;}
 87     .col-7{width:58.33%;}
 88     .col-8{width:66.66%;}
 89     .col-9{width:75%;}
 90     .col-10{width:83.33%;}
 91     .col-11{width:91.66%;}
 92     .col-12{width:100%;}
 93 }
 94 
 95 video{
 96     width:100%;
 97     height:auto;
 98 }
 99 </style>
100 </head>
101 <body>
102 <div class="header">
103     <h1>页头</h1>
104 </div>
105 <div class="row">
106     <!-- <div class="col-3 menu"> -->
107     <div class="col-3 col-m-3 menu">
108         <ul>
109             <li>菜单 1</li>
110             <li>菜单 2</li>
111             <li>菜单 3</li>
112             <li>菜单 4</li>
113         </ul>
114     </div>
115     <!-- <div class="col-6"> -->
116     <div class="col-6 col-m-9">
117         <h2>内容</h2>
118         <p>响应式设计是指在不同分辨率的设备中,网页布局可以自适应的调整。这种弹性化的布局使网站在不同设备中的布局都比较合理,可以为不同终端的用户提供更加舒适的界面和更好的用户体验,其根本理念是使原本 PC 上的网站兼容手机和平板。</p>
119         <p>响应式网格视图通常是 12 列,宽度为 100%,在浏览器窗口大小调整时会自动伸缩。</p>
120         <video width="400" controls>
121             <source src="video/如果你也听说.mp4" type="video/mp4">
122             <source src="video/如果你也听说.webm" type="video/webm">
123         </video>
124     </div>
125     <!-- <div class="col-3 right"> -->
126     <div class="col-3 col-m-12 right">
127         <div class="sidebar">
128             <h2>Viewport</h2>
129             <p>viewport 翻译为中文为"视区/视窗/视口",就是指用户网页的可视区域。</p>
130             <h2>CSS 栅格系统</h2>
131             <p>栅格系统也叫做网格视图,即通过固定的格子结构,来进行设计布局网页,响应式设计就是网格视图的实现方式。</p>
132             <h2>媒体查询</h2>
133             <p>使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。</p>
134         </div>
135     </div>
136 </div>
137 <div class="footer">
138     <p>页脚</p>
139 </div>
140 </body>
141 </html>

6、响应式 Web 设计 – 框架

  创建响应式网页可以下框架来就,比如:响应式
Web 设计框架 Bootstrap。

  Bootstrap
是根据 HTML、CSS、JsvaScript 的,它简洁利落,使得 Web
开发尤其便捷,是眼下极被欢迎的前端框架。

  Bootstrap
中的网格和之前创建响应式网页的办法是如出一辙的,默认分为 12
列,正确的写法如下:

 1 <div class="container">
 2     <div class="row">
 3         <div class="col-sm-4">
 4             ...
 5         </div>
 6         <div class="col-sm-4">
 7             ...
 8         </div>
 9         <div class="col-sm-4">
10             ...
11         </div>
12     </div>
13 </div>

  使用
Bootstrap
创建响应式网页,必须知道容器(container)、行(row)和排(column)之间的层级关系。container
是网格的器皿,row(.row)必须放在 container 的其中,column(如
.col-sm-4)必须在 row 的中间,container、row、column
必须维持一定的层级结构,网格系统才会健康运转。

 

 

  

 

相关文章