1.响应式Web设计-Viewport

响应式布局是一个网站能够兼容多个终端——而不是为每个终端做一个特定
的版本。

(1)、什么是Viewport
viewport是用户网页的可视区域。
viewport翻译为中文可以叫做"视区"。

(2)、设置Viewport
一个常用的针对移动网页优化过的页面的viewportmeta标签大致如下：
<metaname="viewport"content="width=device-width,initial-scale=1.0">
width：控制viewport的大小，可以指定的一个值，如600，或者特殊的值，
如device-width为设备的宽度（单位为缩放为100%时的CSS的像素）。
height：和width相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次load的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放。

 

2.响应式Web设计-网格视图
(1)、什么是网格视图
很多网页都是基于网格设计的，这说明网页是按列来布局的。
使用网格视图有助于我们设计网页。这让我们向网页添加元素变的更简单。
响应式网格视图通常是12列，宽度为100%，在浏览器窗口大小调整时会自
动伸缩。

(2)、创建响应式网格视图
首先确保所有的HTML元素都有box-sizing属性且设置为border-box。
确保边距和边框包含在元素的宽度和高度间。

 

3.响应式Web设计-媒体查询
(1)、定义和使用
使用@media查询，你可以针对不同的媒体类型定义不同的样式。
@media可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设
计响应式的页面，@media是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

(2)、CSS语法
动画是使元素从一种样式逐渐变化为另一种样式的效果

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

(3)、媒体类型
值                                             描述
all                                            用于所有设备
print                                           用于打印机和打印预览
screen　　　　　　　　　　用于电脑屏幕，平板电脑，智能手机等。
speech　　　　　　　　　　应用于屏幕阅读器等发声设备

 

 

4.响应式Web设计-图片
(1)、使用width属性
如果width属性设置为100%，图片会根据上下范围实现响应式功能

(2)、使用max-width属性
如果max-width属性设置为100%,图片永远不会大于其原始大小

(3)、背景图片
背景图片可以响应调整大小或缩放。
以下是三个不同的方法：
1.如果background-size属性设置为"contain",背景图片将按比例自适应内容
区域。图片保持其比例不变

2.如果background-size属性设置为"100%100%"，背景图片将延展覆盖整个

区域

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

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

 

 

 

6.基本的布局方法——Flex布局

如果之前你接触过网页开发中的flexbox布局，基本上你可以略过这节。但有一点需要注意的是，你的小程序要求兼容
到iOS8以下版本，需要开启样式自动补全。开启样式自动补全，在“设置”—“项目设置”—勾选“上传代码时样式
自动补全”
​图4-2开发者工具开启样式自动补全
在小程序开发中，我们需要考虑各种尺寸终端设备上的适配。在传统网页开发，我们用的是盒模型，通过display:inline
|block|inline-block、position、float来实现布局，缺乏灵活性且有些适配效果难以实现。比如像下面这种常见
的信息列表，要求内容高度不确定下保持垂直居中：
​图4-3常见的信息列表排版方式
这种情况下，我们更建议用flex布局。
在开始介绍flex之前，为了表述方便，我们约定以下术语：采用flex布局的元素，简称为“容器”，在代码示例中以
container表示容器的类名。容器内的元素简称为“项目”，在代码示例中以item表示项目的类名。
​图4-4container容器和item项目
(1)、基本概念
flex的概念最早是在2009年被提出，目的是提供一种更灵活的布局模型，使容
器能通过改变里面项目的高宽、顺序，来对可用空间实现最佳的填充，方便适配不
同大小的内容区域。
在不固定高度信息的例子中，我们只需要在容器中设置以下两个属性即可实现
内容不确定下的垂直居中。
.container{
display:flex;
flex-direction:column;
justify-content:center;
}
flex不单是一个属性，它包含了一套新的属性集。属性集包括用于设置容器，
和用于设置项目两部分。
设置容器的属性有：
display:flex;
flex-direction:row（默认值）|row-reverse|column|column-reverse
flex-wrap:nowrap（默认值）|wrap|wrap-reverse
justify-content:flex-start（默认值）|flex-end|center|space-between|space-around|
space-evenly
align-items:stretch（默认值）|center|flex-end|baseline|flex-start
align-content:stretch（默认值）|flex-start|center|flex-end|space-between|space-around
|space-evenly
设置项目的属性有：
order:0（默认值）|<integer>
flex-shrink:1（默认值）|<number>
flex-grow:0（默认值）|<number>
flex-basis:auto（默认值）|<length>
flex:none|auto|@flex-grow@flex-shrink@flex-basis
align-self:auto（默认值）|flex-start|flex-end|center|baseline|stretch
在开始介绍各个属性之前，我们需要先明确一个坐标轴。默认的情况下，水平
方向的是主轴（mainaxis），垂直方向的是交叉轴（crossaxis）。
​图4-5默认情况下的主轴与交叉轴
项目是在主轴上排列，排满后在交叉轴方向换行。需要注意的是，交叉轴垂直
于主轴，它的方向取决于主轴方向。
​图4-6项目是在主轴上排列，排满后在交叉轴方向换行
接下来的例子如无特殊声明，我们都以默认情况下的坐标轴为例。
(2)、容器属性
设置容器，用于统一管理容器内项目布局，也就是管理项目的排列方式和对齐
方式。
flex-direction属性
通过设置坐标轴，来设置项目排列方向。
.container{
flex-direction:row（默认值）|row-reverse|column|column-reverse
}
row（默认值）：主轴横向，方向为从左指向右。项目沿主轴排列，从左到右
排列。
row-reverse：row的反方向。主轴横向，方向为从右指向左。项目沿主轴排列，
从右到左排列。
column：主轴纵向，方向从上指向下。项目沿主轴排列，从上到下排列。
column-reverse：column的反方向。主轴纵向，方向从下指向上。项目沿主轴
排列，从下到上排列。
​图4-7flex-direction
flex-wrap属性
设置是否允许项目多行排列，以及多行排列时换行的方向。
.container{
flex-wrap:nowrap（默认值）|wrap|wrap-reverse
}
nowrap（默认值）：不换行。如果单行内容过多，则溢出容器。
wrap：容器单行容不下所有项目时，换行排列。
wrap-reverse：容器单行容不下所有项目时，换行排列。换行方向为wrap时的反方
向。
​图4-8flex-wrap
justify-content属性
设置项目在主轴方向上对齐方式，以及分配项目之间及其周围多余的空间。
.container{
justify-content:flex-start（默认值）|flex-end|center|space-between|space-around|
space-evenly
}
flex-start（默认值）：项目对齐主轴起点，项目间不留空隙。
center：项目在主轴上居中排列，项目间不留空隙。主轴上第一个项目离主轴
起点距离等于最后一个项目离主轴终点距离。
flex-end：项目对齐主轴终点，项目间不留空隙。
space-between：项目间间距相等，第一个项目离主轴起点和最后一个项目离主轴终
点距离为0。
space-around：与space-between相似。不同点为，第一个项目离主轴起点和最后一
个项目离主轴终点距离为中间项目间间距的一半。
space-evenly：项目间间距、第一个项目离主轴起点和最后一个项目离主轴终点
距离等于项目间间距。
​图4-9justify-content
align-items属性
设置项目在行中的对齐方式。
.container{
align-items:stretch（默认值）|flex-start|center|flex-end|baseline
}
stretch（默认值）：项目拉伸至填满行高。
flex-start：项目顶部与行起点对齐。
center：项目在行中居中对齐。
flex-end：项目底部与行终点对齐。
baseline：项目的第一行文字的基线对齐。。
​图4-10align-items
align-content属性
多行排列时，设置行在交叉轴方向上的对齐方式，以及分配行之间及其周围多
余的空间。
.container{
align-content:stretch（默认值）|flex-start|center|flex-end|space-between
|space-around|space-evenly
}
stretch（默认值）：当未设置项目尺寸，将各行中的项目拉伸至填满交叉轴。
当设置了项目尺寸，项目尺寸不变，项目行拉伸至填满交叉轴。
flex-start：首行在交叉轴起点开始排列，行间不留间距。
center：行在交叉轴中点排列，行间不留间距，首行离交叉轴起点和尾行离交
叉轴终点距离相等。
flex-end：尾行在交叉轴终点开始排列，行间不留间距。
space-between：行与行间距相等，首行离交叉轴起点和尾行离交叉轴终点距离为0。
space-around：行与行间距相等，首行离交叉轴起点和尾行离交叉轴终点距离为行
与行间间距的一半。
space-evenly：行间间距、以及首行离交叉轴起点和尾行离交叉轴终点距离相等。
​图4-11align-content
(3)、项目属性
设置项目，用于设置项目的尺寸、位置，以及对项目的对齐方式做特殊设置。
order属性
设置项目沿主轴方向上的排列顺序，数值越小，排列越靠前。属性值为整数，
默认是0。
.item{
order:0（默认值）|<integer>
}
​图4-12order
flex-shrink属性
当项目在主轴方向上溢出时，通过设置项目收缩因子来压缩项目适应容器。属
性值为项目的收缩因子，属性值取非负数。
.item{
flex-shrink:1（默认值）|<number>
}
.item1{
width:120px;
flex-shrink:2;
}
.item2{
width:150px;
flex-shrink:3;
}
.item3{//项目3未设置flex-shrink，默认flex-shrink值为1
width:180px;
}
为了加深理解，我们举个例子：
一个宽度为400px的容器，里面的三个项目width分别为120px，150px，180px。
分别对这项目1和项目2设置flex-shrink值为2和3。
.container{
display:flex;
width:400px;//容器宽度为400px
}
在这个例子中，项目溢出400-(120+150+180)=-50px。计算压缩量时总权重
为各个项目的宽度乘以flex-shrink的总和，这个例子压缩总权重为120*2+150*3+
180*1=870。各个项目压缩空间大小为总溢出空间乘以项目宽度乘以flex-shrink除
以总权重：
item1的最终宽度为：120-50*120*2/870≈106px
item2的最终宽度为：150-50*150*3/870≈124px
item3的最终宽度为：180-50*180*1/870≈169px
其中计算时候值如果为小数，则向下取整。
​图4-13flex-shrink
需要注意一点，当项目的压缩因子相加小于1时，参与计算的溢出空间不等于
完整的溢出空间。在上面例子的基础上，我们改变各个项目的flex-shrink。
.container{
display:flex;
width:400px;//容器宽度为400px
}
.item1{
width:120px;
flex-shrink:0.1;
}
.item2{
width:150px;
flex-shrink:0.2;
}
.item3{
width:180px;
flex-shrink:0.3;
}
总权重为：120*0.1+150*0.2+180*0.3=96。参与计算的溢出空间不再是
50px，而是50*(0.1+0.2+0.3)/1=30：
item1的最终宽度为：120-30*120*0.1/96≈116px
item2的最终宽度为：150-30*150*0.2/96≈140px
item3的最终宽度为：180-30*180*0.3/96≈163px
flex-grow属性
当项目在主轴方向上还有剩余空间时，通过设置项目扩张因子进行剩余空间的
分配。属性值为项目的扩张因子，属性值取非负数。
.item{
flex-grow:0（默认值）|<number>
}
为了加深理解，我们举个例子：
一个宽度为400px的容器，里面的三个项目width分别为80px，120px，140px。
分别对这项目1和项目2设置flex-grow值为3和1。
.container{
display:flex;
width:400px;//容器宽度为400px
}
.item1{
width:80px;
flex-grow:3;
}
.item2{
width:120px;
flex-grow:1;
}
.item3{//项目3未设置flex-grow，默认flex-grow值为0
width:140px;
}
在这个例子中，容器的剩余空间为400-(80+120+140)=60px。剩余空间按60
/(3+1+0)=15px进行分配：
item1的最终宽度为：80+(15*3)=125px
item2的最终宽度为：120+(15*1)=135px
item3的最终宽度为：140+(15*0)=140px
​图4-14flex-grow
需要注意一点，当项目的扩张因子相加小于1时，剩余空间按除以1进行分配。
在上面例子的基础上，我们改变各个项目的flex-grow。
.container{
display:flex;
width:400px;//容器宽度为400px
}
.item1{
width:50px;
flex-grow:0.1;
}
.item2{
width:80px;
flex-grow:0.3;
}
.item3{
width:110px;
flex-grow:0.2;
}
在这个例子中，容器的剩余空间为400-(50+80+110)=160px。由于项目的
flex-grow相加0.1+0.3+0.2=0.6小于1，剩余空间按160/1=160px划分。例子中
的项目宽度分别为：
item1的最终宽度为：50+(160*0.1)=66px
item2的最终宽度为：80+(160*0.3)=128px
item3的最终宽度为：110+(160*0.2)=142px
flex-basis属性
当容器设置flex-direction为row或row-reverse时，flex-basis和width同时存在，
flex-basis优先级高于width，也就是此时flex-basis代替项目的width属性。
当容器设置flex-direction为column或column-reverse时，flex-basis和height
同时存在，flex-basis优先级高于height，也就是此时flex-basis代替项目的height
属性。
需要注意的是，当flex-basis和width（或height），其中一个属性值为auto时，
非auto的优先级更高。
.item{
flex-basis:auto（默认值）|<number>px
}
​图4-15flex-basis
flex属性
是flex-grow，flex-shrink，flex-basis的简写方式。值设置为none，等价于00auto。
值设置为auto，等价于11auto。
.item{
flex:none|auto|@flex-grow@flex-shrink@flex-basis
}
align-self属性
设置项目在行中交叉轴方向上的对齐方式，用于覆盖容器的align-items，这么
做可以对项目的对齐方式做特殊处理。默认属性值为auto，继承容器的align-items
值，当容器没有设置align-items时，属性值为stretch。
.item{
align-self:auto（默认值）|flex-start|center|flex-end|baseline|stretch
}