CSS响应式设计_html/css_WEB-ITnose

1 
2     
...
3     
...
4 

　　指定所有的列向左浮动，间距（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  2  3  4      5      6      7 57 58 59 
60     
页头
61 
62 
63     64     
65         
66             
菜单 1
67             
菜单 2
68             
菜单 3
69             
菜单 4
70         
71     
72     73     
74         
内容
75         
响应式设计是指在不同分辨率的设备中，网页布局可以自适应的调整。这种弹性化的布局使网站在不同设备中的布局都比较合理，可以为不同终端的用户提供更加舒适的界面和更好的用户体验，其根本理念是使原本 PC 上的网站兼容手机和平板。
76         
响应式网格视图通常是 12 列，宽度为 100%，在浏览器窗口大小调整时会自动伸缩。
77     
78 
79 80 

　　使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。

　　(1)、CSS3 @media 查询

　　@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。

　　当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

　　注意：IE9+ 以及所有浏览器都支持 @media 规则。

　　CSS 语法：

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

　　你也可以针对不同的媒体使用不同 stylesheets：

　　下面的例子，如果浏览器窗口小于 600px，背景将变为浅蓝色：

 1  2  3  4      5      6      7 17 18 19 
调整浏览器尺寸，当页面的宽度小于 600 像素，背景会变为浅蓝色，否则为浅绿色。
20 21 

　　(2)、添加断点

　　在之前网格视图的例子中使用行和列来制作网页，虽然他是响应式的，但通过调整浏览器的尺寸，可以发现他在小屏幕上并不能友好的展示。通过媒体查询就可以很好的解决这个问题。我们可以在样式表中添加断点，不同的断点有不同的效果。

　　下面的例子，使用媒体查询在 768px 添加断点，当屏幕/浏览器窗口小于 768px，每一列的宽度是 100%：

  1   2   3   4       5       6       7  79  80  81 
 82     
页头
 83 
 84 
 85     
 86         
 87             
菜单 1
 88             
菜单 2
 89             
菜单 3
 90             
菜单 4
 91         
 92     
 93     
 94         
内容
 95         
响应式设计是指在不同分辨率的设备中，网页布局可以自适应的调整。这种弹性化的布局使网站在不同设备中的布局都比较合理，可以为不同终端的用户提供更加舒适的界面和更好的用户体验，其根本理念是使原本 PC 上的网站兼容手机和平板。
 96         
响应式网格视图通常是 12 列，宽度为 100%，在浏览器窗口大小调整时会自动伸缩。
 97     
 98     
 99         
100             
Viewport
101             
viewport 翻译为中文为"视区/视窗/视口"，就是指用户网页的可视区域。
102             
CSS 栅格系统
103             
栅格系统也叫做网格视图，即通过固定的格子结构，来进行设计布局网页，响应式设计就是网格视图的实现方式。
104             
媒体查询
105             
使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
106         
107     
108 
109 
110     
页脚
111 
112 113 

　　(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   2   3   4       5       6       7  95  96  97 
 98     
页头
 99 
100 
101     102     
103         
104             
菜单 1
105             
菜单 2
106             
菜单 3
107             
菜单 4
108         
109     
110     111     
112         
内容
113         
响应式设计是指在不同分辨率的设备中，网页布局可以自适应的调整。这种弹性化的布局使网站在不同设备中的布局都比较合理，可以为不同终端的用户提供更加舒适的界面和更好的用户体验，其根本理念是使原本 PC 上的网站兼容手机和平板。
114         
响应式网格视图通常是 12 列，宽度为 100%，在浏览器窗口大小调整时会自动伸缩。
115     
116     117     
118         
119             
Viewport
120             
viewport 翻译为中文为"视区/视窗/视口"，就是指用户网页的可视区域。
121             
CSS 栅格系统
122             
栅格系统也叫做网格视图，即通过固定的格子结构，来进行设计布局网页，响应式设计就是网格视图的实现方式。
123             
媒体查询
124             
使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
125         
126     
127 
128 
129     
页脚
130 
131 132 

　　注意：上面代码中，平板和桌面两组类样式是相同的，但名称不同 col- 和 col-m-，这看起来很多余，但是他们可以根据屏幕大小自动设置不同的样式，所以还是非常必要的。如下：

1 
2     
...
3     
...
4     
...
5 

　　针对桌面设备：第一和第三部分跨 3 列，中间部分跨 6 列。

　　针对平板设备：第一部分跨 3列，第二部分跨 9 列，第三部分跨 12 列。

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

　　结合 CSS 媒体查询，可以创建适应不同设备的方向（横屏 landscape、竖屏 portrait 等）的布局。

　　语法：

orientation：portrait | landscape

　　portrait：指定输出设备中的页面可见区域高度大于或等于宽度。

　　landscape：除 portrait 值情况外，都是 landscape。

　　下面的例子，如果是横屏则背景显示为浅蓝色：

 1  2  3  4      5      6      7 18 19 20 
调整浏览器尺寸，当页面的宽度大于高度时，背景会变为浅蓝色，否则为浅绿色。
21 22 

　　(1)、使用 width 属性

　　如果 width 属性设置为 100%，图片会根据上下范围实现响应式功能：

 1  2  3  4      5      6      7 13 14 15 16 
可以调整浏览器窗口，查看图片是如何扩展的。
17 18 

　　注意：上面的例子，图片会比它的原始图片大，在 Chrome 中显示如下：

　　扩大或缩小浏览器窗口，图片也会相应的调整自身大小，可以使用 max-width 属性很好的解决这个问题。

　　(2)、使用 max-width 属性

　　如果 max-width 属性设置为 100%，图片永远不会大于其原始大小：

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

　　同样的窗口大小，在 Chrome 中显示如下：

　　不管如何调整浏览器窗口大小，他始终都显示原始图片大小。

　　(3)、在网页中添加图片

　　将上面例子中的图片，添加到媒体查询为移动端优先设计的响应式网页中：

  1   2   3   4       5       6       7 100 101 102 
103     
页头
104 
105 
106     107     
108         
109             
菜单 1
110             
菜单 2
111             
菜单 3
112             
菜单 4
113         
114     
115     116     
117         
内容
118         
响应式设计是指在不同分辨率的设备中，网页布局可以自适应的调整。这种弹性化的布局使网站在不同设备中的布局都比较合理，可以为不同终端的用户提供更加舒适的界面和更好的用户体验，其根本理念是使原本 PC 上的网站兼容手机和平板。
119         
响应式网格视图通常是 12 列，宽度为 100%，在浏览器窗口大小调整时会自动伸缩。
120         121     
122     123     
124         
125             
Viewport
126             
viewport 翻译为中文为"视区/视窗/视口"，就是指用户网页的可视区域。
127             
CSS 栅格系统
128             
栅格系统也叫做网格视图，即通过固定的格子结构，来进行设计布局网页，响应式设计就是网格视图的实现方式。
129             
媒体查询
130             
使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
131         
132     
133 
134 
135     
页脚
136 
137 138 

　　(4)、背景图片

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

　　以下是三个不同的方法：

　　①、如果 background-size 属性设置为 "contain"，背景图片将按比例自适应内容区域，图片保持其比例不变：

 1  2  3  4      5      6      7 16 17 18 
调整浏览器大小查看效果。
19 
20 21 

　　在 Chrome 中显示如下：

　　②、如果 background-size 属性设置为 "100% 100%" ，背景图片将延展覆盖整个区域：

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

　　在 Chrome 中显示如下：

　　③、如果 background-size 属性设置为 "cover"，则会把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。注意该属性保持了图片的比例，因此背景图像的某些部分无法显示在背景定位区域中：

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

　　在 Chrome 中显示如下：

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

　　大尺寸图片可以显示在大屏幕上，但在小屏幕上确不能很好显示。因此没有必要在小屏幕上去加载大图片，这样很影响加载速度。所以可以使用媒体查询，根据不同的设备显示不同的图片。

 1  2  3  4      5      6      7 20 21 22 
调整浏览器宽度，背景图片在小于 400 px 时将改变。
23 24 

　　当设备宽度大于 400px 时，在 Firefox 的响应式设计视图中显示如下：

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

　　你可以使用媒体查询的 min-device-width 替代 min-width 属性，它将检测的是设备宽度而不是浏览器宽度。注意：浏览器大小重置时，图片大小不会改变。

 1 /* 设备小于 400px：*/ 2 body{ 3     background:url('https://www.gxlcms.com/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 元素

　　HTML5 的 元素可以设置多张图片，该元素用来处理响应式图片。

　　 元素类似于

　　下面的例子，使用 元素为不同的设备显示不同的图片：

 1  2  3  4      5      6      7  8  9 10     11     12     13 14 
调整浏览器宽度，背景图片在小于 400 px 时将改变。
15 16 

　　source 属性的必须的，用于定义图片资源。media 属性是可选的，对于不支持 元素的浏览器可以使用 元素来替代。

　　注意：Chrome 和 Firefox 都支持该元素，IE 浏览器不支持。

　　虽然 IE 不支持 元素，但是可以通过 Picturefill.js 插件来解决 IE 浏览器的兼容性问题。

　　Picturefill 是一个用于处理图片响应式的类库，他能够让你针对不同浏览器屏幕，加载对应的图片元素。我们可以利用插件让 IE 浏览器识别 元素。在百度搜索 picturefill.js，将文件下载下来，然后在文档中引用：

1 2 

　　在实际使用时，可以给引用文件的 script 元素添加一个 async 属性：

　　这就告诉浏览器，可以异步执行脚步，仅适用于外部脚步。

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

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

　　但是该方法只适用于 IE10+ 浏览器，IE9 仍然不支持，在 IE9 中显示如下：

　　(1)、使用 width 属性

　　如果 width 属性设置为 100%，视频播放器会根据屏幕大小自动调整比例：

 1  2  3  4      5      6 12 13 14 18 19 
调整浏览器窗口大小，查看视频播放器变化。
20 21 

　　注意：上面的例子，视频播放器根据屏幕大小自动调整比例，且可以比原始尺寸大。更多情况下我们可以使用 max-width 属性来替代。在 Chrome 中显示如下：

　　(2)、使用 max-width 属性

　　如果 max-width 属性设置为 100%，视频播放器会根据屏幕自动调整比例，但不会超过其原始大小：

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

　　同样的窗口大小，在 Chrome 中显示如下：

　　(3)、在网页中添加视频

　　将上面例子中的视频，添加到之前创建的媒体查询为移动端优先设计的响应式网页中。

　　该视频会根据 div 区域大小自动调整并占满整个 div 区域：

  1   2   3   4       5       6       7 100 101 102 
103     
页头
104 
105 
106     107     
108         
109             
菜单 1
110             
菜单 2
111             
菜单 3
112             
菜单 4
113         
114     
115     116     
117         
内容
118         
响应式设计是指在不同分辨率的设备中，网页布局可以自适应的调整。这种弹性化的布局使网站在不同设备中的布局都比较合理，可以为不同终端的用户提供更加舒适的界面和更好的用户体验，其根本理念是使原本 PC 上的网站兼容手机和平板。
119         
响应式网格视图通常是 12 列，宽度为 100%，在浏览器窗口大小调整时会自动伸缩。
120         124     
125     126     
127         
128             
Viewport
129             
viewport 翻译为中文为"视区/视窗/视口"，就是指用户网页的可视区域。
130             
CSS 栅格系统
131             
栅格系统也叫做网格视图，即通过固定的格子结构，来进行设计布局网页，响应式设计就是网格视图的实现方式。
132             
媒体查询
133             
使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
134         
135     
136 
137 
138     
页脚
139 
140 141 

　　创建响应式网页可以使用框架来完成，比如：响应式 Web 设计框架 Bootstrap。

　　Bootstrap 是基于 HTML、CSS、JsvaScript 的，它简洁灵活，使得 Web 开发更加快捷，是目前最受欢迎的前端框架。

　　Bootstrap 中的网格和之前创建响应式网页的方式是相同的，默认分为 12 列，正确的写法如下：

 1 
 2     
 3         
 4             ... 5         
 6         
 7             ... 8         
 9         
10             ...11         
12     
13 

　　使用 Bootstrap 创建响应式网页，必须理解容器（container）、行（row）和列（column）之间的层级关系。container 是网格的容器，row（.row）必须位于 container 的内部，column（如 .col-sm-4）必须位于 row 的内部，container、row、column 必须保持特定的层级结构，网格系统才能正常运行。

• < 上一篇

  div的垂直居中_html/css_WEB-ITnose

• 下一篇 >

  html、canvas、视频灰度、反色_html/css_WEB-ITnose