移动端开发

兼容

国内的浏览器大多都是基于Webkit修改过来的内核，兼容移动端主流浏览器，主要处理Webkit内核浏览器即可。

视口

描述：视口(viewport)就是浏览器显示显示网页内容的屏幕区域。视口可以分为布局视口，视觉视口和理想视口。

布局视口

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

视觉视口

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

理想视口

描述：为了使网站在移动端有最理想的浏览和阅读宽度而设定。对设备来讲，就是最理想的视口尺寸。
方法：需要手动添加<meta>视口标签通知浏览器操作。<meta>标签的主要目的就是布局视口的宽度应该和理想视口的宽度一致，简单理解就是指设备有多宽，布局视口就有多宽。

meta 视口标签

语法：<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
注意：在vscode默认骨架中会有这个标签，可以选择添加上其它的属性值。

meta 标签属性说明

二倍图

物理像素&物理像素比

物理像素点指的是屏幕显示的最小颗粒，是物理真是存在的。在pc端的页面中，1px等于1个物理像素，但是移动端不尽相同，1px能显示的物理像素点的个数，称作为物理像素比或者屏幕像素比。

多倍图简述

描述：由于在移动端中1px不一定定义1像素，所以可能会导致图片失真，比如一个开发的尺寸是50px*50px,如果选择50px*50px像素的图片，那么在移动端相当于占据了100*100的像素，当图片放大之后，因为高清屏幕的展示，就会出现图片模糊的情况，当遇到这种情况的时候，实际开发尺寸应该与移动端像素尺寸成比例关系。比如iphone6，1px等于2像素，所以此时50*50px的开发尺寸应该选用100*100像素的图片，然后再更改图片的尺寸大小，实现移动端的高清图片。

二倍精灵图做法

1.把精灵图等比例缩放成原来的一半。
2.根据新的大小测量坐标
3.代码中的background-sizing也要写成原来精灵图宽高的一半。

移动端的主流方案

1.单独制作移动端的页面（主流），通常情况下，网址域名前面加m可以打开移动端，通过判断设备，如果是移动端打开，就跳转到移动端。
2.响应式页面兼容移动端，pc端和移动端公用一套网站，只不过在不同的宽度的屏幕下，样式会自动适配。

移动端常见问题及解决方案

1.兼容性问题：移动端浏览器基本上以webkit内核为主，因此就需要考虑webkit的兼容性问题，所以可以使用html5标签和css3样式，浏览器的私有前缀只需要加"-webkit-"即可。
2.css初始化：描述：移动端的初始化推荐使用normalize.css，是一个可以定制的css文件，它让不同的浏览器在渲染网页元素的时候形式更统一，是一种现代的，为html5准备的优质替代方案。
优点：
    1.保护了有价值的默认值，
    2.修复了浏览器的bug，解决了浏览器不一致的默认样式。
    3.Normalize.css是模块化的，提高了易用性。
    4.normalize.css拥有详细的文档。
官网地址：https://necolas.github.io/normalize.css/
3.盒模型 box-sizing：传统的盒模型计算方法盒子的宽度等于盒子内容区域的宽度+边框+内边距。需要自己计算。css3盒模型中，出现了box-sizing，当设置"box-sizing: border-box"的时候，盒模型会自动内减padding和border，不会自动撑大盒子。
4.特殊样式：
    <!-- css3盒模型 -->
    box-sizing: border-box
    -webkit-box-sizing: border-box
    <!-- 清除点击高亮 设置为transparent完成透明 -->
    -webkit-tap-highlight-color: transparent
    <!-- 移动端浏览器默认外观在ios上给按钮和输入框自定义样式 -->
    -webkit-appearance: none;
    <!-- 禁用长安页面时的弹出菜单 -->
    img,a {
        -webkit-touch-callout: none;
    }

css 初始化 normalize.css

描述：移动端的初始化推荐使用normalize.css，是一个可以定制的css文件，它让不同的浏览器在渲染网页元素的时候形式更统一，是一种现代的，为html5准备的优质替代方案。
优点：
    1.保护了有价值的默认值，
    2.修复了浏览器的bug，解决了浏览器不一致的默认样式。
    3.Normalize.css是模块化的，提高了易用性。
    4.normalize.css拥有详细的文档。
官网地址：https://necolas.github.io/normalize.css/

流式布局

描述：流式布局就是百分比布局，也称非固定像素布局。通过将盒子的宽度设置成百分比，从而根据屏幕的宽度进行伸缩，不受固定像素的限制，内容向两侧填充。流式布局方式时web移动端开发使用的比较常见的布局方式。

注意：制作过程中需要定义页面的最大和最小支持的宽度。
max-width：最大宽度（max-height 最大高度）
min-width：最小宽度（min-height 最小高度）

实战笔记

在布局中，如果碰到两侧的元素宽高不随着父元素发生变化，而中间的元素随着父元素的宽度发生变化的时候，可以给两边不发生变化的元素使用绝对定位效果，中间部分不设置宽度，左右两边各设置margin值，通过margin撑开左右两边的距离，内容的宽度随着父盒子宽度的变化而变化。

flex 布局

传统布局与 flex 布局

传统布局：
    1.兼容性好
    2.布局繁琐
    3.局限性，不能在移动端很好的布局
flex布局：
    1.操作方便，布局简单，在移动端广泛应用
    2.pc端浏览器支持较差
    3.IE 11或更低版本，不支持或仅部分支持

flex 布局原理

1.flex布局是flexible Box的缩写，意为弹性布局，用来为盒模型提供最大的灵活性，任何一个容器都可以指定为flex布局。
2.当为父盒子设置flex布局之后，子元素的float，clear和vertical-align属性将失效。
3.伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局
总结：flex布局就是给父盒子添加flex属性，来控制盒子的位置和排列方式。

flex 布局常用属性

父项常用属性

1.flex-direction:设置主轴的方向
2.justify-content:设置主轴上的子元素排列方式
3.flex-wrap:设置子元素是否换行
4.align-content:设置侧轴上的子元素排列方式（多行）
5.align-items:设置侧轴上的子元素排列方式（单行）
6.flex-flow:复合属性，相当于同时设置了flex-direction和flex-wrap

flex-direction 设置主轴的方向

主轴与侧轴：
    在flex布局中是分为主轴和侧轴两个方向，同样的叫法有行和列，x轴和y轴。默认主轴方向是x轴方向，水平向右，侧轴是y轴方向，垂直向下。
注意：flex的主轴和侧轴是可以通过属性修改的。当主轴修改后，剩下的就是侧轴。
语法：flex-direction: 属性值;

flex-direction 属性值

justify-content 主轴上子元素排列方式

概念：justify-content属性定义了元素在主轴上的排列方式
注意：在使用justify-content属性之前，需要先确定主轴方向。
语法：justify-content: 属性值

justify-content 属性值

flex-wrap 设置子项是否换行

描述：默认情况下，子项都排在一条直线上，不换行。
注意：换行后如果不设置padding和margin属性，子项会自动平分父级的空间。如果子项宽度之和超出了父容器的宽度，当设置flex-wrap为不换行之后，子项会自动重新计算宽度，在父容器中能够一行排列展示。
语法：flex-wrap: 属性值;

flex-wrap 属性值

align-items 侧轴上子元素排列方式（单行）

描述：控制子元素在侧轴（默认y轴）上的排列方式，在子项为单行的时候使用。
语法：align-items: 属性值;

align-items 属性值

align-content 侧轴上子元素排列方式（多行）

描述：设置子元素在侧轴上的排列方式，并且只能用于子项在多行的情况下。在单行下是没有效果的。
语法：align-content: 属性值;

align-content 属性值

align-items 和 align-content 的区别

1.align-items适用于单行情况下，只有上对齐，下对齐，居中和拉伸。
2.align-content适用于换行（多行）情况下，单行情况下没有效果。可以设置上对齐，下对齐，居中，拉伸和平均分配父元素空间等。
3.当行的情况下设置侧轴上的子元素排列方式用align-items，多行情况下设置侧轴上的子元素排列方式用align-content。

flex-flow 复合属性

描述：flex-flow属性是flex-direction和flex-wrap的复合写法。
语法：flex-flow: row nowrap; 表示设置主轴为x轴，不换行。属性值之间用空格分开。

子项常用属性

1.flex 子项目占的份数
2.align-self控制子项自己在侧轴的排列方式
3.order 定义子项的排列顺序（前后顺序）

flex 子项占的份数

描述：flex属性定义子项目分配父盒子的剩余空间。在父项中，有一些子项会设置固定的宽高，有一些不会设置，flex属性用于设置分配父盒子中的剩余空间。，用flex表示占多少份数。属性值为数字，属性值为1时，表示占总数中的1份，默认值为0.
语法：.item {
    flex: 1;/* default0 */
}
示例1：
    <!-- html部分 -->
    <section>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </section>
    <!-- css部分 -->
    section {
        width: 60%;
        height: 80px;
        background-color: pink;
    }

    section:nth-child(1),
    section:nth-child(3) {
        width: 80px;
        height: 80px;
        background-color: skyblue;
    }

    section:nth-child(2) {
        /* 表示第二个div子元素将占据所有的父元素剩余空间，并且随着父元素的增大而变大，减小而缩小 */
        flex: 1;
    }
示例2：
    <!-- html部分 -->
    <div class="box">
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
    <!-- css部分 -->
    .box {
        width: 60%;
        height: 80px;
        margin: 0 auto;
        background-color: pink;
    }

    .box span {
        /* 表示将父元素等比分成三分，每个span元素各占一份 */
        flex: 1;
    }
示例3：
    <!-- html部分 -->
    <div class="box">
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
    <!-- css部分 -->
    .box {
        width: 60%;
        height: 80px;
        margin: 0 auto;
        background-color: pink;
    }

    .box span {
        flex: 1;
    }
    .box:nth-child(2) {
        /* 表示将父元素分为四份，第二个span标签占两份 */
        flex: 2;
    }

align-self 控制子项自己在侧轴上的排列方式

描述：align-self属性允许单个项目与其它项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
语法：div:nth-child(2) {
    <!-- 设置自己在侧轴上的排列方式 -->
    align-self: flex-end;
}

order 属性定义项目在加载时的排列顺序

描述：定义项目在加载时的排列顺序，数值越小，排列越靠前，默认为0。
注意：和z-index不一样。
语法：.item {
    order: <number>;
}

rem 布局

rem 单位

描述：rem是一个相对单位，类似于em，em是父元素字体大小，不同的是rem的基准是相对于html元素的字体大小。比如根元素（html）设置font-size=12px，非根元素设置width=2rem，转换成px表示就是width=24px；
优势：父元素的大小可能不一致，但是整个页面只有一个html，可以很好的控制整个页面的元素大小比例。
作用：1.页面布局中的文字大小能够随着屏幕大小的变化而变化。
    2.屏幕发生变化的时候，元素的高度和宽度等比例缩放。

媒体查询 Media Query

描述：通过媒体查询方法判断屏幕的大小，根据屏幕的大小改变html元素中的字号大小。
1.使用媒体查询@media查询，可以针对不同的媒体类型定义不同的样式，
2.@media可以针对不同的屏幕尺寸设置不同的样式。
3.当重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

语法：@media mediatype and|not|only (media feature) {
    CSS-Code;
}
语法规范：1.使用@media开头，注意@符号。
    2.mediatype 表示媒体类型（手机，平板等）
    3.关键字 and not only
    4.media feature 媒体特性 必须有小括号包含（比如宽度，高度等）
示例1：在屏幕设备中，判断屏幕尺寸大于等于800px的时候，背景颜色为粉红色。
    @media screen and (min-width:800px) {
        body {
            background-color: pink;
        }
    }
示例2：在屏幕设备中，判断屏幕尺寸小于等于600px的时候，背景颜色为红色；
    @media screen and (max-width: 600px) {
        body {
            background-color: red;
        }
    }

mediatype 媒体类型

描述：将不同的终端设备划分为不同的媒体类型。

关键字 and|not|only

描述：将媒体类型或多个媒体特性链接到一起作为媒体查询的条件。
and：将多个媒体特性链接到一起，相当于"且"的意思。
not：排除某个媒体类型，相当于"非"的意思，可以忽略。
or：可以测试多个媒体查询的条件，只要有一个成立就执行。相当于"或"的意思。
only：指定特定的媒体类型。

媒体特性

描述：每种媒体都具有不同的特性，根据不同的媒体类型的媒体特性设置不同的展示风格。
注意：max-width和min-width都包含等于的关系

媒体查询引入资源

描述：当项目中css比较繁琐的时候，可以针对不同的媒体使用不同的样式表，原理就是直接在link中判断设备的尺寸，然后引用不同的css文件。
语法：<link rel="stylesheet" href="styleA.css" media="media-type and|not|or (media feature)">
示例：<link rel="stylesheet" href="styleA.css" media="screen and (min-width: 400px)">

rem 适配目标

1.适配目标是什么：让一些不能等比自适应的元素，当设备尺寸发生变化的时候，等比例适配当前的设备。
2.怎么达到这个目标：使用媒体查询，根据不同设备按比例设置不同的html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小发生变化后，元素尺寸也发生变化，达到元素自适应等比缩放。
3.实际开发中的应用：
    1.按照设计稿于设备宽度的比例，动态计算并设置html跟标签的字体大小
    2.css中，设计稿元素的宽高，相对位置等取值，按照同等比例换算为rem单位的值。

rem 适配方案

1.根据设计稿，将设计稿分成15等份。一般参照750px的设计稿。
2.html字号大小 = 750px / 15
3.根据媒体查询，针对不同的屏幕尺寸，除以相同的15等份，设置不同的字号。

less 简介

描述：Less(leaner style sheets的缩写)，是一门css扩展语言，也称为css预处理器。作为css的一种形式的扩展，没有减少css的功能，在现有的css的语法上，加入了程序式语言的特性。它在css的语法上，引入了变量，Mixin（混入），运算以及函数等功能。简化了css的编写，以及降低了css的维护成本，用更少的代码做更多的事情。

Less 使用

1.创建一个后缀名为.less的文件，在这个.less文件中书写less语句。

Less 变量

命名规范：
    1.必须有@为前缀。
    2.不能包含特殊字符。
    3.不能以数字开头
    4.大小写敏感。
    @color: pink
使用规范：
    body {
        color: @color
    }

Less 编译

描述：less包含一套自定义的语法及解析器，根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译成对应的css文件。
编译方法：
    1.在终端中通过命令进行编译：lessc style.less > style.css

Less 嵌套

描述：less嵌套语法中相当于平常css语法中的空格选择后代选择器的写法。
语法：#header {
    .nav {
        font-size:12px
    }
}
css语法：#header .nav {font-size:12px}

Less 运算

描述：任何数字，颜色或者变量都可以参与运算。Less提供了加减乘除四种运算方式。
注意：1.参与运算的两个数字，可以一个有单位，一个没有单位，最终单位就是唯一的那个单位。
    2.参与运算的两个数字，如果两个数字都有单位，且单位不相同，最终的单位取第一个数字的单位。
    3.less的运算符左右必须加空格.

flexible.js

原理：把当前设备划分成10等份，在不同设备下，比例是一致的。比如当前设计稿是750px，我们只需要把html文字大小设置成75px(750px / 10)就可以，里面页面元素的rem值为页面元素的px值/75.剩下的会由flexible.js计算。

使用方法：下载flexible.js的压缩包，解压之后，将文件中的index.js文件放入到项目文件中，在html文件中导入index.js.

注意：由于flexible会根据屏幕自动计算font-size大小，当超出设计稿尺寸的时候，如750px，字体仍然会执行flexible中的计算规则，此时需要自定义视图窗口，当大于750px的时候，font-size最大字体为75px。由于flexible设置的css样式是行内样式，优先级是最高权重，所以在自己设置字体大小的时候，还需要通过!important，增加css的权重。

示例：
    @media screen and (min-width:750px) {
    html {
        font-size: 75px !important;
    }
}

git地址：https://github.com/amfe/lib-flexible

VSCode插件：在css文件中，将px单位自动转换为rem单位。cssrem。安装完插件之后需要根据设计图的大小设置默认的字体大小。
设置方法：设置-cssrem-root font-size

响应式布局

描述：在pc端和移动端共用一套代码，但是在pc端和移动端自适应屏幕的宽度，从而加载不同的样式和效果。

响应式布局原理

原理：使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而设配不同的设配。

响应式布局容器

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

尺寸划分：
    超小屏幕（手机，小于768px）：设置宽度为100%
    小屏幕（平板，大于等于768px）：设置宽度为750px
    中等屏幕（桌面显示器，大于等于992px）：设置宽度为970px
    大屏幕（大桌面显示器，大于等于1200px）：设置宽度为1170px

Bootstrap 简介

中文官网：http://www.bootcss.com/
官网：http://getbootstrap.com

Bootstrap 使用

使用四部曲：
    1.创建文件夹结构。
        需要将下载的Bootstrap文件加载到项目文件夹中。
    2.创建html骨架结构。可以直接复制文档中的基本模板部分。
        <!-- 要求当前网页使用IE浏览器最高版本的内核来渲染 -->
        <meta htto-equiv="X-UA-Compatible" content="IE=edge">
        <!-- 视口设置：视口的宽度和设备一直，默认的缩放比例和PC端一致，用户不能自行缩放 -->
        <meta name="viewport" content="width=device-width. initial-scale=1,user-scalable=0">
        <!--[if lt IE9]>
            <!-- 解决ie9以下浏览器对html5新增标签的不识别，并导致css不起作用的问题 -->
            <script src="https://oss.maxcdn.com/html5shiv/3.7.2/htmnl5shiv.min.js"></script>
            <!-- 解决ie9以下浏览器对css3 Media Query 的不识别 -->
            <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
    3.引入相关样式文件。
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    4.书写内容。
        直接使用Bootstrap预先定义好的样式。
        修改Bootstrap原来的样式，注意权重问题。
        了解Bootstrap定义了哪些样式，以及这些样式能实现什么样的效果。

Bootstrap 布局容器

Bootstrap需要为页面内容和栅格系统包裹一个.container容器，它提供了两个做此作用的类。在使用的时候直接给元素添加这个类名就可以.
1.container类，设置响应式布局，固定宽度。
2.container-fluid类，流式布局容器，适用于制作移动页面开发。

Bootstrap 栅格系统

描述：将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局。Bootstrap提供了一套响应式、移动设备有限的流式栅格系统，随着屏幕或视口尺寸的增加，系统会自动分为最多12列。

栅格系统选项参数

描述：栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局，页面内容就可以放入这些创建好的布局中。
在container类元素下指定类名为row的行元素，即可以使用Bootstar布局。
一行中按照不同的屏幕划分为1-12等份。
row下的子元素可以分配栅格，当列大于12的时候，多余的列会被作为一个整体另起一行排列，每一列默认有左右15像素的padding。
可以同时为一列指定多个设备的类名，以便划分不同分数。
例如 class="col-sm-4 col-xs-6" 表示在小屏设备占4列，在超小屏幕占6列。

列的类名格式：.col-xs-4 表示在超小屏幕中占4个栅格。

栅格系统列嵌套

描述：在栅格系统中，可以将某一列的内容再次设置.row类名，将内容再次嵌套。简单理解就是一个列内再分成若干份小列，可以通过添加一个新的.row元素和一系列.col-sm-*元素到已经存在的.col-sm-*元素内。相当于给父级元素设置了display：flex属性，在子元素内同样也可以设置成display：flex。

栅格系统列偏移

描述：使用.col-md-offset-*类可以将列向右偏移，这些类实际是通过使用*选择器为当前元素增加了左侧的边距(margin)。
例如：.col-md-offset-5 表示元素添加了"5列"的左边距。

栅格系统 列排序

描述：栅格系统中，展示顺序一般是根据书写顺序决定的，可以通过使用.col-md-push-*往右推和.col-md-pull-*往左拉两个类就可以改变列的顺序。

Bootstrap 响应式工具

描述：为了加快对移动设备有好的页面开发工作，利用媒体查询功能，并使用这些工具类可以方便的针对不同设备展示活隐藏页面的内容。