第一章 响应式布局概述
响应式布局等于流动网格布局,而自适应布局等于使用固定分割点来进行布局。自适应布局给了你更多设计的空间,因为你只用考虑几种不同的状态。而在响应式布局中你却得考虑上百种不同的状态。虽然绝大部分状态差异较小,但仍然也算做差异。它使得把握设计最终效果变得更难,同样让响应式布局更加的难以测试和预测。但同时说难,这也算是响应式布局美的所在。在考虑到表层级别不确定因素的过程中,你也会因此更好的掌握一些基础知识。当然,要做到精确到像素级别的去预测设943*684像素视区里的样子是很难的,但是你至少可以很轻松的确定它是能够正常工作的,因为页面的基本特性和布局结构都是根据语义结构来部署的。
第二章 响应式布局的实现方案
0x01. 设置 Meta 标签
在网页头部标签中添加:
1 | <meta name="viewport" content="width=device-width, initial-scale=1"> |
0x02.媒体查询
CSS3媒体查询可以让我们针对不同的媒体类型定义不同的样式,当重置浏览器窗口大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。
如何确定媒体查询的分割点也是一个开发中会遇到的问题,不同品牌和型号的设备屏幕分辨率一般都不一样。
如果我们选择600px
,900px
,1200px
,1800px
作为分割点,可以适配到常见的14个机型:
这只是其中的一种分割方案,我们还可以这样划分成:480px
,800px
,1400px
,1400px
作为曾经典型的响应式布局框架,Bootstrap是怎么进行断点的呢?
上面的分割方案不一定满足项目中的实际需求,我们可以再根据实际情况增加新的分割点。
注:移动端优先首先使用的是min-width
,PC端优先使用的max-width
。
移动优先:
1 | /* iphone6 7 8 */ |
PC优先:
1 | /* pc width > 1024px */ |
0x03.百分比布局
通过百分比单位,可以使得浏览器中组件的宽和高随着浏览器的高度的变化而变化,从而实现响应式的效果。CSS3支持最大最小高,可以将百分比和max(min)
一起结合使用来定义元素在不同设备下的宽高。
1 | /* pc width > 1100px */ |
注意:子元素的height
或width
中使用百分比,是相对于子元素的直接父元素,width
相对于父元素的width
,height
相对于父元素的height
;子元素的top
和bottom
如果设置百分比,则相对于直接非static
定位(默认定位)的父元素的高度,同样子元素的left
和right
如果设置百分比,则相对于直接非static
定位(默认定位的)父元素的宽度;子元素的padding
如果设置百分比,不论是垂直方向或者是水平方向,都相对于直接父亲元素的width
,而与父元素的height
无关。跟padding
一样,margin
也是如此。子元素的margin
如果设置成百分比,不论是垂直方向还是水平方向,都相对于直接父元素的width
;border-radius
不一样,如果设置border-radius
为百分比,则是相对于自身的宽度,除了border-radius
外,还有比如translate
、background-size
等都是相对于自身。
0x04.rem布局
rem布局的本质是等比缩放,一般是基于宽度。rem是弹性布局的一种实现方式。
rem可以做到100%的还原度,但rem的制作成本也更大。
0x05.视口单位
CSS3中引入了一个新的单位vw/vh
,与视图窗口有关,vw
表示相对于视图窗口的宽度,vh
表示相对于视图窗口高度,除了vw
和vh
外,还有vmin
和vmax
两个相关的单位。
0x06.图片响应式
1.大小自适应,能够保证图片在不同的屏幕分辨率下出现压缩、拉伸的情况;
2.根据不同的屏幕分辨率和设备像素比来尽可能选择高分辨率的图片,可以减少网络带宽。
1 | /* 使用max-width */ |
第三章 示例
0x01.示例1
1 |
|
0x02.示例2
1 |
|
0x03.示例3
HTML 代码:
1 |
|
subbar.css 代码:
1 | .subbar{ |
subbar-large.css 代码:
1 | .subbar{ |
iconfont.css 代码:
1 | @font-face {font-family: "iconfont"; |
##参考B站视频BV1r64y1T7J8 UP @千锋教育