移动端Web开发

apzs...大约 51 分钟

移动端Web开发

一、移动端开发

1. 移动端基础

1.1 浏览器现状

PC端常见浏览器 & 移动端常见浏览器

PC端常见浏览器 360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器。 移动端常见浏览器 UC浏览器，QQ浏览器，欧朋浏览器，百度手机浏览器，360安全浏览器，谷歌浏览器，搜狗手机浏览器，猎豹浏览器，以及其他杂牌浏览器。

国内的UC和QQ，百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自主研发的内核。 总结：兼容移动端主流浏览器，处理Webkit内核浏览器即可。

1.2 手机屏幕现状

移动端设备屏幕尺寸非常多，碎片化严重。
Android设备有多种分辨率: 480x800， 480x854， 540x960， 720x1280 ， 1080x1920等，还有传说中的2K ， 4k屏。
近年来iPhone的碎片化也加剧了，其设备的主要分辨率有: 640x960， 640x1 136， 750x1334， 1242x2208等。
作为开发者无需关注这些分辨率，因为我们常用的尺寸单位是px。

1.3 移动端调试方法

Chrome DevTools（谷歌浏览器）的模拟手机调试
搭建本地web服务器，手机和服务器一个局域网内，通过手机访问服务器
使用外网服务器，直接IP或域名访问

1.4 总结

移动端浏览器我们主要对webkit内核进行兼容
我们现在开发的移动端主要针对手机端开发
现在移动端碎片化比较严重，分辨率和屏幕尺寸大小不一
学会用谷歌浏览器模拟手机界面以及调试

2. 视口

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

2.1 布局视口 layout viewport

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

2.2 视觉视口 visual viewport

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

2.3 理想视口 ideal viewport

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

2.4 meta视口标签

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

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

2.5 总结

视口就是浏览器显示页面内容的屏幕区域
视口分为布局视口、视觉视口和理想视口
我们移动端布局想要的是理想视[ 就是手机屏幕有多宽，我们的布局视口就有多宽
想要理想视口，我们需要给我们的移动端页面添加meta视口标签

2.6 标准的viewport设置

视口宽度和设备保持一致：width=device-width
视口的默认缩放比例 1.0：initial-scale=1.0
不允许用户自行缩放：user-scalable=no
最大允许的缩放比例 1.0：maximum-scale=1.0
最小允许的缩放比例 1.0：minimum-scale=1.0

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

3. 二倍图

3.1 物理像素&物理像素比

物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。这是商在出厂时就设置好了，比如苹果6\7\8是750*1334
我们开发时候的1px不是一定等于1个物理像素的心
PC端页面，1个px等于1个物理像素的,但是移动端就不尽相同
一个px的能显示的物理像素点的个数，称为物理像素比或屏幕像素比
PC端和早前的手机屏幕/普通手机屏幕：1CSS像素= 1 物理像素的，物理像素比为 1。而移动端就不尽相同，例如iphone6/7/8的物理像素比为 2。
Retina (视网膜屏幕)是一种显示技术，可以将把更多的物理像素点压缩至一块屏幕里，从而达到更高的分辨率,并提高屏幕显示的细腻程度。

3.2 二倍图

准备的图片比实际大小大 2 倍，这就是二倍图。

3.3 二倍图解决方案

我们需要一个 5050 像素（CSS像素）的图片，直接放到 iphone8 里面会放大 2 倍 100 100 会模糊。
我们采取的是放一个 100100 图片然后手动的把这个图片缩小为 50 50（css像素）
我们准备的图片比我们实际需要的大小大 2 倍，这就方式就是2倍图

3.4 多倍图

对于一张50px * 50px的图片，在手机Retina屏中打开,按照刚才的物理像素比会放大倍数,这样会造成图片模糊
在标准的viewport设置中,使用倍图来提高图片质量,解决在高清设备中的模糊问题
通常使用二倍图,因为iPhone 6\7\8的影响，但是现在- 还存在3倍图4倍图的情况,这个看实际开发公司需求
背景图片注意缩放问题
实际开发中，使用PS切图可以按照需要切出2/3倍图。

3.5 背景缩放 background-size

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

background-size: 背景图片宽度 背景图片高度 | 宽度 | 百分比 | cover | contain;

只写一个参数肯定是宽度高度省略了会等比例缩放
单位可以给百分比
cover 完全覆盖盒子，图片可能有部分显示不全
contain 是盒子完全包含图片，图片拉伸到最大

4. 移动端开发选择

4.1 移动端主流方案

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

京东商城手机版、淘宝触屏版

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

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

三星手机官网：www.samsung.com。open in new window

通过判断屏幕宽度来改编样式，响应式兼容不同终端。缺点：制作麻烦，需要花费大量精力取调兼容新问题。

4.2 总结

现在市场常见的移动端开发有 单独制作移动端页面 和 响应式页面 两种方案。现在市场 主流的选择还是单独制作移动端页面。

5. 移动端技术解决方案

5.1 移动端浏览器

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

5.2 CSS初始化

移动端初始化推荐使用 normalize.css，优点：

保护了有价值的默认值
修复了浏览器的bug
是模块化的
拥有详细的文档

官网：https://necolas.github.io/normalize.css/

5.3 CSS3 盒子模型 box-sizing

传统盒子模型宽度计算：盒子宽度 = CSS中设置的 width + border + padding
CSS3 传统盒子模型：盒子宽度 = CSS中设置的 width（包含了border+padding）。也就是说，CSS3盒子模型的padding和border不会再撑大盒子了。

/* CSS3盒子模型 */
box-sizing: border-box;
/* 传统盒子模型 */
box-sizing: content-box;

传统 or CSS3盒子模型？

移动端可以全部CSS3盒子模型
PC端如果完全需要兼容，就用传统默默是；不考虑兼容性，选择CSS3盒子模型。

5.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;}

6. 移动端常见布局

6.1 移动端技术选型

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

流式布局（百分比布局）
flex 弹性布局（强烈推荐）
less + rem + 媒体查询布局
混合布局

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

媒体查询
bootstrap

二、流式布局(百分比布局)

流式布局，就是百分比布局，也称非固定像素布局。
通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充
流式布局方式是移动web开发使用的比较常见的布局方式。
max-width 最大宽度（max-height 最大高度）
min-width 最小宽度（min-height 最小高度）

1 流式布局举例

/* 1. 主体大盒子设置为 100% */
body {
    width: 100%;
    min-width: 320px;
    max-width: 640px;
}
/* 2. 主体的某一块区域，不设置高度和宽度 */
/* 3. 该区域内的部分按照比例分配宽度，设置浮动。 */
.seckill div:nth-child(2) ul li {
    /* 共6块区域，1/6=16.66% */
    width: 16.66%;
    display: block;
    float: left;
}
/* 4. 小区域内部放置的图片设置宽度为 100% */
.seckill div:nth-child(2) ul li img {
    width: 100%;
}

2 流式布局案例：京东移动端首页

案例模板：https://m.jd.com/
代码参考（本人）：https://www.aliyundrive.com/s/u8SmJQP1vjy

3 二倍精灵图做法

在 firework 里面把精灵图等比例缩放为原来的一半（使用fireworks修改宽度和高度即可缩放）
之后根据大小测坐标（然后测量x、y坐标）
注意代码里 background-size 也要写：精灵图原来宽度的一半

/* 将图片在img盒子里向左移动81px，这样img盒子0px位置就是图片81px的位置 */
background: url(../images/jd-sprites.png) no-repeat -81px 0;
/* 原始图大小为400px左右，显示的时候缩小1倍，这样用户放大的时候图片也会很清晰 */
background-size: 200px auto;

4. 图片格式

webp 图片格式

谷歌开发的一种旨在 加快图片加载速度 的图片格式。图片压缩体积大约只有JPEG的2/3，并能 节省大量的服务器宽带资源和数据空间。

二、flex 布局（主流，兼容性还行） ⭐

1. flex 布局优势

1.1 传统布局与flex布局

1.1.1 传统布局

兼容性好
布局繁琐
局限性，不能再移动端很好的布局

1.1.2 flex 弹性布局

操作方便，布局简单，移动端应用很广泛
PC端浏览器支持情况差
IE11或更低版本，不支持或部分支持

1.1.3 建议

若是PC端布局，建议传统布局。
若是移动端布局或者不考虑兼容性的PC端布局，还是使用flex弹性布局。

2. flex 布局原理

flex 是 flexible Box 的缩写，意为 “弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。

为父盒子设为 flex 布局后，子元素的 float、clear、vertical-align 属性将失效。
伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布 = flex 布局

采用 Flex 布局的元素，称为 Flex容器（flex container），简称 “容器”。它的所有子元素自动成为容器成员，称为 Flex项目（flex item），简称 “项目”。

flex项目本身也可以成为容器，称为子容器。则上一级则称为父容器。
子容器可以横向排列也可以纵向排列。
原理总结：通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。

3. flex 布局父项常见属性

3.1 常见父项属性

以下由 6 个属性是对父元素设置的。

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

3.2 flex-direction ⭐

flex-direction 设置主轴方向。

3.2.1 主轴与侧轴

在 flex 布局中，分为主轴和侧轴两个方向，同时的叫法有：行和列、x轴和y轴。

默认主轴方向为 x 轴方向，水平向右
默认侧轴方向为 y 轴方向，垂直向下

3.2.2 属性值

flex-direction 属性决定主轴的方向（即项目的排列方向）注意：主轴和侧轴是会变化的，取决于 flex-direction 设置谁为主轴，则另外一个即为侧轴。子元素是靠主轴来排列的。

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

3.3 justify-content ⭐

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

Warning

使用此属性之前一定要确定好主轴是哪个。

属性值	说明
flex-start	默认值，从头部开始，若主轴是x轴，则从左到右
flex-end	从尾部开始排列
center	在主轴剧中对齐（若主轴是x，则水平居中）
space-around	平分剩余空间
space-between	先向两边贴紧，再平分剩余空间（重要）

3.4 flex-wrap ⭐

flex-wrap 设置子元素是否换行。默认情况下，项目都排在一条线（又称轴线）上，flex-wrap 属性定义，flex 布局中默认是不换行的。

Tip

若父盒子一行上装不开，则会缩小子元素的宽度，从而仍然一行显示。

属性值	说明
nowrap	默认值，不换行
wrap	换行
wrap-reverse	反向换行

3.5 align-items ⭐

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

该属性控制子项在侧轴（默认是y轴）上的排列方式，在子项为单项的时候使用。

属性值	说明
flex-start	从上到下
flex-end	从下到上
center	挤在一起（垂直居中）
strech	拉伸（默认值）

3.6 align-content

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

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

属性值	说明
flex	默认值，在侧轴的头部开始排列
flex-end	在侧轴的尾部开始排列
center	在侧轴中间显示
space-around	子项在侧轴平分剩余空间
space-between	子项在侧轴先分布在两头，再平分剩余空间
strech	设置子项元素高度任意平分父元素高度

3.7 align-content 和 align-items 区别

align-items 适用于单行情况下，只有上下对齐、居中和拉伸
align-content 适用于 **换行（多行）**情况下（单行情况下无效），可以设置上对齐、下对齐、居中、拉伸以及平分剩余空间等属性值

Tip

单行用 align-items，多行用 align-content。

3.8 flex-flow 以及小总结

flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性。

flex-flow: row wrap;

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

4. flex 布局子项常见属性

4.1 flex 属性 ⭐

flex 属性定义子项目 分配剩余空间，用 flex 表示占多少份数。flex 的值可以是整数，可以是百分数。

.item {
    flex: <number>; /*default 0*/
}

Tip

例如要平分一个盒子，则不给定子元素宽度（高度），然后给每一个子元素设置属性：flex: 1。

4.2 align-self

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

align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 strech。

属性值	描述
`auto`	默认值，继承父盒子的 align-items 值。
`strech`	元素被拉伸以适应容器。
`center`	元素位于容器的中心
`flex-start`	元素位于容器的开头
`flex-end`	元素位于容器的结尾

4.3 order

order 属性定义项目的排列顺序。

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

Attention

注意：和 z-index 不一样。

5. 携程网首页案例制作

5.1 技术选型

方案：单独制作移动端页面
技术：布局采用flex布局

5.2 背景线性突变

语法1：用于移动端，必须带私有前缀 -webkit-

background: -webkit-linear-gradient(left, red, blue);
background: -webkit-linear-gradient(top left, red, blue);

三、grid 布局（强大，但是兼容性不太好）

最强大的 CSS 布局 —— Grid 布局open in new window

1. Grid 布局是什么？

Grid 布局即网格布局，是一种新的 CSS 布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。号称是最强大的的 CSS 布局方案，是目前唯一一种 CSS 二维布局。利用 Grid 布局，我们可以轻松实现类似下图布局，演示地址open in new window

2. Grid 布局和 flex 布局

讲到布局，我们就会想到 flex 布局，甚至有人认为竟然有 flex 布局了，似乎没有必要去了解 Grid 布局。但 flex 布局和 Grid 布局有实质的区别，那就是 flex 布局是一维布局，Grid 布局是二维布局。flex 布局一次只能处理一个维度上的元素布局，一行或者一列。Grid 布局是将容器划分成了“行”和“列”，产生了一个个的网格，我们可以将网格元素放在与这些行和列相关的位置上，从而达到我们布局的目的。

Grid 布局远比 flex 布局强大！

flex布局示例:

Grid 布局示例：

3. Grid 的一些基础概念

我们使用 Grid 实现一个小例子，演示 Grid 的一些基础概念，演示地址open in new window

<div class="wrapper">
  <div class="one item">One</div>
  <div class="two item">Two</div>
  <div class="three item">Three</div>
  <div class="four item">Four</div>
  <div class="five item">Five</div>
  <div class="six item">Six</div>
</div>

.wrapper {
  margin: 60px;
  /* 声明一个容器 */
  display: grid;
  /*  声明列的宽度  */
  grid-template-columns: repeat(3, 200px);
  /*  声明行间距和列间距  */
  grid-gap: 20px;
  /*  声明行的高度  */
  grid-template-rows: 100px 200px;
}
.one {
  background: #19CAAD;
}
.two { 
  background: #8CC7B5;
}
.three {
  background: #D1BA74;
}
.four {
  background: #BEE7E9;
}
.five {
  background: #E6CEAC;
}
.six {
  background: #ECAD9E;
}
.item {
  text-align: center;
  font-size: 200%;
  color: #fff;
}

容器和项目：我们通过在元素上声明 display：grid 或 display：inline-grid 来创建一个网格容器。一旦我们这样做，这个元素的所有直系子元素将成为网格项目。比如上面 .wrapper 所在的元素为一个网格容器，其直系子元素将成为网格项目。

网格轨道：grid-template-columns 和 grid-template-rows 属性来定义网格中的行和列。容器内部的水平区域称为行，垂直区域称为列。上图中 One、Two、Three 组成了一行，One、Four 则是一列

网格单元：一个网格单元是在一个网格元素中最小的单位，从概念上来讲其实它和表格的一个单元格很像。上图中 One、Two、Three、Four...都是一个个的网格单元

网格线：划分网格的线，称为"网格线"。应该注意的是，当我们定义网格时，我们定义的是网格轨道，而不是网格线。Grid 会为我们创建编号的网格线来让我们来定位每一个网格元素。m 列有 m + 1 根垂直的网格线，n 行有 n + 1 跟水平网格线。比如上图示例中就有 4 根垂直网格线。一般而言，是从左到右，从上到下，1，2，3 进行编号排序。当然也可以从右到左，从下到上，按照 -1，-2，-3...顺序进行编号排序

4. 容器属性介绍

Grid 布局相关的属性以及值众多，需要记忆的不少，建议可以跟 demo 一起结合起来，边敲代码边理解，再利用一些空闲时间记忆一下。笔者会在介绍每个属性的时候，做个小 demo 演示，建议大家可以自己修改看看效果加深记忆

Grid 布局属性可以分为两大类，一类是容器属性，一类是项目属性。我们先来看容器属性

display 属性

display 属性演示open in new window

我们通过在元素上声明 display：grid 或 display：inline-grid 来创建一个网格容器。声明 display：grid 则该容器是一个块级元素，设置成 display: inline-grid 则容器元素为行内元素

.wrapper {
  display: grid;
}

.wrapper-1 {
  display: inline-grid;
}

grid-template-columns 属性和 grid-template-rows 属性

grid-template-columns 和 grid-template-rows 属性演示地址open in new window

grid-template-columns 属性设置列宽，grid-template-rows 属性设置行高，这两个属性在 Grid 布局中尤为重要，它们的值是有多种多样的，而且它们的设置是比较相似的，下面针对 grid-template-columns 属性进行讲解

固定的列宽和行高

.wrapper {
  display: grid;
  /*  声明了三列，宽度分别为 200px 100px 200px */
  grid-template-columns: 200px 100px 200px;
  grid-gap: 5px;
  /*  声明了两行，行高分别为 50px 50px  */
  grid-template-rows: 50px 50px;
}

以上表示固定列宽为 200px 100px 200px，行高为 50px 50px

repeat() 函数：可以简化重复的值。该函数接受两个参数，第一个参数是重复的次数，第二个参数是所要重复的值。比如上面行高都是一样的，我们可以这么去实现，实际效果是一模一样的

.wrapper-1 {
  display: grid;
  grid-template-columns: 200px 100px 200px;
  grid-gap: 5px;
  /*  2行，而且行高都为 50px  */
  grid-template-rows: repeat(2, 50px);
}

auto-fill 关键字：表示自动填充，让一行（或者一列）中尽可能的容纳更多的单元格。grid-template-columns: repeat(auto-fill, 200px) 表示列宽是 200 px，但列的数量是不固定的，只要浏览器能够容纳得下，就可以放置元素，代码以及效果如下图所示：

.wrapper-2 {
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-gap: 5px;
  grid-auto-rows: 50px;
}

fr 关键字：Grid 布局还引入了一个另外的长度单位来帮助我们创建灵活的网格轨道。fr 单位代表网格容器中可用空间的一等份。grid-template-columns: 200px 1fr 2fr 表示第一个列宽设置为 200px，后面剩余的宽度分为两部分，宽度分别为剩余宽度的 1/3 和 2/3。代码以及效果如下图所示：

.wrapper-3 {
  display: grid;
  grid-template-columns: 200px 1fr 2fr;
  grid-gap: 5px;
  grid-auto-rows: 50px;
}

minmax() 函数：我们有时候想给网格元素一个最小和最大的尺寸，minmax() 函数产生一个长度范围，表示长度就在这个范围之中都可以应用到网格项目中。它接受两个参数，分别为最小值和最大值。grid-template-columns: 1fr 1fr minmax(300px, 2fr) 的意思是，第三个列宽最少也是要 300px，但是最大不能大于第一第二列宽的两倍。代码以及效果如下：

.wrapper-4 {
  display: grid;
  grid-template-columns: 1fr 1fr minmax(300px, 2fr);
  grid-gap: 5px;
  grid-auto-rows: 50px;
}

auto 关键字：由浏览器决定长度。通过 auto 关键字，我们可以轻易实现三列或者两列布局。grid-template-columns: 100px auto 100px 表示第一第三列为 100px，中间由浏览器决定长度，代码以及效果如下：

.wrapper-5 {
  display: grid;
  grid-template-columns: 100px auto 100px;
  grid-gap: 5px;
  grid-auto-rows: 50px;
}

grid-row-gap 属性、grid-column-gap 属性以及 grid-gap 属性

grid-row-gap 属性、grid-column-gap 属性以及 grid-gap 属性演示地址open in new window

grid-row-gap 属性、grid-column-gap 属性分别设置行间距和列间距。 grid-gap 属性是两者的简写形式。

grid-row-gap: 10px 表示行间距是 10px，grid-column-gap: 20px 表示列间距是 20px。grid-gap: 10px 20px 实现的效果是一样的

.wrapper {
  display: grid;
  grid-template-columns: 200px 100px 100px;
  grid-gap: 10px 20px;
  grid-auto-rows: 50px;
}
.wrapper-1 {
  display: grid;
  grid-template-columns: 200px 100px 100px;
  grid-auto-rows: 50px;
  grid-row-gap: 10px;
  grid-column-gap: 20px;
}

以上两种写法效果是一样的。

grid-template-areas 属性

grid-area 以及 grid-template-areas演示地址open in new window

grid-template-areas 属性用于定义区域，一个区域由一个或者多个单元格组成

一般这个属性跟网格元素的 grid-area 一起使用，我们在这里一起介绍。 grid-area 属性指定项目放在哪一个区域

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 120px  120px  120px;
  grid-template-areas:
    ". header  header"
    "sidebar content content";
  background-color: #fff;
  color: #444;
}

上面代码表示划分出 6 个单元格，其中值得注意的是 . 符号代表空的单元格，也就是没有用到该单元格。

.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
}

.header {
  grid-area: header;
}

以上代码表示将类 .sidebar .content .header所在的元素放在上面 grid-template-areas 中定义的 sidebar content header 区域中

grid-auto-flow 属性

grid-auto-flow 属性演示地址open in new window

grid-auto-flow 属性控制着自动布局算法怎样运作，精确指定在网格中被自动布局的元素怎样排列。默认的放置顺序是"先行后列"，即先填满第一行，再开始放入第二行，即下图英文数字的顺序 one,two,three...。这个顺序由 grid-auto-flow 属性决定，默认值是 row。

.wrapper {
  display: grid;
  grid-template-columns: 100px 200px 100px;
  grid-auto-flow: row;
  grid-gap: 5px;
  grid-auto-rows: 50px;
}

细心的同学可能发现了一个问题，就是第五个项目和第六个项目之间有个空白（如下图所示），这个是由于第六块的长度大于了空白处的长度，被挤到了下一行导致的。在实际应用中，我们可能想让下面长度合适的填满这个空白，这个时候可以设置 grid-auto-flow: row dense，表示尽可能填满表格。代码以及效果如下所示：

.wrapper-2 {
  display: grid;
  grid-template-columns: 100px 200px 100px;
  grid-auto-flow: row dense;
  grid-gap: 5px;
  grid-auto-rows: 50px;
}

可以设置 grid-auto-flow: column，表示先列后行，代码以及效果如下图所示：

.wrapper-1 {
  display: grid;
  grid-auto-columns: 100px;
  grid-auto-flow: column;
  grid-gap: 5px;
  grid-template-rows:  50px 50px;
}

justify-items 属性、align-items 属性以及 place-items 属性

justify-items 属性、align-items 属性演示地址open in new window

justify-items 属性设置单元格内容的水平位置（左中右），align-items 属性设置单元格的垂直位置（上中下）

下面以 justify-items 属性为例进行讲解，align-items 属性同理，只是方向为垂直方向。它们都有如下属性：

.container {
  justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch;
}

其代码实现以及效果如下：

.wrapper, .wrapper-1, .wrapper-2, .wrapper-3 {
  display: grid;
  grid-template-columns: 100px 200px 100px;
  grid-gap: 5px;
  grid-auto-rows: 50px;
  justify-items: start;
}
.wrapper-1 {
  justify-items: end;
}
.wrapper-2 {
  justify-items: center;
}
.wrapper-3 {
  justify-items: stretch;
}

start：对齐单元格的起始边缘

end：对齐单元格的结束边缘

center：单元格内部居中

stretch：拉伸，占满单元格的整个宽度（默认值）

justify-content 属性、align-content 属性以及 place-content 属性

justify-content 属性、align-content 属性演示地址open in new window

justify-content 属性是整个内容区域在容器里面的水平位置（左中右），align-content 属性是整个内容区域的垂直位置（上中下）。它们都有如下的属性值。

.container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;  
}

下面以 justify-content 属性为例进行讲解，align-content 属性同理，只是方向为垂直方向

start - 对齐容器的起始边框
end - 对齐容器的结束边框
center - 容器内部居中

.wrapper, .wrapper-1, .wrapper-2, .wrapper-3, .wrapper-4, .wrapper-5, .wrapper-6 {
  display: grid;
  grid-template-columns: 100px 200px 100px;
  grid-gap: 5px;
  grid-auto-rows: 50px;
  justify-content: start;
}
.wrapper-1 {
  justify-content: end;
}
.wrapper-2 {
  justify-content: center;
}

space-around - 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍
space-between - 项目与项目的间隔相等，项目与容器边框之间没有间隔
space-evenly - 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔
stretch - 项目大小没有指定时，拉伸占据整个网格容器

.wrapper-3 {
  justify-content: space-around;
}
.wrapper-4 {
  justify-content: space-between;
}
.wrapper-5 {
  justify-content: space-evenly;
}
.wrapper-6 {
  justify-content: stretch;
}

grid-auto-columns 属性和 grid-auto-rows 属性

grid-auto-columns 属性和 grid-auto-rows 属性演示地址open in new window

在讲 grid-auto-columns 属性和 grid-auto-rows 属性之前，先来看看隐式和显示网格的概念

隐式和显示网格：显式网格包含了你在 grid-template-columns 和 grid-template-rows 属性中定义的行和列。如果你在网格定义之外又放了一些东西，或者因为内容的数量而需要的更多网格轨道的时候，网格将会在隐式网格中创建行和列

假如有多余的网格（也就是上面提到的隐式网格），那么它的行高和列宽可以根据 grid-auto-columns 属性和 grid-auto-rows 属性设置。它们的写法和 grid-template-columns 和 grid-template-rows 完全相同。如果不指定这两个属性，浏览器完全根据单元格内容的大小，决定新增网格的列宽和行高

.wrapper {
  display: grid;
  grid-template-columns: 200px 100px;
/*  只设置了两行，但实际的数量会超出两行，超出的行高会以 grid-auto-rows 算 */
  grid-template-rows: 100px 100px;
  grid-gap: 10px 20px;
  grid-auto-rows: 50px;
}

grid-template-columns 属性和 grid-template-rows 属性只是指定了两行两列，但实际有九个元素，就会产生隐式网格。通过 grid-auto-rows 可以指定隐式网格的行高为 50px

5. 项目属性介绍

grid-column-start 属性、grid-column-end 属性、grid-row-start 属性以及grid-row-end 属性

演示地址open in new window

可以指定网格项目所在的四个边框，分别定位在哪根网格线，从而指定项目的位置

grid-column-start 属性：左边框所在的垂直网格线
grid-column-end 属性：右边框所在的垂直网格线
grid-row-start 属性：上边框所在的水平网格线
grid-row-end 属性：下边框所在的水平网格线

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
  grid-auto-rows: minmax(100px, auto);
}
.one {
  grid-column-start: 1;
  grid-column-end: 2;
  background: #19CAAD;
}
.two { 
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 2;
  /*   如果有重叠，就使用 z-index */
  z-index: 1;
  background: #8CC7B5;
}
.three {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 4;
  background: #D1BA74;
}
.four {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 2;
  grid-row-end: 5;
  background: #BEE7E9;
}
.five {
  grid-column-start: 2;
  grid-column-end: 2;
  grid-row-start: 2;
  grid-row-end: 5;
  background: #E6CEAC;
}
.six {
  grid-column: 3;
  grid-row: 4;
  background: #ECAD9E;
}

上面代码中，类 .two 所在的网格项目，垂直网格线是从 2 到 4，水平网格线是从 1 到 2。其中它跟 .three （垂直网格线是从3 到 4，水平网格线是从 1 到 4）是有冲突的。可以设置 z-index 去决定它们的层级关系

grid-area 属性

grid-area 属性指定项目放在哪一个区域，在上面介绍 grid-template-areas 的时候有提到过，这里不再具体展开，具体的使用可以参考演示地址：

grid-area 以及 grid-template-areas 属性演示地址open in new window

justify-self 属性、align-self 属性以及 place-self 属性

justify-self 属性/ align-self 属性/ place-self 属性演示地址open in new window

justify-self 属性设置单元格内容的水平位置（左中右），跟 justify-items 属性的用法完全一致，但只作用于单个项目

align-self 属性设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，也是只作用于单个项目

两者很相像，这里只拿 justify-self 属性演示，align-self 属性同理，只是作用于垂直方向

.item {
  justify-self: start | end | center | stretch;
  align-self: start | end | center | stretch;
}
.item {
  justify-self: start;
}
.item-1 {
  justify-self: end;
}
.item-2 {
  justify-self: center;
}
.item-3 {
  justify-self: stretch;
}

start：对齐单元格的起始边缘

end：对齐单元格的结束边缘

center：单元格内部居中
stretch：拉伸，占满单元格的整个宽度（默认值）

6. Grid 实战——实现响应式布局

经过上面的介绍，相信大家都可以看出，Grid 是非常强大的。一些常见的 CSS 布局，如居中，两列布局，三列布局等等是很容易实现的。我们接下来看看 Grid 布局是如何实现响应式布局的

fr 实现等分响应式

fr 实现等分响应式open in new window

fr 等分单位，可以将容器的可用空间分成想要的多个等分空间。利用这个特性，我们能够轻易实现一个等分响应式。grid-template-columns: 1fr 1fr 1fr 表示容器分为三等分

.wrapper {
  margin: 50px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px 20px;
  grid-auto-rows: 50px;
}

repeat + auto-fit——固定列宽，改变列数量

等分布局并不只有 Grid 布局才有，像 flex 布局也能轻松实现，接下来看看更高级的响应式

上面例子的始终都是三列的，但是需求往往希望我们的网格能够固定列宽，并根据容器的宽度来改变列的数量。这个时候，我们可以用到上面提到 repeat() 函数以及 auto-fit 关键字。grid-template-columns: repeat(auto-fit, 200px) 表示固定列宽为 200px，数量是自适应的，只要容纳得下，就会往上排列，代码以及效果实现如下：

演示地址open in new window

.wrapper {
  margin: 50px;
  display: grid;
  grid-template-columns: repeat(auto-fit, 200px);
  grid-gap: 10px 20px;
  grid-auto-rows: 50px;
}

repeat+auto-fit+minmax 去掉右侧空白

上面看到的效果中，右侧通常会留下空白，这是我们不希望看到的。如果列的宽度也能在某个范围内自适应就好了。minmax() 函数就帮助我们做到了这点。将 grid-template-columns: repeat(auto-fit, 200px) 改成 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) 表示列宽至少 200px，如果还有空余则一起等分。代码以及效果如下所示：

演示地址open in new window

.wrapper {
  margin: 50px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 10px 20px;
  grid-auto-rows: 50px;
}

repeat+auto-fit+minmax-span-dense 解决空缺问题

似乎一切进行得很顺利，但是某天 UI 来说，每个网格元素的长度可能不相同，这也简单，通过 span 关键字进行设置网格项目的跨度，grid-column-start: span 3，表示这个网格项目跨度为 3。具体的代码与效果如下所示：

.item-3 {
  grid-column-start: span 3;
}

演示地址open in new window

不对，怎么右侧又有空白了？原来是有一些长度太长了，放不下，这个时候就到我们的 dense 关键字出场了。grid-auto-flow: row dense 表示尽可能填充，而不留空白，代码以及效果如下所示：

.wrapper, .wrapper-1 {
  margin: 50px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 10px 20px;
  grid-auto-rows: 50px;
}

.wrapper-1 {
  grid-auto-flow: row dense;
}

7. Grid 布局兼容性

最后，聊聊 Grid 布局兼容性问题，在 caniuseopen in new window 中，我们可以看到的结果如下，总体兼容性还不错，但在 IE 10 以下不支持。个人建议在公司的内部系统运用起来是没有问题的，但 TOC 的话，可能目前还是不太合适

参考

常见的 Grid 布局用例open in new window

CSS Grid 网格布局教程open in new window

Grid 布局草案open in new window

一行 CSS 代码实现响应式布局 – 使用 Grid 实现的响应式布局open in new window

MDNopen in new window

四、 rem 布局

1. rem 基础

rem（root em）是一个单位，类似于 em。区别：

em 是相对于父元素字体大小。
rem 的基准是 相对于html元素的字体大小。

比如，根元素（html）设置 font-size: 12px，非根元素设置 width: 2rem，则换成 px 就是 24px。优点：通过修改html元素字体的大小来改变页面中元素的大小从而整体控制整个页面。

2. 媒体查询

2.1 定义

媒体查询（Media Query）是 CSS3 的新语法。

使用 @media 查询，可以针对不同的媒体类型定义不同的样式
@media 可以针对不同屏幕尺寸设置不同的样式
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
目前针对很多苹果手机、安卓手机、平板等设备都用到媒体查询

2.2 语法规范

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

以 @media 开头
mediatype 是媒体类型
关键字 and、not、only
media feature 媒体特性，必须有小括号

2.2.1 mediatype 查询类型

将不同终端设备划分成不同的类型，称为媒体类型。

值	解释说明
`all`	用于所有设备
`print`	用于打印机和打印浏览
`screen`	用于电脑屏幕，平板电脑，智能手机等

2.2.2 关键字 and not only

关键字将媒体类型特性连接到一起作为媒体查询的条件。

and：可以将多个类型或多个媒体类型连接到一起成为媒体查询的条件
not：排除某个媒体类型，相当于 “非” 的意思，可以省略
only：指定某个特定的媒体类型，可以省略

2.2.3 媒体特性

每种媒体类型都具体各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格。我们暂且了解三个，注意他们要加小括号包含。

值	解释
`width`	定义输出设备中页面可见区域的宽度
`min-width`	定义输出设备中页面最小可见区域宽度
`max-width`	定义输出设备中页面最大可见区域宽度

媒体查询的价值：媒体查询可以根据不同的屏幕尺寸改变不同的样式。

举例

/* 在屏幕上并且最大的宽度是800像素设置我们想要的样式 */
@media screen and (max-width: 800px) {
    body {
        background-color: pink;
    }
}
/* 在屏幕上并且最大的宽度是500像素设置我们想要的样式 */
@media screen and (max-width: 500px){
    body {
        background-color: purple;
    }
}

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

rem 单位是跟着 html 来走的，有了 rem 页面元素可以设置不同大小尺寸媒体查询可以根据不同设备宽度来修改样式。 媒体查询+rem 就可以实现不同设备宽度，实现页面元素大小的动态变化。

/* 320px以上的屏幕使用此字体大小 */
@media screen and (min-width: 320px) {
    html {
        font-size: 50px;
    }
}
/* 640px以上屏幕的使用此字体大小(超过640px的覆盖了前面超过320px的样式) */
@media screen and (min-width: 640px) {
    html {
        font-size: 100px;
    }
}

2.4 引入资源（理解）

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

2.4.1 语法规范

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

举例

/* 小于 640px 的，一行显示一个 */
<link rel="stylesheet" href="style320.css" media="screen and (min-width: 320px)">
/* 当屏幕大于 640px，一行显示两个 */
<link rel="stylesheet" href="style640.css" media="screen and (min-width: 640px)">

Tip

引入资源就是针对于不同的屏幕尺寸，调用不同的css文件

3. Less 基础

3.1 维护 CSS 的弊端

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

CSS 需要书写大量看似没有逻辑的代码，CSS 冗余度是比较高的。
不方便维护及扩展，不利于复用。
CSS 没有很好的计算能力。
非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码项目。

3.2 Less 介绍

Less（Leaner Style Sheets的缩写）是一门 CSS 扩展语言，也称为 CSS 预处理器。

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

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

Less中文网址: http://lesscss.cnopen in new window 常见的CSS预处理器：Sass、Less、Stylus

实质：Less是一门 CSS 预处理语言，它扩展了 CSS 的动态特性。

3.3 Less 使用

我们首先新建一个后缀名为less的文件，在这个less文件里面书写less语句。现阶段学习：

Less变量
Less编译
Less嵌套
Less运算

3.4 Less 变量

变量是指没有固定的值，CSS 中一些颜色和数值经常使用。

@变量名:值;

举例

// 定义一个粉色变量
@color: pink;
@font14: 14px;
body {
    background-color: @color;
}
div {
    background-color: @color;
    font-size: @font14;
}

3.4.1 变量命名规范

必须有 @ 前缀
不能包含特殊字符
不能以数字开头（除去前缀 @ 的部分）
大小写敏感

3.5 Less 编译

本质上，Less包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的CSS文件。

所以，我们需要把我们的less文件，编译生成为css文件，这样我们的html页面才能使用。

在 VS Code 中，使用 Easy Less 插件 可以即时编译生成 CSS 文件，再引入即可。

3.6 Less 嵌套

类似于html元素之间的嵌套，Less 里也可以把选择器嵌套。

#header {
    .logo {
        width: 100px;
    }
}

等同于：

#header .logo {
     width: 100px;
}

3.6.1 Less 中伪类、交集选择器、伪元素选择器的写法

要在 less 中写伪类、交集选择器、伪元素选择器，则要在内层选择器的前面加上 &。

内层选择器前面没有 &，则它被解析为父选择器的后代；
若有 &，则被解析为父元素自身或父元素的伪类。

a:hover {
    color: red;
}

Less嵌套写法：

a {
    &:hover {
        color: red;
    }
}

3.7 Less 运算 ⚡

任何数字、颜色或者变量都可以参与运算，Less 提供了加（+）、减（-）、乘（*）、除（/）算数运算。

3.7.1 注意

对于除法运算，需要用圆括号括起来
运算符的作用左右两侧要有空格
运算数若只有一个带有单位，则最后结果以此为单位
若有多个单位，则以第一个单位为准

4. rem 适配方案

4.1 rem 适配方案

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

4.2 rem 实际开发适配方案

按照设计稿与设备宽度的比例，动态计算并设置html根标签的font-size大小;（媒体查询）
CSS中，设计稿元素的宽、高、相对位置等取值，按照同等比例换算为rem为单位的值。

4.3 rem 适配方案技术使用（市场主流）

4.3.1 方案1

less
媒体查询
rem

4.3.2 方案2（推荐）

flexible.js
rem

Tip

两种方案都存在，方案2更简单，目前不需要了解里面的代码。

4.4 rem 实际开发适配方案1

rem + 媒体查询 + less技术

4.4.1 设计稿常见尺寸宽度

设备	常见宽度
iphone45	640px
iphone678	750px
Android	常见320px、360px、375px、384px、400px、720px。大部分4.7~5寸的安卓设备为720px

Tip

一般情况下，我们以一套或两套效果图适应大部分的屏幕，放弃极端屏或对其优雅降级，牺牲一些效果 现在基本以750为准。

4.4.2 动态设置 html 标签 font-size 大小

假设设计稿是750px
假设我们把整个屏幕划分为15等份（划分标准不一可以是20份也可以是10等份）
每一份作为 html 字体大小，这里就是 50px
那么在 320px 设备的时候，字体大小为 320/15 就是 21.33px
用我们页面元素的大小除以不同的 html 字体大小会发现他们比例还是相同的
比如我们以 750 为标准设计稿
一个 100*100像素的页面元素在750屏幕下，就是 100/50 转换为 rem 是 2rem * 2rem 比例是 1 比 1
320 屏幕下，html 字体大小为 21.33 则 2rem = 42.66px，此时宽和高都是42.66但是宽和高的比例还是 1 比 1
但是已经能实现不同屏幕下页面光素盒子等比例缩放的效果

具体步骤

首先选一套标准尺寸，例如以 750 为准
用 屏幕尺寸 除以 划分的份数，得到 html 里面的文字尺寸大小。此时我们知道，不同屏幕下得到的文字大小是不一样的。
页面元素的 rem 值 = 页面元素在750像素下的px值 / html里面的文字大小

4.4 rem 实际开发适配方案2

5. 使用适配方案1制作苏宁移动端首页

5.1 技术选型

方案：单独制作移动页面方案
技术：布局采用 rem 适配布局（less + rem + 媒体查询）
设计图：设计图采用 750px 设计尺寸

5.2 项目结构

css
images
upload
index.css

5.3 设置视口标签以及引入初始化样式

 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-sacle=1.0">
<link rel="stylesheet" href="css/normalize.css">

5.4 设置公共common.less文件

新建common.less设置好最常见的屏幕尺寸，利用媒体查询设置不同的html字体大小，因为除了首页其他页面也需要
我们关心的尺寸有320px、360px、375px、384px、400px、414p、424px、480px、540px、720px、750px
划分的份数我们定为15等份
因为我们pc端也可以打开我们苏宁移动端首页，我们默认html字体大小为50px，注意这句话写到最上面

// 设置常见屏幕尺寸修改  html 文字大小
// PC屏幕下：
html {
    font-size: 50px;
}
// 划分份数：15
// 适配屏幕：320px、360px、375px、384px、400px、414p、424px、480px、540px、720px、750px
@num: 15;
// 320
@media screen and (min-width: 320px) {
    html {
        font-size: (320px / @num);
    }
}
// 360
@media screen and (min-width: 360px) {
    html {
        font-size: (360px / @num);
    }
}

5.5 新建 index.less 文件

新建 index.less，写首页样式
将刚才设置好的 common.less 引入到 index.less 里面，语法如下：
```
// 在 index.less 中导入 common.less
@import "common";
```

6. rem 适配方案2

6.1 简洁高效的 rem 适配方案 flexible.js

Tip

技术方案1（less+媒体查询+rem）效果很好，但是过于繁琐。因此介绍第二种 rem 方案。

手机淘宝团队出的简洁高效移动端适配库。我们再也 不需要在写不同屏幕的媒体查询，因为里面js做了处理。它的原理是把 当前设备划分为10等份，但是不同设备下，比例还是一致的。我们要做的，就是确定好我们当前设备的html文字大小就可以了。比如当前设计稿是750px，那么我们只需要把html文字大小设置为75px(750px/10)就可以里面页面元素rem值：页面元素的px值/ 75。剩余的，让flexible.js来去算。

flexible.js 项目地址：https://github.com/amfe/lib-flexible

6.2 使用适配方案2制作苏宁移动端首页

方案：我们采取单独制作移动页面方案
技术：布局采取rem适配布局2（flexible.js + rem）
设计图：本设计图采用 750px 设计尺寸

6.2.1 前期准备

引入 normalize.css 和 flexible.js，将相关文件和文件夹创建好。

6.2.2 vscode cssrem 插件

自动将 px 单位转换成 rem 的插件。需要手动设置cssroot字体大小为75

6.2.3 注意

flexible.js 按照屏幕尺寸修改 html 的 font-size 大小，当处于PC端口时，宽度会过大。需要额外设置一个媒体查询：

/* search-content */
/* 若设备屏幕超过 750px，则按照 750设计稿布局 */
@media screen  and (min-width: 750px) {
    html {
        font-size: 75px !important;
    }
}

四、移动端开发之响应式布局

1. 响应式开发

1.1 响应式开发原理

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

设备划分	尺寸区间
超小屏幕（手机）	`w < 768px`
小屏设备（平板）	`768px <= w < 992px`
中等屏幕（桌面显示器）	`992px <= w < 1200px`
宽屏设备（大桌面显示器）	`w >= 1200px`

1.2 响应式布局容器

响应式 需要一个父级作为布局容器，来配合子级元素来实现变化效果。

原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。

平时我们的响应式尺寸划分（但是我们也可以根据实际情况自己定义划分）：

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

代码实现： HTML部分：

<!-- 布局容器 -->
<div class="container"></div>

CSS部分：

.container {
    height: 150px;
    margin: 0 auto;
    background-color: pink;
}
/* 超小屏幕 小于 768 布局容器宽度为 100% */
@media screen and (max-width: 767px) {
    .container {
        width: 100%;
    }
}
/* 小屏幕 大于等于 768，布局容器 750px */
@media screen and (min-width: 768px) {
    .container {
        width: 750px;
    }
}
/* 中等屏幕 */
@media screen and (min-width: 992px) {
    .container {
        min-width: 970px;
    }
}
/* // 大屏幕 */
@media screen and (min-width: 1200px) {
    .container {
        width: 1170px;
    }
}

1.3 案例：响应式导航

当我们屏幕大于等于 800 像素，我们给 nav 宽度为 800px，因为里面子盒子需要浮动，所以 nav 需要清除浮动。
nav 里面包含 8 个小 li 盒子，每个盒子的宽度定为 100px，高度为30px，浮动一行显示。
当我们屏幕缩放，宽度小于 800 像素的时候，nav 盒子宽度修改为 100% 宽度。
nav 里面的8个小 li，宽度修改为 33.33%，这样一行就只能显示 3 个小 li ，剩余下行显示。

代码： HTML部分:

<div class="container">
    <ul>
        <li>导航栏</li>
        <li>导航栏</li>
        <li>导航栏</li>
        <li>导航栏</li>
        <li>导航栏</li>
        <li>导航栏</li>
        <li>导航栏</li>
        <li>导航栏</li>
    </ul>
</div>

CSS部分：

* {
    padding: 0;
    margin: 0;
}

ul {
    list-style: none;
}

.container {
    width: 750px;
    margin: 0 auto;
}

.container ul li {
    width: 93.75px;
    height: 30px;
    background-color: green;
    float: left;
}

@media screen and (max-width: 767px) {
    .container {
        width: 100%;
    }
    .container ul li {
        width: 33.33%;
    }
}

2. Bootstrap 前端开发框架

2.1 Bootstrap 简介

Bootstrap 来自 Twitter（推特），是目前最受欢迎的前端框架。Bootstrap 是基于HTML、CSS 和JAVASCRIPT 的，它简洁灵活，使得Web 开发更加快捷。

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

框架：顾名思义就是一套架构，它有一套比较完整的网页功能解决方案，而且控制权在框架本身，有预制样式库、组件和插件。使用者要按照框架所规定的某种规范进行开发。

Bootstrap 优点：

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

2.2 Bootstrap 使用

在现阶段我们还没有接触JS相关课程，所以我们只考虑使用它的样式库。控制权在框架本身，使用者要按照框架所规定的某种规范进行开发。 Bootstrap 使用四步曲：

创建文件夹结构
创建 html 骨架结构
引入相关样式文件
书写内容

创建文件夹结构

bootstrap
  -css
  -fonts
  -js
css
images
index.html

HTML 骨架结构

<!--要求当前网页使用IE浏览器最高版本的内核来渲染-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--视口的设置：视口的宽度和设备一致，默认的缩放比例和PC端一致，用户不能自行缩放-->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
<!--[if lt IE 9]>
<!-- 解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题 -->
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<!--解决ie9以下浏览器对css3 Media Query 的不识别-->
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

引入相关样式文件

<!-- Bootstrap 核心样式-->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

书写内容
- 直接拿 Bootstrap 预先定义好的样式来使用
- 修改 Bootstrap 原来的样式，注意权重问题
- 学好 Bootstrap 的关键在于知道它定义了哪些样式，以及这些样式能实现什么样的效果

2.3 布局容器

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

```
container
```

类

响应式布局的容器固定宽度
大屏( >=1200px) 宽度定为1170px
中屏( >=992px) 宽度定为970px
小屏( >=768px) 宽度定为750px
超小屏(100%)

```
container-fluid
```

类

流式布局容器百分百宽度
占据全部视口（viewport）的容器。

3. Bootstrap 栅格系统

3.1 栅格系统简介

栅格系统英文为 “grid systems”，也有人翻译为 “网格系统”，它是指将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局。

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

3.2 栅格选型参数

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

按照不同屏幕划分为 1~12 等份
行（row）可以去除父容器作用15px的边距
xs-extra small：超小；sm-small：小；md-medium：中等；lg-large：大；
列（column）大于12，多余的 “列（column）”所在的元素将被作为一个整体另起一行排列
每一列默认有左右15像素的 padding
可以同时为一列指定多个设备的类名，以便划分不同份数例如 class="col-md-4 col-sm-6"

例如，col-lg-3 col-md-4 col-sm-6 col-xm-12 表示随着屏幕尺寸的缩小，每一行能放的盒子变为 4、3、2、1。

<!-- 有12个，则可以占满一行 -->
<div class="row">
    <div class="col-lg-3 col-md-4 col-sm-6 col-xm-12">1</div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-xm-12">2</div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-xm-12">3</div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-xm-12">4</div>
</div>
<!-- 有12个，则可以占满一行，不同份数表示了所占比例 -->
<div class="row">
    <div class="col-lg-1">1</div>
    <div class="col-lg-2">2</div>
    <div class="col-lg-3">3</div>
    <div class="col-lg-6">4</div>
</div>
<!-- 不足12个，则空出多余 -->
<div class="row">
    <div class="col-lg-3">1</div>
    <div class="col-lg-3">2</div>
    <div class="col-lg-3">3</div>
    <div class="col-lg-2">4</div>
</div>
<!-- 超出12个，则放到下一行 -->
<div class="row">
    <div class="col-lg-3">1</div>
    <div class="col-lg-3">2</div>
    <div class="col-lg-3">3</div>
    <div class="col-lg-4">4</div>
</div>

以上代码布局效果如下： bootstrap2

3.3 列嵌套

栅格系统内置的栅格系统将内容再次嵌套。简单理解就是一个列内再分成若干份小列。我们可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。

<div class="container">
    <div class="row">
        <div class="col-md-4">
            <div class="row">
                <div class="col-md-6">第一小列</div>
                <div class="col-md-6">第二小列</div>
            </div>
        </div>
        <div class="col-md-4">第二列</div>
        <div class="col-md-4">第三列</div>
    </div>
</div>

布局效果如下： bootstrap3

3.4 列偏移

使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。

<div class="container">
    <div class="row">
        <div class="col-md-4">1</div>
        <div class="col-md-4 col-md-offset-4">2</div>
    </div>
    <div class="row">
        <div class="col-md-8 col-md-offset-2">0</div>
    </div>
</div>

布局效果如下： bootstrap4

3.5 列排序

通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。

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

布局效果如下： bootstrap5

3.6 响应式工具

为了加快对移动设备友好的页面开发工作，利用媒体查询功能，并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。除了有 .hidden-xm 等响应式隐藏工具类外，还有 .visible-xm 等响应式显示工具类，当屏幕处于超小屏幕（手机）时显示。

昵称

邮箱

网址

按正序
按倒序
按热度

移动端Web开发

# 移动端Web开发

# 一、移动端开发

# 1. 移动端基础

# 1.1 浏览器现状

# 1.2 手机屏幕现状

# 1.3 移动端调试方法

# 1.4 总结

# 2. 视口

# 2.1 布局视口 layout viewport

# 2.2 视觉视口 visual viewport

# 2.3 理想视口 ideal viewport

# 2.4 meta视口标签

# 2.5 总结

# 2.6 标准的viewport设置

# 3. 二倍图

# 3.1 物理像素&物理像素比

# 3.2 二倍图

# 3.3 二倍图解决方案

# 3.4 多倍图

# 3.5 背景缩放 background-size

# 4. 移动端开发选择

# 4.1 移动端主流方案

# 4.1.1 单独制作移动端页面（主流）

# 4.1.2 响应式页面兼容移动端（其次）

# 4.2 总结

# 5. 移动端技术解决方案

# 5.1 移动端浏览器

# 5.2 CSS初始化

# 5.3 CSS3 盒子模型 box-sizing

# 5.4 特殊样式

# 6. 移动端常见布局

# 6.1 移动端技术选型

# 6.1.1 单独制作移动端页面（主流）

# 6.1.2 响应式页面兼容移动端（其次）

# 二、流式布局(百分比布局)

# 1 流式布局举例

# 2 流式布局案例：京东移动端首页

# 3 二倍精灵图做法

# 4. 图片格式

# 二、flex 布局（主流，兼容性还行） ⭐

# 1. flex 布局优势

# 1.1 传统布局与flex布局

# 1.1.1 传统布局

# 1.1.2 flex 弹性布局

# 1.1.3 建议

# 2. flex 布局原理

# 3. flex 布局父项常见属性

# 3.1 常见父项属性

# 3.2 flex-direction ⭐

# 3.2.1 主轴与侧轴

# 3.2.2 属性值

# 3.3 justify-content ⭐

# 3.4 flex-wrap ⭐

# 3.5 align-items ⭐

# 3.6 align-content

# 3.7 align-content 和 align-items 区别

# 3.8 flex-flow 以及小总结

# 4. flex 布局子项常见属性

# 4.1 flex 属性 ⭐

# 4.2 align-self

# 4.3 order

# 5. 携程网首页案例制作

# 5.1 技术选型

# 5.2 背景线性突变

# 三、grid 布局（强大，但是兼容性不太好）

# 1. Grid 布局是什么？

# 2. Grid 布局和 flex 布局

# 3. Grid 的一些基础概念

# 4. 容器属性介绍

# display 属性

# grid-template-columns 属性和 grid-template-rows 属性

# grid-row-gap 属性、grid-column-gap 属性以及 grid-gap 属性

# grid-template-areas 属性

# grid-auto-flow 属性

# justify-items 属性、align-items 属性以及 place-items 属性

# justify-content 属性、align-content 属性以及 place-content 属性

# grid-auto-columns 属性和 grid-auto-rows 属性

# 5. 项目属性介绍

# grid-column-start 属性、grid-column-end 属性、grid-row-start 属性以及grid-row-end 属性

移动端Web开发

一、移动端开发

1. 移动端基础

1.1 浏览器现状

1.2 手机屏幕现状

1.3 移动端调试方法

1.4 总结

2. 视口

2.1 布局视口 layout viewport

2.2 视觉视口 visual viewport

2.3 理想视口 ideal viewport

2.4 meta视口标签

2.5 总结

2.6 标准的viewport设置

3. 二倍图

3.1 物理像素&物理像素比

3.2 二倍图

3.3 二倍图解决方案

3.4 多倍图

3.5 背景缩放 background-size

4. 移动端开发选择

4.1 移动端主流方案

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

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

4.2 总结

5. 移动端技术解决方案

5.1 移动端浏览器

5.2 CSS初始化

5.3 CSS3 盒子模型 box-sizing

5.4 特殊样式

6. 移动端常见布局

6.1 移动端技术选型

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

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

二、流式布局(百分比布局)

1 流式布局举例

2 流式布局案例：京东移动端首页

3 二倍精灵图做法

4. 图片格式

二、flex 布局（主流，兼容性还行） ⭐

1. flex 布局优势

1.1 传统布局与flex布局

1.1.1 传统布局

1.1.2 flex 弹性布局

1.1.3 建议

2. flex 布局原理

3. flex 布局父项常见属性

3.1 常见父项属性

3.2 flex-direction ⭐

3.2.1 主轴与侧轴

3.2.2 属性值

3.3 justify-content ⭐

3.4 flex-wrap ⭐

3.5 align-items ⭐

3.6 align-content

3.7 align-content 和 align-items 区别

3.8 flex-flow 以及小总结

4. flex 布局子项常见属性

4.1 flex 属性 ⭐

4.2 align-self

4.3 order

5. 携程网首页案例制作

5.1 技术选型

5.2 背景线性突变

三、grid 布局（强大，但是兼容性不太好）

1. Grid 布局是什么？

2. Grid 布局和 flex 布局

3. Grid 的一些基础概念

4. 容器属性介绍

display 属性

grid-template-columns 属性和 grid-template-rows 属性

grid-row-gap 属性、grid-column-gap 属性以及 grid-gap 属性

grid-template-areas 属性

grid-auto-flow 属性

justify-items 属性、align-items 属性以及 place-items 属性

justify-content 属性、align-content 属性以及 place-content 属性

grid-auto-columns 属性和 grid-auto-rows 属性

5. 项目属性介绍

grid-column-start 属性、grid-column-end 属性、grid-row-start 属性以及grid-row-end 属性

grid-area 属性