【前端】移动端布局基础

一. 视口

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

---

(一) 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的数字
initial-scale	最小缩放比，大于0的数字
minimum-scale	用户是否可以缩放，yes或no(1或0)

---

(二) 标准的viewport设置

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

---

---

二. 二倍图

🔰对于一张图片，在手机屏中打开，物理像素比会放大倍数，这会造成图片模糊；
🔰在标准viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题；

img {
	/*原始图片100*100px*/
	width: 50px;
	height: 100px;  }

(一) 背景缩放 background-size

🔰background-size：规定背景图像的尺寸；

background-size: 背景图片宽度 背景图片高度;
background-size: 500px 200px;
/*1. 只写一个参数，肯定是宽度，高度忽略了，会等比例缩放*/
background-size: 500px；
/*2. 里面的单位可以跟% 相对于父盒子来说的；*/
background-size: 50%;
/*3. cover 等比例拉伸，要完全覆盖div盒子，可能有部分背景图片显示不全*/
background-size: cover;
/*4. contain 高度和宽度等比例拉伸，当宽度或者高度铺满div盒子就不再进行拉伸了，可能有部分空白区域*/
background-size: contain;

🔰单位：长度 | 百分比 | cover | contain
🔰cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
🔰contain把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

---

---

三. 移动端开发选择

(一) 单独移动端页面(主流)

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

---

(二) 响应式兼容PC移动端

🔰通过判断屏幕宽度来改变样式，以适应不同终端。
🔰缺点：制作麻烦，需要花很大精力去调兼容性问题。

---

---

四. 移动端技术解决方案

(一) CSS初始化 normalize.css

🔰移动端CSS初始化推荐使用 normalize.css/
◉normalize.css：保护了有价值的默认值
◉normalize.css：修复了浏览器bug
◉normalize.css：是模块化的
◉normalize.css：拥有详细的文档
🔰官网地址：http://necolas.github.io/normalize.css/

---

(二) CSS3 盒子模型 box-sizing

🔰传统模式宽度计算：盒子宽度 = CSS中设置的width+border+padding
🔰CSS3盒子模型：盒子的宽度 = CSS中设置的宽度里面包含了border和padding。CSS3中的盒子模型，padding和border不会撑大盒子了。

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

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

---

(三) 移动端特殊样式

🔰点击高亮我们需要清除，设置为 transparent 完成透明；

a { -webkit-tap-highlight-color: transparent;}

==》
🔰在移动端浏览器默认的外观在ios上加上这个属性才能给按钮和输入框自定义样式；

input { -webkit-appearance: none;}

==》
🔰禁止长按页面时的弹出菜单；

img, a { -webkit-touch-callout: none;}

---

---

五. 移动端常见布局

(一) 移动端技术类型

🔰单独制作移动端页面(主流)

1. 流式布局(百分比布局)
2. flex 弹性布局(强烈推荐)
3. less + rem + 媒体查询布局
4. 混合布局

🔰响应式页面兼容移动端(其次)

1. 媒体查询
2. bootstarp

---

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

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

---

(三) flex 布局

1. 传统布局与 flex 布局

🔰传统布局

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

🔰flex 弹性布局

1. 操作方便，布局简单，移动端应用广泛
2. PC 端浏览器支持情况较差
3. IE 11 或者更低版本，不支持或仅部分支持

🔰建议：

1. 如果是PC端页面布局，我们还是传统布局；
2. 如果是移动端或者不考虑兼容性问题的PC端页面布局，我们还是使用flex弹性布局；

2. flex 布局原理

🔰flex 是flexible Box 的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。
🔰当我们=为父盒子设为flex布局后，子元素的float（浮动），clear（清除浮动），vertical-align属性将失效。
🔰总结布局原理：通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。

3. flex 布局父项常见属性

1）flex-direction：设置主轴的方向

🔰flex-direction：设置主轴的方向；
🔰在flex布局中，是分为主轴和侧轴两个方向，同样的叫法有：行和列，x轴和y轴
🔰默认主轴方向是x轴方向，水平向右
🔰默认侧轴方向是y轴方向，水平向下

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

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

🔰justify-content属性定义了项目在主轴上的对齐方式；
🔰注意：使用这个属性之前一定要确定好主轴是那个；

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

3）flex-wrap：设置子元素是否换行

🔰默认情况下，项目都排在一条轴线上。flex-wrap 属性定义，flex 布局中默认是不换行的。

属性值	说明
nowrap	默认值，不换行
wrap	换行

4）align-items：设置侧轴上的子元素排列方式(单行)

🔰align-items该属性是控制子项在侧轴（默认是y轴）上的排列方式，在子项为单项的时候使用。
🔰只有上对齐，下对齐，居中，拉伸；

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

5）align-content：设置侧轴上的子元素的排列方式(多行)

🔰align-content设置子项在侧轴上的排列方式，并且只能用于子项出现换行的情况（多行），在单行下是没有效果的。
🔰有上对齐，下对齐，居中，拉伸，平分剩余空间；

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

6）flex-flow：复合属性

🔰flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap；

4. flex 布局子项常见属性

1）flex 属性

🔰flex 属性定义子项目分配空间，用 flex 来表示占多少份数；
.item { flex: 1; }

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

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

/*设置自己在侧轴上的排列方式*/
div span:nth-child(1) { align-self: flex-end;}

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

🔰数值越小，排列越靠前，默认为0；
🔰注意：和z-index 不一样。

---

(四) rem 适配布局

1. rem 基础

🔰rem 是一个相对单位，类似于em, em 是父元素字体大小。
🔰不同的是rem 的基准是相对于html元素的字体大小。
🔰比如，根元素（html）设置为font-size: 12px; 非根元素设置width: 2rem; 则换成px表示就是24px。
🔰rem 的优点就是可以通过修改 html 里面的文字大小来改变页面中元素的大小，可以整体控制。

2. 媒体查询

🔰媒体查询是CSS3新语法。

1. 使用@media查询，可以针对不同的媒体类型定义不同的样式。
2. @media 可以针对不同的屏幕尺寸设置不同的样式。
   🔰语法规范：

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

1. 用 @media 开头，注意@ 符号
2. mediatype 媒体类型
   将不同的终端设备划分成不同的类型，称之为媒体类型；

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

3. 关键词 and not only
   关键词将媒体类型或者多个媒体特性连接到一起做为媒体查询的条件；
   and：可以将多个媒体特性连接到一起作为媒体查询的条件；
   not：排除某个媒体类型，相当于“非”的意思，可以忽略；
   only：指定某个特定的媒体类型，可以忽略；
4. media feature 媒体特性 必须有小括号包含
   每种媒体类型都具体各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格。

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

@media screen (min-width: 300px) and (max-width:500px) {
	body {
		background: purple;
	}
}

1）媒体查询+rem 实现元素变化

* {
	margin: 0;
	padding: 0;
}
@media screen and (min-width: 320px){
	html {
		font-size: 50px;
	}
}
@media screen and (min-width: 640px){
	html {
		font-size: 100px;
	}
}
.top {
	height: 1rem;
	font-size: .5rem;
	background-color: green;
	color: #fff;
	text-align: center;
	line-height: 1rem;
}

2）引入资源

🔰当样式比较繁多的时候，我们可以针对不同的媒体使用不同stylesheets（样式表）；
🔰原理：就是直接在link中判断设备的尺寸，然后引入不同的css文件。
🔰语法规范： <link rel="stylesheet" media="mediatype and|not|only (media feature)" href="style640.css">

<link rel="stylesheet" href="style320.css" media="screen and (min-width: 320px)">
<link rel="stylesheet" href="style640.css" media="screen and (min-width: 640px)">

🔰媒体查询最好的方法是从小到大进行引入；

3. less 基础

1）维护css 的弊端

🔰css是一门非程序式语言，没有变量，函数等概念。
🔰不方便维护及扩展，不利于复用；
🔰css没有很好的计算能力；

2）less介绍

🔰less是一门css扩展语言，也成为css预处理器；
🔰它在css的语法基础上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了css的编写，并且降低了css的维护成本；

3）less使用

🔰首先新建一个后缀名为less 的文件，在这个less文件里面书写less语句。

(1) less 变量

🔰变量是指没有固定的值，可以改变的。
@变量名：值；
🔰变量命名规范

1. 必须有@为前缀
2. 不能包含特殊字符
3. 不能以数字开头
4. 大小写敏感

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

(2）less编译

🔰本质上，less 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终通过解释器，编译生成对应的CSS文件。
🔰我们需要把我们的less文件，编译生成为css文件，这样我们的html页面才能使用。

---

vocode less插件
🔰Easy LESS 插件用来把less文件编译为css文件；
🔰安装完毕插件，重新加载vscode。只要保存一下less文件，会自动生成css文件。

(3）less嵌套

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

.header {
   width: 200px;
   height: 200px;
   
   a { color: red; }
   .logo {  color: pink;}}

🔰如果有伪类，交集选择器，伪元素选择器，我们内层选择器的前面需要加&

.nav {
   .logo {  color: pink;  }
   &:hover { color: #000;  }
}

(3）less运算

🔰任何数字，颜色或者变量都可以参与运算，就是less提供了（+，-，*，/）算数运算；

/* less里面写*/
@witdh: 10px + 5;
div { border: @witdh solid red; }

/* 生成的 css*/
div { border: 15px solid red; }

/* less里面还可以这样*/
width: (@width + 5) * 2;

🔰乘号（*）和除号（/）的写法
🔰运算符中间左右有个空格隔开 1px + 5
🔰对于两个不同的单位之间的运算，运算结果的值取第一个值的单位
🔰如果两个值之间只有一个有单位，则运算结果就取该单位。

4. rem 适配方案

🔰我们适配的目标是什么？

1. 让一些不能等比例适应的元素，达到当前设备尺寸发生改变的时候，等比例适配当前设备。

🔰怎么去达到这个目标？

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

🔰在实际开发当中使用？

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

1）设计稿常见尺寸宽度

设置	常见宽度
iphone 4.5	640px
iphone 678	750px
Android	常见320px, 360px, 375px, 384px,400px, 414px, 500px, 720px 大部分4.7~5寸的安卓设备为720px

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

3）元素大小取值方法

---

(五) 响应式开发

1. 响应式开发原理

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

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

2. 响应式布局容器

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

---

(六) Bootstrap前端开发框架

🔰中文网：http://www.bootcss.com/

🔰官网：http://getbootstrap.com/

🔰推荐使用：http://bootstrap.css88.com/

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

1. Bootstrap使用

🔰Bootstrap 使用步骤：

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

1）创建文件夹结构

🔰官网下载bootstrap，解压后放到bootstrap文件夹中；

2）创建html骨架结构

3）引入相关样式文件

4）书写内容

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

2. 布局容器

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

1. 响应式布局的容器，固定宽度
2. 大屏（>= 1200px）宽度定为 1170px
   中屏（>= 992px）宽度定为 970px
   小屏（>= 768px）宽度定为 750px
   超小屏（100%）
   🔰container-fluid类
3. 流式布局容器，百分百宽度
4. 占据全部视口的容器
5. 适合于单独做移动端开发

---

(七) Bootstrap 栅格系统

🔰栅格系统是指将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局。
🔰bootstrap 提供了一套响应式，移动设备优先的流式栅格系统，随着屏幕或视口尺寸的增加，系统会自动分为最多12列。
🔰bootstrap 里面container 宽度是固定的，但是不同屏幕下，container 的宽度不同，我们再把container 划分为12等份；

1. 栅格选项参数

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

	超小屏幕（手机） < 768px	小屏设备（平板） >= 768px	中等屏幕（桌面显示器） >= 992px	宽屏设备（大桌面显示器） >= 1200px
.container最大宽度	自动（100%）	750px	970px	1170px
类前缀	.col-xs-	.col-sm-	.col-md-	.col-lg-
列（column）数	12	12	12	12

🔰行（row）必须放到container布局容器里面
🔰我们实现列的平均划分，需要给列添加类前缀
🔰xs-extra small：超小；sm-simall：小；md-medium：中等；lg-large：大；
🔰列（column）大于12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列；
🔰每一列默认有左右15像素的padding
🔰可以同时为一列指定多个设备的类名，以便划分不同份数，列如：class=“col-md-4 col-sm-6”

2. 列嵌套

🔰栅格系统内置的栅格系统将内容再次嵌套。简单理解就是一个列内再分成若干份小列。我们可以通过添加一个新的.row元素和一系列.col-sm-*元素到已经存在的.col-sm-*元素内。
🔰列嵌套最好加1行row，这样可以取消父元素的padding值，而且高度自动和父级一样高。

<div class="col-sm-4">
	<div class="row">
		<div class="col-sm-6">小列</div>
		<div class="col-sm-6">小列</div>
	</div>
</div>

3. 列偏移

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

<div class="row">
	<div class="col-lg-4">1</div>
	<div class="col-lg-4 col-lg-offset-4">2</div>
</div>

4. 列排序

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

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

5. 响应式工具

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

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

🔰visible-xs visible-sm visible-md visible-lg是显示某个页面内容。

---

---

六. 移动端布局总结

(一) 移动端主流方案

🔰单独制作移动端页面（主流）
京东商城手机版
淘宝触屏版
苏宁易购手机版
🔰响应式页面兼容移动端（其次）
三星手机官网

---

(二) 移动端技术选型

🔰流式布局（百分比布局）
🔰flex弹性布局
🔰rem适配布局
🔰响应式布局
🔰建议：沃恩选取一种主要技术选型，其他技术做为辅助，这种混合技术开发

---

---

七. vw和wh

🔰vw/wh是一个相对单位，总是相对于视口来说的。
🔰vw是：视口宽度单位
🔰vh是：视口高度单位
🔰1vw就是当前视口的1/100
🔰百分比是相对于父元素来说的，而vw和vh总是针对于当前视口来说的。

---

🔰使用时，元素单位直接使用新单位vw/vh即可。

---

1. 视口宽度尺寸是375px
2. 那么1vw = ？
   1vw = 375px / 100 =3.75px
3. 元素的目标是多少像素？
   50px * 50px
4. 50px = 50 / 3.75 = 13.3333vw

按照px 转换vw的插件：px2vw

---

---

十. 案例实践

(一) 京东移动端首页

1. 技术选型

🔰方案：我们采取单独制作移动页面方案
🔰技术：布局采用流式布局

2. 搭建相关文件夹结构

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

<meta name="viewport" content="width=device-width, initial-scale=1.0, 
user-scalable=no, maximum-scale=1.0, minimum-scale=1.0">
<!-- 引入我们的css初始化文件 -->
<link rel="stylesheet" href="css/normalize.css">
<!-- 引入我们首页的css -->
<link rel="stylesheet" href="css/index.css">