移动端布局方案

流式布局

流式布局（百分比布局）这种布局方式在 Web 前端开发的早期历史上，用来应对不同尺寸的 PC 屏幕（那时屏幕尺寸的差异不会太大），在当今的移动端开发也是常用布局方式

• 用法：

4. 使用%百分比定义宽度，高度大都是用px来固定住
5. 配合 max-width/min-width 等属性控制尺寸流动范围，以免过大或者过小影响阅读。
6. 例如：
设置网页主体的宽度为80%，min-width为960px
图片也作类似处理（width:100%, max-width一般设定为图片本身的尺寸，防止被拉伸而失真）

• 特点：

1. 屏幕分辨率变化时，页面里元素的大小会变化而但布局不变
2. 这就导致如果屏幕太大或者太小都会导致元素无法正常显示：
因为宽度使用%百分比定义，但是高度和文字大小等大都是用px来固定
所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度、文字大小还是和原来一样
这些东西无法变得“流式”，显示非常不协调。

REM布局

rem布局：又称等比缩放布局，PC端浏览器对rem单位支持并不友好，一般只用于移动端

• 原理：

1. 页面中的元素采用rem作为尺寸或者间距的单位。
2. 想办法去动态改变html标签的font-size大小。
3. 这样就可以适配不同的设备进行等比缩放。

相对单位：

- em：参照于父元素font-size进行取值	父元素font-size大小=子元素1em（若子元素也设置了font-size则子元素后续属性使用EM时参照于自身font-size） 
- rem：参照于HTML font-size 	HTMLfont-size= 1rem
- vw：参照于视口宽度大小	视口1%宽度=1vw 
- vh：参照于视口高度大小	视口1%高度=1vh 
- vmin：vw和vh中的较小值
- vmax：vw和vh中的较大值
- calc() 函数：用于动态计算长度值。运算符前后都需要保留一个空格

#div1 { 
position: absolute; 
left: 50px; 
width: calc(100% - 100px); 
border: 1px solid black; 
background-color: yellow; 
padding: 5px; 
text-align: center; }
/*calc()函数支持 "+", "-", "*", "/" 运算；*/

---

使用rem单位 + px或%

• 用法：

1. 包裹文字的各元素的尺寸采用rem做单位
2. 而页面的主要划分区域的尺寸仍使用百分数或px做单位

• 详细说明：

1. 浏览器的默认字体高度一般为16px，即1em:16px
2. 但是 1:16 的比例不方便计算，为了使直观一般将页面根节点字体设为62.5%，
3. 比如选择用rem控制字体时，先需要设置根节点html的字体大小，
4. 因为浏览器默认字体大小16px*62.5%=10px。这样1rem便是10px，方便了计算。
5. 那么为什么一般多是 html{font-size:62.5%;} 而不是 html{font-size:10px;}呢？
6. 因为有些浏览器默认的不是16px，或者用户修改了浏览器默认的字体大小。
7. 如果我们将其设置为10px，一定会影响在这些浏览器上的效果，
8. 所以最好用绝大多数用户默认的16作为基数 * 62.5%得到我们需要的10px。

html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}
body {font-size: 1.4rem;/*1.4 × 10px = 14px */}
h1 {font-size: 2.4rem;/*2.4 × 10px = 24px*/}

1. 实际项目设置成 font-size: 62.5%可能会出现问题，
2. 因为chrome不支持小于12px的字体，计算小于12px的时候，会默认取12px去计算，导致chrome的em/rem计算不准确。
3. 针对这个现象，可以尝试设置html字体为100px，body 修正为16px，
4. 这样 0.1rem 就是 10px，而body的字体仍然是默认大小，不影响未设置大小的元素的默认字体的大小。

html {font-size:100px;}
body {font-size:16px;}
p {font-size:.5;} /* .5rem = 50px */

---

使用rem单位 + vw单位

• 用法：

1. 使用vw单位作为 HTML font-size的单位
2. 页面所有布局使用rem单位

• 原理：

• 根据屏幕的大小用vw来动态控制html元素的font-size，即可自动改变所有用rem定义尺寸的元素的大小

• 详细说明：

一般把html的font-size设置为100px，便于页面中rem换算，比如设备width：320px；
1. 320/100=3.2,即1vm=3.2px
2. 100/3.2=31.25,即100px=31.25vm
3. html：`font-size:31.25vm;`
4. 此时：1rem=31.25vm=设备100px=设计图200px
5. 所以：参照设计图给页面设置尺寸时rem注意换算

- 640px 的设计图 对应的 设备是 320px		`font-size:31.25vm;`
- 750px 的设计图 对应的 设备是 375px		`font-size:26.67vm;`
- 1080px 的设计图 对应的设备 是 360px	`font-size:27.78vm;`

html{
    font-size: 31.25vw;
}
/* 设置全局默认字号字体 */
body{
    font: .14rem "微软雅黑",Arial;
}

使用rem.js + rem单位

• 用法：

1. 在vscode中的扩展安装cssrem插件，文件—》首选项—》设置—》（搜索cssrem，改变rootfontsize为设计图 / 10的数字）重启编辑器
2. 在页面中使用script标签引入rem.js文件（在js文件的18行把数字改为设计图的大小）
3. 在页面中的布局，量出多少值就写多少，然后使用它转换的rem的值

• 原理：通过js获取设备的宽度，来计算根节点的字体大小，rem得出来的值就不一样，就到达不同页面能适配

响应式布局

响应式设计的目标是确保一个页面在所有终端上（各种尺寸的PC、手机、手表、冰箱的Web浏览器等等）都能显示出令人满意的效果。媒体查询获取不同的设备，在不同的设备当中更改根节点的字体大小，利用@media进行断点，在每个断点中编写css

@media (max-width:768px){
    /* 浏览器的宽度低于768时有效 */
}

媒体类型	描述
all	用于所有多媒体类型设备
print	用于打印机
screen	用于电脑屏幕，平板，智能手机等。
speech	用于屏幕阅读器

关键字	描述
and	前后两个条件都达到
only	用来定某种特别的媒体类型
not	用来排除掉某些特定的设备

1. 设置meta标签

<!-- 
	content：设备的宽度、也可以写死
	initial-scale：初始化缩放
	maximum-scale：最大缩放值
	user-scalable：不允许缩放
 -->
<meta name="viewport"  content="width=device-width,  initial-scale=1.0, 
maximum-scale=1.0,  user-scalable=0">

2. 加载兼容js

<!-- 实现 ie8 兼容 html5 和 css3 media -->
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<!-- 让 ie 文档处于最新状态 -->
<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">

3. 设置css3 media 写法

/* 当浏览器宽度低于1000px时 */
@media (max-width:1000px){
    div{background:blue;}
}

/* 当浏览器宽度大于1000px 和 小于1150px时 */
@media (min-width:1000px) and (max-width:1150px){
    div{background: yellow;}
}

/* 仅在屏幕上显示 且 宽度小于1150px时 */
@media only screen and (max-width:1150px){
    div{border:solid 1px;}
}

/* 除打印上显示外 且 宽度小于1150px时 */
@media not print and (max-width:1150px){
    div{border-radius:50%;}
}

• 设计方法：

媒体查询+流式布局
通常使用 @media 媒体查询 和网格系统 (Grid System) 配合相对布局单位进行布局
实际上就是综合响应式、流动等上述技术通过 CSS 给单一网页不同设备返回不同样式的技术统称

- 特点：每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变
- 优点：兼容性好，@media 在ie9以上是支持的，PC和Mobile是同一套代码的，不用分开
- 缺点：要写得css相对另外两个多很多，而且各个断点都要做好。css样式会稍微大点，更麻烦。