一、移动端基础

二、视口

三、二倍图/多倍图

四、移动端开发

（一）开发选择

（二）常见布局

（三）移动端技术解决方案

五、移动WEB开发之flex布局

六、移动WEB开发之rem适配布局

#END（具体可观看b站pink老师css后续移动端视频）

一、移动端基础

1. 移动端浏览器主要用于对webkit内核进行兼容；

2. 内核：

（1） Webkit：一个开源的浏览器引擎，该引擎由苹果公司开发，主要用于Safari，Dashboard，Mail 和其他一些Mac OS X 程序。

（2）Trident：又称为IE内核，采用Trident内核的浏览器有：IE、傲游、世界之窗浏览器、Avant、腾讯TT、Sleipnir、GOSURF、GreenBrowser和KKman等。

（3） Gecko：又称为Firefox内核，同时Gecko是一个跨平台内核，可以在Windows、 BSD、Linux和Mac OS X中使用。

（4） Blink：由Google和Opera Software开发的浏览器排版引擎，在Chrome（28及往后版本）、Opera（15及往后版本）和Yandex浏览器中使用。

3. 目前移动端开发针对于手机端；

4. 移动端碎片化较严重（原因：分辨率和屏幕尺寸大小不同）。

二、视口

1. 概念：浏览器显示页面内容的屏幕区域；

2. 分类：布局视口、视觉视口、理想视口；

3. 布局视口（layout viewport）（不适合页面开发）

（1）移动设备的浏览器一般都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。

*iOS,Android基本能将视口分辨率设置为980px，可手动缩放网页。

4. 视觉视口（visual viewport）

（1）用户所正在看的网站的区域；

（2）可通过缩放操作视觉视口，但不会影响布局视口（即布局视口仍保持原本的宽度）。

5. 理想视口（ideal viewport）

（1）为了使网站在移动端有最理想的浏览和阅读宽度而设定，对设备来讲，是最理想的视口尺寸；

（2）需要手动添写meta视口标签；

（3）采用理想视口的主要目的是让我们的设备与布局视口宽度一致。

6. meta视口标签

（1）标准的viewport设置

① 视口宽度和设备保持一致

② 视口的默认缩放比例1.0

③ 不允许用户自行缩放

④ 最大允许的缩放比例1.0

⑤ 最小允许的缩放比例1.0

（2）写法：

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

三、二倍图/多倍图

*二倍精灵图做法：

1. 在firework（一个软件）中将精灵图等比例缩放为原来的一半；

2. 根据大小测量坐标；

3. 代码设置为background-sizes：精灵图原本宽度的一半。

*图片格式：

1. 实质：将准备的图片比实际需要的尺寸大小大两倍；

2. 物理像素&物理像素比

（1）物理像素点：屏幕显示的最小颗粒，是物理真实存在的（即分辨率）；

（2）开发时的1px不一定等于1个物理像素，PC端页面1px等于1个物理像素；

（3）一个px能显示的物理像素点的个数，称为物理像素比或屏幕像素比。

（4）Retina（视网膜屏幕）：一种显示技术，可以将更多的物理像素点压缩至一块屏幕中从而达到更高的分辨率，并提高屏幕显示的细腻程度。

举例：iPhone8中为750像素点，但宽度375px的盒子将其占满，1px=2像素点，物理像素比为2，其中375×667为开发尺寸(px)。

3. 多倍图目的

（1）使用倍图来提高图片质量，解决在高清设备中的模糊问题；

（2）将准备的图片比实际需要的尺寸大小大几倍（看实际需求）；

4. 背景缩放（background-size）

（1）规定背景图像的尺寸

（2）background-size：背景图片宽度背景图片高度

（3）单位:长度|百分比| cover| contain;

① cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域；（background-size：cover）

② contain把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。（高度和宽度等比例拉伸、background-size：contain）

5. 相关代码

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 500px;
        height: 500px;
        border: 1px solid black;
        background: url(../2.旋转木马/1.png) no-repeat;
        /* background-size: 500px; */
        /*完全覆盖盒子*/
        /* background-size: cover; */
        /*contain 高度和宽度等比例拉伸，当宽度或高度铺满盒子就不再拉伸*/
        background-size: contain;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

未使用background-size

使用了background-size

使用cover

四、移动端开发

（一）开发选择

1. 单独制作移动端页面（主流）

（1）不改变原本的PC端页面，单独制作一个页面；

（2）通常情况下，网址域名前面加m(mobile)可以打开移动端。通过判断设备，如果是移动设备打开，则跳到移动端页面。

2. 响应式页面兼容移动端（其次）

（1）优点：通过屏幕宽度来改变样式，以适应不同终端；

（2）缺点：制作麻烦，需要解决兼容性问题。

（二）常见布局

1. 移动端技术选型

（1）单端制作移动端页面

① 流式布局（百分比布局）

② flex弹性布局

③ less+rem+媒体查询布局

④ 混合布局

（2）响应式页面兼容移动端

① 媒体查询

② bootstarp

2. 流式布局

（1）流式布局，就是百分比布局，也称非固定像素布局。

（2）通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸宿，不受固定像素的限制，内容向两侧填充。

（3）流式布局方式是移动web开发使用的比较常见的布局方式。

max-width（最大宽度） min-width（最小宽度）

max-height（最大高度） min-height（最小高度）

（三）移动端技术解决方案

1. 移动端浏览器

（1）移动端浏览器基本以webkit内核为主，因此考虑webkit兼容性问题，可使用H5标签和CSS3样式；

（2）浏览器的私有前缀只需要考虑添加webkit即可；

2. css初始化normalize.css的优点：

（1）保护了有价值的默认值

（2）修复了浏览器bug

（3）是模块化的

（4）拥有详细的文档

3. css3盒子模型box-sizing

（1）传统模式宽度计算:盒子的宽度=CSS中设置的width + border + padding

（2）CSS3盒子模型:盒子的宽度=CSS中设置的宽度width里面包含了border和padding也就是说，CSS3中的盒子模型，padding和border不会撑大盒子了

4. 特殊样式

五、移动WEB开发之flex布局

1. 传统布局和flex布局

（1）传统布局

① 兼容性好、布局繁琐；

② 局限性，不能再移动端很好地布局；

（2）flex弹性布局

① 操作方便，布局极为简单，移动端应用很广泛；

② PC端浏览器支持情况较差；

③ IE11或更低版本，不支持或仅部分支持。

2. flex布局与普通布局对比

（1）未加display：flex

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>flex</title>
    <style>
      div {
        width: 80%;
        height: 300px;
        background-color: skyblue;
      }
      div span {
        width: 200px;
        height: 100px;
        margin-right: 5px;
        background-color: pink;
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <div>
      <span>1</span>
      <span>2</span>
      <span>3</span>
    </div>
  </body>
</html>

（2）加了display：flex

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>flex</title>
    <style>
      div {
        display: flex;
        justify-content: space-around;
        width: 80%;
        height: 300px;
        background-color: skyblue;
      }
      div span {
        width: 200px;
        height: 100px;
        margin-right: 5px;
        background-color: pink;
        border: 1px solid black;
        flex: 1;
      }
    </style>
  </head>
  <body>
    <div>
      <span>1</span>
      <span>2</span>
      <span>3</span>
    </div>
  </body>
</html>

3. 布局原理

（1）当父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效；

（2）伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex布局；

（3）通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。

4. 常见的父项属性

（1）flex-direction :设置主轴的方向；

① 在flex布局中分为主轴和侧轴（也称为行和列、x轴和y轴）；

② 默认主轴方向就是x轴方向，水平向右；默认侧轴方向就是y轴方向，水平向下。

③ 具体代码及结果：

<style>
  div {
    /* 給父级添加flex属性 */
    display: flex;
    /* 默认的主轴是x轴 行 row ，那么Y轴是侧轴，且我们的元素根据主轴来排列*/
    /* 翻转  */
    /* flex-direction: row-reverse; */
    /* y轴 */
    flex-direction: column;
    width: 80%;
    height: 300px;
    background-color: skyblue;
  }
  div span {
    width: 200px;
    height: 100px;
    margin-right: 5px;
    background-color: pink;
    border: 1px solid black;
    flex: 1;
  }
</style>

<body>
  <div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
  </div>
</body>

（2）justify-content :设置主轴上的子元素排列方式；

① 具体代码及结果：

<style>
  div {
    /* 給父级添加flex属性 */
    display: flex;
    /* 默认的主轴是x轴 行 row ，那么Y轴是侧轴，且我们的元素根据主轴来排列*/
    flex-direction: row;
    /* justify-content:设置主轴上排列方式; */
    /* justify-content: center; */
    /* 平分剩余空间 */
    /* justify-content: space-around; */
    /* 先两边贴边再分配剩余的空间 */
    justify-content: space-between;
    width: 80%;
    height: 300px;
    background-color: skyblue;
  }
  div span {
    width: 200px;
    height: 100px;
    margin-right: 5px;
    background-color: pink;
    border: 1px solid black;
  }
</style>

<body>
  <div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
  </div>
</body>

（3）flex-wrap :设置子元素是否换行；

① 默认情况下，项目都排在一条线上（又称“轴线”），flex-wrap属性定义，flex布局中默认不换行。

② 属性分为：nowrap（不换行）和wrap（换行）；

③ 具体代码和结果：

<style>
  div {
    /* 給父级添加flex属性 */
    display: flex;
    width: 600px;
    height: 300px;
    background-color: skyblue;
    /* flex布局中，默认的子元素是不换行的，如果装不开会缩小子元素的宽度，放到父元素中 */
    flex-wrap: wrap;
  }
  div span {
    width: 150px;
    height: 100px;
    margin: 10px;
    background-color: pink;
  }
</style>

<body>
  <div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
  </div>
</body>

（4）align-content :

① 设置侧轴上的子元素的排列方式(多行)；设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况(多行），在单行下是没有效果的；

② 属性值：

③ 具体代码和结果：

<style>
  div {
    /* 給父级添加flex属性 */
    display: flex;
    width: 600px;
    height: 400px;
    background-color: skyblue;
    flex-wrap: wrap;
    /* 因为有了换行，此时侧轴上控制子元素的对齐方式为align-content */
    /* align-content: center; */
    /* align-content: space-between; */
    align-content: space-around;
  }
  div span {
    width: 150px;
    height: 100px;
    margin: 10px;
    background-color: pink;
  }
</style>

<body>
  <div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
  </div>
</body>

（5）align-items :设置侧轴上的子元素排列方式(单行)；

① 在子项为单项（单行）的时候使用；

② 属性值：

③ 具体代码和结果：

<style>
  div {
    /* 給父级添加flex属性 */
    display: flex;
    width: 600px;
    height: 400px;
    background-color: skyblue;
    /* 默认主轴是x轴 */
    justify-content: center;
    /* 侧轴居中 */
    /* align-items: center; */
    /* 拉伸，但是子盒子不要给高度 */
    /* align-items: stretch; */
    align-items: center;
  }
  div span {
    width: 150px;
    /* height: 100px; */
    margin: 10px;
    background-color: pink;
  }
</style>

<body>
  <div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
  </div>
</body>

*align-items与align-content的区别

① align-items 适用于单行情况下，只有上对齐、下对齐、居中和拉伸；

② align-content 适用于换行(多行）的情况下（单行情况下无效），可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值；

③ 总结就是单行找align-items 多行找 align-content。

（6）flex-flow :复合属性，相当于同时设置了flex-direction和flex-wrap。

flex-flow: row wrap;

5. flex布局子项常见属性

（1）flex子项目占的份数；

① flex属性定义子项目分配其剩余空间，用flex设置所占份数；

② 具体代码和结果：

<style>
  section {
    display: flex;
    width: 60%;
    height: 150px;
    background-color: skyblue;
    margin: 100px auto;
  }

  section div:nth-child(1) {
    width: 100px;
    height: 150px;
    background-color: aquamarine;
  }

  section div:nth-child(2) {
    flex: 1;
    background-color: pink;
  }

  section div:nth-child(3) {
    width: 100px;
    height: 150px;
    background-color: cornflowerblue;
  }

  p {
    display: flex;
    width: 60%;
    height: 150px;
    background-color: pink;
    margin: 0 auto;
  }

  p span {
    flex: 1;
    border: 1px solid black;
  }
  p span:nth-child(2) {
    flex: 2;
  }
</style>

<body>
  <section>
    <div></div>
    <div></div>
    <div></div>
  </section>
  <p>
    <span>1</span>
    <span>2</span>
    <span>3</span>
  </p>
</body>

（2）align-self :控制子项自己在侧轴的排列方式；

① align-self属性允许单个项目有与其他项目不同的对齐方式，可覆盖align-items属性；

② 默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch；

（3）order :定义子项的排列顺序（前后顺序）；

① 数值越小，排列越靠前，默认为0。

② 具体代码和结果：

<style>
  div {
    display: flex;
    width: 80%;
    height: 300px;
    background-color: pink;
    /* 让三个盒子沿侧轴底侧对齐 */
    /* align-items: flex-end; */
    /* 只想让三号盒子沿侧轴底侧对齐 */
  }

  div span {
    width: 150px;
    height: 100px;
    background-color: skyblue;
    margin-right: 5px;
  }

  div span:nth-child(2) {
    /* 默认是0，-1比0小所以在前面 */
    order: -1;
  }

  div span:nth-child(3) {
    align-self: flex-end;
  }
</style>

<body>
  <div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
  </div>
</body>

*线性渐变（必须加上浏览器私有前缀）

起始方向可以是:方位名词或者度数，如果省略默认就是top。

具体代码及结果：

<style>
  div {
    width: 600px;
    height: 180px;
    background: -webkit-linear-gradient(top left, red, blue);
  }
</style>

六、移动WEB开发之rem适配布局

1. 基础和特点

（1）rem (root em)是一个相对单位，类似于em；

（2）em是父元素字体大小，而rem的基准是相对于html元素的字体大小；

例如：根元素(html）设置font-size:12px，非根元素设置width:2rem，则换成px表示就是24px。

（3）可以通过修改html里面的文字大小来改变页面中元素的大小，从而整体控制。

2. 媒体查询

（1）特点

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

② @media可以针对不同的屏幕尺寸设置不同的样式；

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

④ 应用广泛，目前针对很多苹果手机、Android手机，平板等。

（2）语法规范

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

① 使用@media开头；

② mediatype：媒体类型；

③ 关键字and not only；

④ media featur：媒体特性（必须包含在小括号内）。

（3）媒体特性

① 每种媒体类型都具有不同的特性，根据不同的媒体类型的媒体特性可设置不同的展示风格（包含在小括号里）；

② 属性值：

③ 具体代码及结果：

/* 这句话的意思是：在屏幕上并且最大的宽度是800像素 */
/* max-width 小于等于 */
/* 此处代表当body的宽度小于等于800像素时，则背景颜色为skyblue */
@media screen and (max-width: 800px) {
  body {
    background-color: skyblue;
  }
}

@media screen and (min-width: 800px) {
  body {
    background-color: pink;
  }
}

（4）引入资源

① 原理：直接在link中判断设备的尺寸，根据不同的尺寸引用不同的css文件；

② 语法规范：

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

3. less基础

（1）css缺点

① CSS是一门非程序式语言，没有变量、函数、SCOPE (作用域）等概念

② CSS需要书写大量看似没有逻辑的代码，CSS冗余度是比较高的；

③ 不方便维护及扩展，不利于复；

④ CSS没有很好的计算能力；

⑤ 非前端开发工程师来讲，往往会因为缺少CSS编写经验而很难写出组织良好且易于维护的CSS代码项目。

（2）less介绍

*总结：Less是一门css预处理语言，扩展了css的动态特性。

① Less ( Leaner Style Sheets的缩写）是一门CSS扩展语言，也成为CSS预处理器；

② 做为CSS的一种形式的扩展，它并没有减少CSS的功能，而是在现有的CSS语法上，为CSS加入程序式语言的特性；

③ 在CSS的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了CSS的编写，并且降低了CSS的维护成本，就像它的名称所说的那样，Less 可以让我们用更少的代码做更多的事情。

（3）Less使用

① Less变量

变量是指没有固定的值，可以改变的。因为我们CSS中的一些颜色和数值等经常使用。

格式：@变量名：值；

变量命名规范：

a. 必须以@为前缀；

b. 不能包含特殊字符；

c. 不能以数字开头；

d. 大小写敏感。

② less编译

a. 本质上，Less包含—套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的CSS文件。（即将文件后缀名设置为less）

b. 编译方法：使用vocode less插件（Easy LESS插件用来把less文件编译为css文件）。

③ less嵌套

① 具体代码和结果：

//less文件中的代码
.header {
    width: 200px;
    height: 200px;
    background-color: pink;
    // 1.less嵌套 子元素的样式直接写到父元素里面
    a {
        color: red;
        font-size: 20px;
    // 2.伪类选择器、伪元素选择器、交集选择器，需要再内层选择器的前面加&
        &:hover {
            color: blue;
        }
    }
}

.nav {
    font-size: 30px;
    width: 300px;
    height: 300px;
    background-color: skyblue;
    .logo {
        color: red;
    }
    &::before {
        content: "";
        display: block;
        width: 100px;
        height: 100px;
        background-color: purple;
    }
}

//css文件中的代码
.header {
  width: 200px;
  height: 200px;
  background-color: pink;
}
.header a {
  color: red;
  font-size: 20px;
}
.header a:hover {
  color: blue;
}
.nav {
  font-size: 30px;
  width: 300px;
  height: 300px;
  background-color: skyblue;
}
.nav .logo {
  color: red;
}
.nav::before {
  content: "";
  display: block;
  width: 100px;
  height: 100px;
  background-color: purple;
}

④ less运算

a. 运算符的左右两侧必须加上空格；

b. 两个数参与运算，如果只有一个数有单位，则最终结果以这个单位为准；

c. 两个数参与运算，如果两个数都有单位且单位不一样，则最终结果以第一个单位为准。

d. 具体代码和结果：

//less文件中代码
@border: 5px + 5;
div {
    width: (200px - 50) * 2;
    height: 200px * 2;
    border: @border solid black;
    background-color: #666 - #222;
}
img {
    width: (82rem / 50px);
    height: (82 / 50rem);
}

//css文件中代码
div {
  width: 300px;
  height: 400px;
  border: 10px solid black;
  background-color: #444444;
}
img {
  width: 1.64rem;
  height: 1.64rem;
}