移动端开发

一、流式布局

（一）、移动端

移动端浏览器兼容，处理Webkit内核的浏览器即可
移动端的手机屏幕尺寸非常多，但是不必重点关注
谷歌浏览器可以进行移动端调试

（二）、视口

视口是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口

1.布局视口 layout viewport

一般移动设备的浏览器都默认设置了一个布局视口，用于早期的PC端页面在手机上显示的问题
iOS，Android基本都将这个视口的分辨率设置为980px，所以PC上的页面大多数都是能在手机上呈现的，只不过元素看起来很小，一般默认可以通过手机缩放网页

2.视觉视口 visual viewport

它是用户正在看到的网站的区域，我们可以通过缩放去操作视觉视口，但不会影响布局，布局视口仍保持原来的宽度

3.理想视口 ideal viewport

理想视口对设备来讲，是对理想的视口尺寸
需要手动添加meta视口标签通知浏览器操作
meta视口标签的主要目的是布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们的布局的视口就多宽

4.meta视口标签

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

属性	说明
width	宽度设置的是viewport宽度，可以设置device-width特殊值
initial-scale	初始缩放比，大于0的数字
maximum-scale	最大缩放比，大于0的数字
minimum-scale	最小缩放比，大于0的数字
user-scalable	用户是否可以缩放，yes或no(1或0)

5.标准的viewport设置

视口宽度和设备保持一致
视口默认缩放比例1.0
不允许用户自行缩放
最大缩放比1.0
最小缩放比1.0

（三）、二倍图

1.物理像素和物理像素比

物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的PC端页面，1px等于1物理像素，但是在移动端开发时的1px不一定等于1物理像素
1px的能显示的物理像素点的个数，称为物理像素比或者屏幕像素比

2.多倍图

对于一张50pxX 50px的图片在手机的Retina屏中打开，按照刚才的物理像素比会放大倍数，这样会造成图片模糊
在标准的viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题，通常使用二倍图。在设置背景图片时，要注意缩放的问题。
需要50pxX50px（CSS像素）的图片但是直接放到iph8里会放大两倍，就会模糊采取措施是放一个100pxX100px的图片，然后手动把图片缩小为50pxX50px，我们准备的图片比实际需要的大两倍，这种方式就是二倍图

3.背景缩放 background-size

background-size 属性规定背景图像的尺寸

值	描述
length	设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。
percentage	以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。
cover	把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。不会改变比例
contain	把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。当宽度或者高度铺满盒子就不会再继续拉伸，可能会存在一定空白

4.多倍图切图 cutterman

选择IOS或者Android然后再选择倍数

@3X 三倍图
@2X 二倍图
@1X 一倍图

5.二倍精灵图

使用步骤
1.首先在PS里将精灵图缩小一半
2.然后再测量所选取的部分
3.最后将精灵图缩小一半background-size:50%;

（四）、移动端开发方案选择

1.移动端主流方案

移动端主流方案分类：单独制作移动页面、响应式页面兼容移动端

2.单独制作移动页面

单独制作移动页面：通常在网址域名前面加m(mobile)可以打开移动设备。通过判断设备，如果是移动设备打开，则会跳到移动端页面

3.响应式页面兼容移动端

响应式页面兼容移动端：兼容PC端和移动端
缺点：制作麻烦，需要花费很大的精力去调试兼容性的问题

（五）、移动端技术解决方案

1.移动端浏览器

移动端浏览器基本以Webkit内核为主，因此我们就需要考虑Webkit兼容性的问题，我们可以放心使用H5标签和CSS3样式，同时浏览器私有前缀我们只需要添加webkit即可

2.CSS初始化

移动端推荐使用normalize.css/
官方网址：http://necolas.github.io/normalize.css

3.特殊样式

a {
    /* 去除点击高亮 */
    -webkit-tap-highlight-color: transparent;
}

input {
    /* 去除表单默认外观 */
    -webkit-appearance: none;
}

img,
a {
    /* 禁止长按页面时弹出菜单 */
    -webkit-touch-callout: none;
}

（六）、移动端常见布局-流式布局

移动端技术选型
单独制作移动页面：流式布局，flex弹性布局，less+rem+媒体查询布局、混合布局
响应式页面兼容移动端：媒体查询，bookstarp

流式布局：就是百分比布局，也称为像素布局。将盒子的宽度设置成百分比，盒子宽的根据屏幕宽度进行伸缩，不受固定像素的限制，内容向两侧填充。

为保证布局内容可以设置
max-width：最大宽度
max-height：最大高度
min-width：最小宽度
min-height：最小高度

二、弹性布局

（一）、布局原理

弹性布局flex是flexible box的缩写，用来为盒子模型提供最大的灵活性，任何一个容器都可以指定为flex布局，通过给父盒子flex属性达到控制子盒子的位置和排列方式的目的

采用flex布局的元素称为flex容器，它的所有子元素自动成为成员，称为flex项目

PS：
1.当为父元素指定为flex布局后，子元素的float、clear、vertical-align属性将失效
2.伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局

（二）、flex布局父项常见属性

1.常见父项属性

属性	描述
flex-direction	设置主轴的方向
justify-content	设置主轴上的子元素排列方式
flex-wrap	设置子元素是否换行
align-items	设置侧轴上的子元素的排列方式（单行）
align-content	设置侧轴上的子元素的排列方式（多行）
flex-flow	复合属性，相当于同时设置flex-dirextion和flex-wrap

2.flex-direction

1)主轴和侧轴

在flex布局中，分为主轴和侧轴两个方向，同样的叫法：行和列，X轴和Y轴

默认的：主轴水平向右，侧轴垂直向下

2）属性值

flex-direction属性决定了主轴的方向（项目的排列方向），但是主轴和侧轴是会变化的，由flex-direction指定主轴的方向，剩下的就是侧轴，我们的子元素就是跟着主轴来排列的

属性	描述
row	默认值，从左到右
row-reverse	从右到左
column	从上到下
column-reverse	从下到上

div {
    /* 给父元素添加flex属性控制子元素的排列 */
    display: flex;
    /* 默认的主轴是从左到右 元素根据主轴排列*/
    /* flex-direction: row; */
    /* 设置主轴为从右到左 */
    /* flex-direction: row-reverse; */
    /* 设置主轴为从上到下 */
    /* flex-direction: column; */
    /* 设置主轴为从下到上 */
    flex-direction: column-reverse;
    width: 80vw;
    height: 80vh;
    margin: 10%;
    background-color: rgb(121, 219, 60);
}

3.justify-content

justify-content属性设置了项目在主轴上的排列方式，在定义项目排列方式之前一定要先确定主轴

值	描述
flex-start	默认值，从头开始，如果主轴是X轴则从左向右
flex-end	从尾部开始排列
center	在主轴上居中对齐
space-around	平分剩余空间，分配的空间会叠加
space-between	先两边贴边，剩余项目再平分剩余空间

div {
    /* 给父元素添加flex属性控制子元素的排列 */
    display: flex;
    /* 默认的主轴是从左到右 元素根据主轴排列*/
    flex-direction: row;
    /* 默认值，从头开始，如果主轴是X轴则从左向右 */
    /* justify-content: start; */
    /* 从尾部开始排列 */
    /* justify-content: end; */
    /* 在主轴上居中对齐 */
    /* justify-content: center; */
    /* 平分剩余空间，分配的空间会叠加 */
    /* justify-content: space-around; */
    /* 先两边贴边，剩余项目再平分剩余空间 */
    justify-content: space-between;
    width: 80vw;
    height: 80vh;
    margin: 10%;
    background-color: rgb(121, 219, 60);
}

4.flex-wrap

flex-wrap属性设置项目是否换行，默认是不换行的，当项目大小超出容器时，会强制缩小项目大小，使得在一行显示

值	描述
nowrap	默认值，不换行
wrap	换行

div {
    /* 给父元素添加flex属性控制子元素的排列 */
    display: flex;
    /* 默认的主轴是从左到右 元素根据主轴排列*/
    flex-direction: row;
    /* 默认值，从头开始，如果主轴是X轴则从左向右 */
    justify-content: start;
    /* flex-wrap属性定义项目是否换行，默认是不换行的，
    当项目大小超出容器时，会强制缩小项目大小，使得
    在一行显示 */
    /* flex-wrap: nowrap; */
    /* 定义项目换行 */
    flex-wrap: wrap;
    width: 80vw;
    height: 80vh;
    margin: 10%;
    background-color: rgb(121, 219, 60);
}

5.align-items

align-items设置侧轴的单行项目的排列方式

值	描述
flex-start	从头开始
flex-end	从尾部开始排列
center	居中对齐
stretch	默认值，拉伸（当子盒子没有给定高度时）

div {
    /* 给父元素添加flex属性控制子元素的排列 */
    display: flex;
    /* 默认的主轴是从左到右 元素根据主轴排列*/
    flex-direction: row;
    /* 让项目沿主轴居中 */
    justify-content: center;
    /* 让项目沿侧轴从上到下 */
    /* align-items: flex-start; */
    /* 让项目沿侧轴从下到上 */
    /* align-items: flex-end; */
    /* 让项目沿侧轴居中 */
    /* align-items: center; */
    /* 默认，让项目沿侧轴拉伸 */
    align-items: stretch;
    width: 80vw;
    height: 80vh;
    margin: 10%;
    background-color: rgb(121, 219, 60);
}

6.align-content

align-items设置侧轴的多行项目（项目换行）的排列方式

值	描述
flex-start	默认值，从头开始
flex-end	从尾部开始排列
center	在侧轴上居中对齐
space-around	在侧轴上，平分剩余空间，分配的空间会叠加
space-between	在侧轴上，先两边贴边，剩余项目再平分剩余空间
stretch	设置子项高度平分容器高度

div {
    /* 给父元素添加flex属性控制子元素的排列 */
    display: flex;
    /* 默认的主轴是从左到右 元素根据主轴排列*/
    flex-direction: row;
    /* 让项目沿主轴平均分配空间 */
    justify-content: space-around;
    /* 让项目换行 */
    flex-wrap: wrap;
    /* 设置侧轴 */
    /* 默认值，从头开始  */
    /* align-content: flex-start; */
    /* 从尾部开始排列 */
    /* align-content: flex-end; */
    /* 在侧轴上居中对齐 */
    /* align-content: center; */
    /* 在侧轴上，平分剩余空间，分配的空间会叠加 */
    /* align-content: space-around; */
    /* 在侧轴上，先两边贴边，剩余项目再平分剩余空间 */
    /* align-content: space-between; */
    /* 设置子项高度平分容器高度 */
    /* align-content: stretch; */
    width: 80vw;
    height: 80vh;
    margin: 10%;
    background-color: rgb(121, 219, 60);
}

7.flex-flow

flex-flow是复合属性，相当于同时设置flex-dirextion和flex-wrap

div {
    /* 给父元素添加flex属性控制子元素的排列 */
    display: flex;
    /* 默认的主轴是从左到右 元素根据主轴排列*/
    /* flex-direction: row; */
    /* 让项目换行 */
    /* flex-wrap: wrap; */
    /* flex-flow是复合属性 */
    /* 把设置主轴方向和是否换行进行复合书写 */
    flex-flow: row wrap;
    width: 80vw;
    height: 80vh;
    margin: 10%;
    background-color: rgb(121, 219, 60);
}
div span {
    width: 38%;
    height: 10%;
    background-color: rgb(27, 132, 193);
}

（三）、flex布局子项常见属性

1.flex属性

flex属性定义项目分配剩余空间，用flex来表示占多少份数,默认为0份，最大为全部。

section {
    display: flex;
    width: 60%;
    height: 150px;
    background-color: rgb(185, 19, 19);
    margin: 0 auto;
}

section div:first-child {
    width: 100px;
    height: 150px;
    background-color: rgb(25, 210, 50);
}

section div:nth-child(2) {
    /* 占全部 */
    flex: 1;
    background-color: rgb(212, 19, 132);
}

section div:nth-child(3) {
    width: 100px;
    height: 150px;
    background-color: rgb(25, 87, 210);
}

将项目不设置宽度，那么剩余宽度就是容器宽度，给每个项目设置占剩余空间的份数，都是一份，即每个占1/3，即可实现每个盒子平均分配容器宽度

.section1 {
    display: flex;
    width: 60%;
    height: 150px;
    background-color: rgb(203, 136, 136);
    margin: 100px auto;
}

.section1 div {
    height: 150px;
    flex: 1;
}

.section1 div:first-child {
    background-color: rgb(25, 210, 50);
}

.section1 div:nth-child(2) {
    background-color: rgb(212, 19, 132);
}

.section1 div:nth-child(3) {
    background-color: rgb(25, 87, 210);
}

2.align-self

align-self单独控制某个项目自己在侧轴上的排列方式

值	描述
auto	默认。元素继承其父容器的 align-items 属性，如果没有父容器，则为 "stretch"。
stretch	定位元素以适合容器。
center	元素位于容器的中央。
flex-start	元素位于容器的开头。
flex-end	元素位于容器的末端。
baseline	元素被定位到容器的基线

.section {
    display: flex;
    width: 60%;
    height: 250px;
    background-color: rgb(185, 19, 19);
    margin: 0 auto;
    /* 让子盒子沿侧轴底侧对齐 */
    /* align-items: flex-end; */
}

.section div {
    width: 100px;
    height: 100px;
    background-color: rgb(30, 138, 54);
}

.section div:last-child {
     /* 我们只想让3号盒子下来 */
    align-self: flex-end;
}

3.order

order 属性设置子元素的排列顺序，数值越小越往前，默认是0，注意与z-index不一样

.section {
    display: flex;
    width: 60%;
    height: 250px;
    background-color: rgb(185, 19, 19);
    margin: 0 auto;
}

.section div {
    width: 100px;
    height: 100px;
    background-color: rgb(30, 138, 54);
}

/* 让2号盒子排在最前面 */
/* order默认是0，数字越小越往前 */
.section div:nth-child(2) {
    order: -1;
}

（四）弹性布局与定位冲突问题

手机端经常会要做固定在顶部或者底部的导航栏，
但当弹性盒子跟固定/绝对定位一起使用时，就会发生问题，具体情况如下：

<div class="flex-box">
	<div class="option">1</div>
	<div class="option">2</div>
	<div class="option">3</div>        
	<div class="option">4</div>    
</div>

*{		
    margin: 0;            
    padding: 0;        
}
.flex-box {         
    display: flex;            
    align-items: center;            
    background-color: aqua;        
}
.option {            
    width: 25%;            
    padding: 20px 0;            
    text-align: center;        
}

给flex-box加入绝对定位这时问题就出现了

弹性盒子的一些设置失效了。我看有的博主说被绝对/固定定位的盒子不参与flex布局，于是在外面再套一个盒子，宽度100%，用来定位，里面那个当弹性盒子。这方法也行，但是理解有偏差。

其实，固定/绝对定位会对元素宽度造成影响，导致弹性盒子定位后宽度发生变化（想要深入了解固定/绝对定位对元素宽度影响可以去百度下，有很多详细的资料），解决办法是给弹性盒子显式的加一个宽度100%就会恢复正常。如果看了资料还是不懂定位对元素宽度的影响，直接给元素显式的加上宽度就不用担心了。
总结下来就是，定位后宽度出问题，就给他加上一个确定的宽度，否则宽度为auto。
注：此问题针对html，wxml不给出宽度不会出现问题。

三、rem适配布局

（一）rem基础

rem(root em)是一个相对单位，类似于em,em是父元素字体大小，rem的基准是html元素的字体大小

rem是相对于html设置的，以html的字体大小为根，优点是可以通过修改html页面里的文字的大小来改变页面中元素的大小可以整体控制

（二）媒体查询

1.简介

媒体查询(Media Query)是CSS3的新语法

使用@media查询，可以针对不同的媒体类型定义不同的样式，可以根据屏幕尺寸设置不同的样式
当重置浏览器大小的过程中，页面也会根据浏览器的高度和宽度重新渲染页面

2.语法规范

@media mediatype and|not|only (media feature){
	CSS-Code
}

3.媒体类型：

值	描述
all	默认。用于所有媒体类型设备。
print	用于打印机。
screen	用于计算机屏幕、平板电脑、智能手机等。
speech	用于朗读页面的屏幕阅读器。

not、only 和 and 关键字的含义：

not：not 关键字排除某个媒体类型
only：only 关键字指定媒体类型。
and：and 关键字将媒体特性与媒体类型或其他媒体特性组合在一起。

它们都是可选的。但是，如果使用 not 或 only，则还必须指定媒体类型。

4媒体特性

值	描述
any-hover	是否有任何可用的输入机制允许用户（将鼠标等）悬停在元素上？在 Media Queries Level 4 中被添加。
any-pointer	可用的输入机制中是否有任何指针设备，如果有，它的精度如何？在 Media Queries Level 4 中被添加。
aspect-ratio	视口（viewport）的宽高比。
color	输出设备每个像素的比特值，常见的有 8、16、32 位。如果设备不支持输出彩色，则该值为 0。
color-gamut	用户代理和输出设备大致程度上支持的色域。在 Media Queries Level 4 中被添加。
color-index	输出设备的颜色查询表（color lookup table）中的条目数量。如果设备不使用颜色查询表，则该值为 0。
device-aspect-ratio	输出设备的宽高比。已在 Media Queries Level 4 中被弃用。
device-height	输出设备渲染表面（如屏幕）的高度。已在 Media Queries Level 4 中被弃用。
device-width	输出设备渲染表面（如屏幕）的宽度。已在 Media Queries Level 4 中被弃用。
display-mode	应用程序的显示模式，如 web app 的 manifest 中的 display 成员所指定在 Web App Manifest spec 被定义。
forced-colors	检测是用户代理否限制调色板。在 Media Queries Level 5 中被添加。
grid	输出设备使用网格屏幕还是点阵屏幕？
height	视口（viewport）的高度。
hover	主输入机制是否允许用户将鼠标悬停在元素上？在 Media Queries Level 4 中被添加。
inverted-colors	浏览器或者底层操作系统是否反转了颜色。在 Media Queries Level 5 中被添加。
light-level	当前环境光水平。在 Media Queries Level 5 中被添加。
max-aspect-ratio	显示区域的宽度和高度之间的最大比例。
max-color	输出设备每个颜色分量的最大位数。
max-color-index	设备可以显示的最大颜色数。
max-height	显示区域的最大高度，例如浏览器窗口。
max-monochrome	单色（灰度）设备上每种“颜色”的最大位数。
max-resolution	设备的最大分辨率，使用 dpi 或 dpcm。
max-width	显示区域的最大宽度，例如浏览器窗口。
min-aspect-ratio	显示区域的宽度和高度之间的最小比例。
min-color	输出设备每个颜色分量的最小位数。
min-color-index	设备可以显示的最小颜色数。
min-height	显示区域的最小高度，例如浏览器窗口。
min-monochrome	单色（灰度）设备上每种“颜色”的最小位数。
min-resolution	设备的最低分辨率，使用 dpi 或 dpcm。
min-width	显示区域的最小宽度，例如浏览器窗口。
monochrome	输出设备单色帧缓冲区中每个像素的位深度。如果设备并非黑白屏幕，则该值为 0。
orientation	视窗（viewport）的旋转方向（横屏还是竖屏模式）。
overflow-block	输出设备如何处理沿块轴溢出视口(viewport)的内容。在 Media Queries Level 4 中被添加。
overflow-inline	沿内联轴溢出视口(viewport)的内容是否可以滚动？在 Media Queries Level 4 中被添加。
pointer	主要输入机制是一个指针设备吗？如果是，它的精度如何？在 Media Queries Level 4 中被添加。
prefers-color-scheme	探测用户倾向于选择亮色还是暗色的配色方案。在 Media Queries Level 5 中被添加。
prefers-contrast	探测用户是否有向系统要求提高或降低相近颜色之间的对比度。在 Media Queries Level 5 中被添加。
prefers-reduced-motion	用户是否希望页面上出现更少的动态效果。在 Media Queries Level 5 中被添加。
prefers-reduced-transparency	用户是否倾向于选择更低的透明度。在 Media Queries Level 5 中被添加。
resolution	输出设备的分辨率，使用 dpi 或 dpcm。
scan	输出设备的扫描过程（适用于电视等）。
scripting	探测脚本（例如 JavaScript）是否可用。在 Media Queries Level 5 中被添加。
update	输出设备更新内容的渲染结果的频率。在 Media Queries Level 4 中被添加。
width	视窗（viewport）的宽度。

PS：
1.用@media开头，注意@符号
2.mediatype媒体类型
3.关键字 and | not | only
4.media feature媒体特性必须有小括号包含

5.媒体查询+rem实现元素动态大小变化

将控制元素大小的单位由像素大小改为rem控制。使用媒体查询，当屏幕的宽度变化时，改变根字体大小，即可实现页面元素随页面大小而改变。

@media screen and (min-width:320px) {
    html {
        font-size: 50px;
    }
}
@media screen and (min-width:640px) {
    html {
        font-size: 100px;
    }
}
div {
    position: absolute;
    top: 0;
    height: 1rem;
    text-align: center;
    line-height: 1rem;
    font-size: 0.5rem;
    background-color: lightgreen;
}

6.引入资源

当样式比较繁多的时候，我们可以针对不同的媒体使用不同的样式表（CSS文件），直接在link中判断设备的尺寸，然后引用不同的CSS文件

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- /* 当屏幕大小大于等于940，div 一行显示两个，
当屏幕大小小于640，div 一行显示一个 */ -->
<link rel="stylesheet" href="style640-.css" media="screen and (min-width:640px)">
<link rel="stylesheet" href="style940+.css" media="screen and (min-width:940px)">

（三）Less基础

1.CSS的弊端

CSS是一门非程序语言，没有变量、函数、作用域等概念
CSS会书写许多重复的代码，造成代码冗余
CSS没有很好的计算能力
CSS不方便维护及扩展，不利于复用

2.less介绍

Less(Leaner Style Sheets)是一门CSS扩展语言，也称为CSS预处理器
它在CSS语法的基础上引入了变量，Mixin(混入)运算，运算以及函数等功能，大大简化了CSS的编写，并且降低了CSS的维护成本，Less可以让我们用更少的代码做更多的事

Less中文网站：http://lesscss.com

常见的的CSS预处理器：Sass、Less、Stylus

3.less使用

建立.less文件，将less语句写到.less文件里，然后再编译，最后再在html文件上使用

4.less变量

@变量名:值;

变量命名规范：
必须有@前缀
不能包含特殊字符
不能以数字开头
不能以下划线开头
大小写敏感

//定义一个粉色的变量
@color: pink;
// 定义字体大小为14px
@font14: 14px;

div {
    background-color: @color;
    font-size: @font14;
}

5.less编译

vscode插件Easy LESS来进行将Less文件编译成CSS文件

只要保存一下less文件，插件即可自动生成css文件，最后在引入生成的CSS文件

<link rel="stylesheet" href="04-less.css">

6.less嵌套

子元素的样式直接写到父元素里面

header {
    width: 200px;
    height: 200px;
    background-color: deeppink;
    a {
        color: pink;
    }
}

如果遇见（交集、伪类、伪类元素选择器）要加&
内层选择器没有&符号，则它被解析为父元素的选择器的后代
如果有&符号，它就被解析为父元素自身或是父元素的伪类

// 解析为父元素的选择器的后代
a {
    color: pink;
    :hover {
        color: blue;
    }
}
//less解析为css
header a :hover {
  color: blue;
}

// 解析为父元素自身或是父元素的伪类
a {
    color: pink;
    &:hover {
        color: blue;
    }
}
//less解析为css
header a:hover {
  color: blue;
}

7.less运算

// 算数运算
@border: (5px + 5);

div {
    // width: 200 / 10rem;   
    //或者 
    width: (200px / 10);
    height: (200 * 2px);
    border: @border dashed red;
    color: #666666 - #444444;
}

PS：
运算符之间要有空格
最好加（）
颜色也可以运算
对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位
如果两个值之间只有一个单位，则运算结果就取该值

（四）rem适配方案

1.目的

让一些不能等比例自适应的元素，达到当设备尺寸发生变化时，等比例适配设备

2.方法

使用媒体查询根据不同设备的比例设置html的根字体大小，然后页面元素使用rem做的尺寸单位，当html字体大小变化，元素尺寸也会发生变化，从而达到等比例缩放的适配

3.rem实际开发适配方案

1）按照设计稿与设备宽度的比例，动态计算html跟标签的font-size大小
2）CSS中，设计稿元素的宽高相对位置的取值，按照等比例换算rem的值

4.rem实际开发适配方案

1）less+媒体查询+rem
2）flexble.js+rem

5.元素大小取值方式

1）页面rem值=页面元素值（px） / （屏幕宽度 / 划分份数例如，将1400px的屏幕划分为140份，html font-size=10px,一个50px的元素=5rem
2）html font-size=屏幕宽度 / 划分分数
3)页面rem值=页面元素值（px） / html font-size

6.flexble.js+rem方案

不需要再写媒体查询，将屏幕换分为10等分，不同设备下比例还是一致的，只需要设置html的（页面大小/10）文字大小就可以啦

四、响应式布局

（一）响应式开发

1.响应式开发原理

通过媒体查询（@media）针对不同宽度的设备进行布局和样式的设置，从而达到适配不同设备的目的

设备划分	尺寸区间
超小屏幕(手机)	(0,768px)
小屏设备(平板)	[768px,992px)
中等屏幕(桌面显示器)	[992px,1200px)
宽屏设备(大桌面显示器)	[1200px,inf)

2.响应式布局容器

响应式需要一个父级作为布局容器，来配合子级元素来实现变化效果
原理就是在不同的屏幕下，通过媒体查询来改变这个布局容器的大小，在改变里面元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化

设备划分	设置宽度
超小屏幕(手机)	100%
小屏设备(平板)	750px
中等屏幕(桌面显示器)	970px
宽屏设备(大桌面显示器)	1170px

/* 超小屏幕(手机) <768*/
@media screen and (max-width:768px) {
    .container {
        width: 100%;
    }
}
/* 小屏设备(平板) 768~992*/
@media screen and (min-width:768px) {
    .container {
        width: 750px;
    }
}
/* 中等屏幕(桌面显示器) 992~1200 */
@media screen and (min-width:992px) {
    .container {
        width: 970px;
    }
}
/* 宽屏设备(大桌面显示器) >1200*/
@media screen and (min-width:1200px) {
    .container {
        width: 1170px;
    }
}

（二）Bootstrap前端开发框架

1.简介

官网：http://getbootstrap.com
中文网站：http://www.bootcss.com
推荐网站：https://v3.bootcss.com/

框架：有一套比较完整的网页功能解决方案，有预设的样式库、组件和插件。使用者要按照框架所规定的某种规范化进行开发

优点：
标准化的html+css编码规范
提供了一套简洁、直观、强悍的组件
有自己的生态圈，不断的更新迭代
让开发更加简单

2.Bootstrap使用

步骤：
1)下载Bootstrap压缩包
2)创建Bootstrap文件夹将压缩包解压到文件夹里
3)创建HTML骨架

<!doctype html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
        <title>Bootstrap 101 Template</title>

        <!-- Bootstrap -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

        <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
        <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
        <!--[if lt IE 9]>
<script src="https://fastly.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://fastly.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
    </head>
    <body>
        <h1>你好，世界！</h1>

        <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
        <script src="https://fastly.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
        <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
    </body>
</html>

4)引入相关样式文件

<!-- 直接在网站上复制代码就可以啦 -->
<button type="button" class="btn btn-primary">（首选项）Primary</button>

5)书写内容
如果想要更改样式，只需要再添加一个类名，利用层叠性进行覆盖即可。但是要注意权重的问题。

3.布局容器

Bootstrap需要一个页面内容和栅格系统包裹一个.container容器，Bootstrap预定好了这个类，加。container，它提供了两个作此用处的类。

1）container类

响应式布局的容器，自动固定宽度，响应式布局

设备划分	设置宽度
超小屏幕(手机)	100%
小屏设备(平板)	750px
中等屏幕(桌面显示器)	970px
宽屏设备(大桌面显示器)	1170px

2）container-fluid类

流式布局容器，100%宽度
占据全部视口的容器
适合单独做移动端开发

（三）Bootstrap栅格系统

1.栅格系统简介

栅格系统（grid systems）也称为网格系统，它是指将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局

Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随屏幕或者视口尺寸的增加，系统会自动将.container分为最大12列

2.栅格选项参数

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中

设备划分	设置宽度	类前缀
超小屏幕(手机)	100%	.col-xs-份数
小屏设备(平板)	750px	.col-sm-份数
中等屏幕(桌面显示器)	970px	.col-md-份数
宽屏设备(大桌面显示器)	1170px	.col-lg-份数

PS：
1.行（row）必须放到container布局容器里面
2.实现平均划分，需要给列添加类前缀
3.xs-extra small：超小，sm-samll：小，md-medium：中等，lg-large：大
4.列（column）大于12，多余的列，所在的元素将被作为一个整体另起一行排列
5.每一列默认有15px的padding
6.可以同时为一列指定多个设备的类名，以便划分不同的份数，例如class="col-md-4 col-sm-6"
7.如果份数相加小于12，则占不满.container，会留空白；如果份数相加大于12，则超出.container，会另起一行

3.列嵌套

在父元素中嵌套子元素，然后将父元素看作.container容器，同样会分为12份，要想实现子元素平均分配，只需要添加类属性即可

<div class="row">
    <div class="col-md-6">
        <!-- 每个小盒子又分为为12份 -->
        <div class="row">
            <div class="col-md-4">a</div>
            <div class="col-md-4">a</div>
            <div class="col-md-4">a</div>
        </div>
    </div>
</div>

PS：如果要想实现元素之间有一定的间距，不能够加margin值，因为每一个元素都是浮动的，且大小相加正好等于100%，如果加了margin那么盒子一定会超出，另起一行。所以要实现这个间距，要在父元素里面放入子盒子，然后父元素添加padding值。
父元素里面直接添加子元素会有一定的padding值，要解决这个问题，只需要在子元素外再添加一个父元素，并且类名改为.row，所以列嵌套最好加一个行，这样可以去掉父元素的padding值，而且高度会和父元素一样高

4.列偏移

当份数相加不满12时，右侧会留出空白，使用.col-md-offset-"偏移份数"类可以实现将列向右偏移（水平居右），这些类实际上是通过通配符选择器为当前元素增加了左侧边距（margin），偏移份数=12-两个盒子的份数

<div class="row">
    <div class="col-md-4 ">左侧</div>
    <div class="col-md-4 col-md-oddset-4">右侧 </div>
</div>

实现一行中只有一个子元素，并且子元素居中显示。使用.col-md-offset-"偏移份数"类进行右偏移，偏移份数=（12-盒子份数）/ 2

<div class="row">
    <div class="col-md-4 col-md-offset-4">中间</div>
</div>

5.列排序

通过使用.col-md-push-"份数"和.col-md-pull-"份数"类就可以很容易的改变列的顺序。push向右推，pull向左拉。

<div class="row">
    <div class="col-md-4 col-md-push-8">左侧</div>
    <div class="col-md-8 col-md-pull-4">右侧 </div>
</div>

6.响应式工具

在不同屏幕下可以隐藏某些元素

类名	超小屏	小屏	中屏	大屏
.hidden-xs	隐藏	可见	可见	可见
.hidden-sm	可见	隐藏	可见	可见
.hidden-md	可见	可见	隐藏	可见
.hidden-lg	可见	可见	可见	隐藏

在不同屏幕下可以显示某些元素

类名	超小屏	小屏	中屏	大屏
.visible-xs	可见	隐藏	隐藏	隐藏
.visible-sm	隐藏	可见	隐藏	隐藏
.visible-md	隐藏	隐藏	可见	隐藏
.visible-lg	隐藏	隐藏	隐藏	可见

<!-- 中屏隐藏 -->
<div class="row">
    <div class="col-md-3 ">1</div>
    <div class="col-md-3 ">2</div>
    <div class="col-md-3 hidden-md">中屏隐藏元素</div>
    <div class="col-md-3 ">4</div>
    <!-- 大屏显示 -->
    <span class="visible-lg">大屏显示元素</span>
</div>

（四）、vw和vh

1.移动端布局

rem：市场比较常见，需要不断修改html文字大小，需要媒体查询，需要flexble.js
vw/vh：未来趋势，省去各种判断和修改

2.vw/vh是什么？

vw/vh是一个相对单位，vw是视口宽度，vh是视口高度

1vw=1/100视口宽度，1vh=1/100视口高度

vw/vh与%是有区别的，%是相对于父元素来说的，vw/vh是相对于当前视口来说的

3.vw和vh的使用

div{
    width:20vw;
    height:50vh;
    background-color:red;
}

4.还原设计稿

50px*50px的盒子：

1.分析视口宽度为375px
2.计算1vw是多少px:375px/100=3.75px
3.用50px/3.75px=13.3333vw
4.高度也是如此