Web前端学习—基础篇(36)_移动端布局：viewport、移动端web页面适配方案 、响应式布局、rem布局、vw + rem布局、移动端样式重置、帧动画、媒体查询
6.8、移动端布局
6.8.1、移动端浏览器及内核
1、浏览器：
UC浏览器、QQ浏览器、百度浏览器、夸克浏览器、360浏览器...
safari、chrome...
2、内核：webkit...
6.8.2、viewport
**解决移动端浏览器的屏幕分辨率大小问题**
1、 视口
PC端视口：PC端浏览器显示内容的屏幕区域
移动端视口：移动端浏览器显示内容的屏幕区域
1.1 移动端视口分类
（1）布局视口：移动端设备默认的viewport(宽度768~1024px)
（2）视觉视口：可以观看区域，屏幕宽度
（3）理想视口：为了网站的移动端能更好的浏览和阅读
1.2 meta标签
目的：布局视口和理想视口的宽度保持一致。设备有多宽，布局视口就有多宽
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0">
创建一个虚拟窗口，窗口的宽度为设备宽，初始缩放比为1倍，同时不允许用户手动缩放
1.3 content属性
width 虚拟窗口宽 device-width 设备宽
initial-scale 初始缩放比
user-scalable 是否允许用户手动缩放
user-scalable=yes 允许用户手动缩放，默认值
user-scalable=no 不允许用户手动缩放
maximum-scale 最大缩放比
minimum-scale 最小缩放比
6.8.3、移动端web页面适配方案
1、固定布局
设置viewport，布局与PC端一致，假设整个网页的宽度为320px居中，超出部分留白。
- 优点：
思路沿用PC端，上手容易
- 缺点：
大屏幕手机及手机横屏的时候，左右两侧留有大片留白，并且大屏幕手机下显示内容看起来较小，操作按钮较小，用户体验较差
2、流式布局
宽度使用百分比代替固定宽度px，高度大多用px固定，因此在大屏幕手机下显示效果会变成页面元素宽度被拉长，高度和原来保持一致
- 优点：
可以很好解决自适应问题
- 缺点：
1、实际显示效果不协调；
2、大量使用百分比布局，会出现兼容问题；
3、设计有局限性
3、响应式布局
一个网站适配所有终端，实现不同屏幕分辨率下的终端网页的不同布局；
使用媒体查询针对不同宽度的设备进行布局和样式设置，从而达到适配不同设备的目的
- 优点：
1、一站适配所有终端、
2、减少工作量；
3、缩短开发周期；
4、对搜索引擎表现更友好；
5、在每个设备中都能得到较好的设计
- 缺点：
1、在老版本的浏览器兼容性不好；
2、兼容各种设备工作量大，效率较低；
3、加载更多的样式和脚本文件；
4、设计比较难于精确定位和控制；
5、是一种折中性质的设计方案，在一定程度上改变网页布局结构，会出现用户混淆情况；
6、维护困难
4、rem布局
rem是css3新增单位，相对于根元素的字号大小而言，如：html{ font-size: 100px; } 一个div标签的宽度为1rem,div的宽度是100px
- rem布局的实现
（1）设置页面的viewport
（2）动态计算并设置html的font-size属性值
（3）按照PC端布局方式正常布局，将px单位改为rem单位；如果值较小（1px），不用转换
- 优点：
1、适用于偏APP类型的移动端页面；
2、有利于手机端各种机型的适配；
3、减少代码重复性；
4、有统一的参考值
- 缺点：
1、使用具有局限性，所有的图片都需要设置一个准确值，才能保证在不同机型的适配中正常显示；
2、必须通过js动态控制根元素的大小
5、vw布局
使用纯css实现动态改变font-size属性值，不需要引用js文件
- 内容
vw viewport‘s width 是css3规范中的宽度视口单位，将视口宽度平均分成100份
vh viewport’s height 高度视口单位，将视口高度平均分成100份
1vw = 屏幕宽度的1%
vmax 相对于视口的宽度或高度中较大的那个值，将最大的那个值平均分成100单位的vmax
vmin 相对于视口的宽度或高度中较小的那个值，将最小的那个值平均分成100单位的vmin
举例：
iphone 414px 1vw = 4.14 24.154个vw是100px
375px 1vw =3.75 26.666个vw是100px
- 原理：
1、确定基准值,以常见的750像素宽度的设计稿为例；
2、根据vw单位的原理100vw = 750px，即1vw = 7.5px，
3、根据设计稿中的px值，转换成对应的vw值进行布局，也可以直接写px，后期借助插件完成自动计算得到需要的vw
- 优点：
页面元素随着页面宽度变化
- 缺点：
兼容性没有rem好
6、vw + rem布局
vw px rem
(1)确定基准值以常见的750px宽度的设计稿为例，根据vw单位和rem单位原理实现在750px设计稿下，
(2)如果使用vw单位换算，100vw = 750px，1vw = 7.5px, 1px = 0.133333vw；
(3)如果使用rem单位换算，预设1rem = 100px，则100px = 13.3333vw
html{
font-size: 13.3333vw;
}
6.8.4、移动端样式重置
1、normalize.css 代替样式重置文件
没有重置所有的样式风格，提供了一套合理的默认样式值
2、reset.css样式重置
- 禁止用户选中文字 安卓无效
-webkit-user-select: none;
- 禁止长按页面显示系统菜单
img,a{
-webkit-touch-callout: none;
}
- 修改placeholder的样式
inuput::-webkit-input-placeholder{
color: #333; /*默认样式*/
}
input:focus::-webkit-input-placeholder{
color: #f00; /*获取焦点后的样式*/
}
6.8.5、移动端布局注意：
1、页面布局文字是否能够随着屏幕大小变化而变化
2、流式布局和flex布局主要针对宽度设置布局
3、当屏幕发生改变时，元素的宽度和高度如何等比例缩放
6.8.6、移动特殊处理
1、超小字号处理（小于12px）
transform: scale(.7);
2、动画定义3d启动硬件加速，提升网站动画渲染性能
GPU 图形处理器，处理计算机中跟图形计算有关的工作，将数据更好地呈现在显示器中
CPU 中央处理器，控制计算机运行
transform: translate3d(0,0,0);
3、圆角BUG
background-clip: padding-box;
4、input的placeholder属性会出现文本在偏上位置显示的问题
在保证input输入文本垂直居中的条件下，给placeholder设置padding-top,不设置行高
6.8.7、flexible.js + rem
1、特点
1、简洁、高效,属于rem适配方案
2、解决HTML5页面终端适配问题
3、开源
2、实现原理
将设备划分10等份，不同设备下的比例是一致，确定好设备的html标签的font-size属性值。
如：750px html{ font-size: 75px; } 页面中元素的rem的值 = 元素的px值/75 ,剩余部分由flexible.js完成
3、使用方法
在head标签内，添加插件
<script src="js/flexible.js"></script>
将视觉稿中的px转为rem
4、flexible的实质
----动态改写DPR(设备像素比)、根元素的font-size
4.1、做工作
（1）动态改写meta标签
<meta name="flexible" content="initial-dpr=2">
<!-- initial-dpr将dpr设置为指定值 -->
（2）动态改写data-dpr的值
（3）给html的标签添加font-size属性值，并动态改写font-size的值
5、特点
优点：可以很方便地解决HTML5页面适配问题
缺点：由于viewport得到众多浏览器的兼容，lib-flexible这个过渡方案已经被弃用，不管现在还是以前的版本，都存在一定问题
6.8.8、帧动画
1、定义关键帧
@keyframes 动画名称{
0%{} 动画的开始
50%{}
100%{} 动画的结束
}
@keyframes 动画名称{
from{ } 动画的开始
to{ } 动画的结束
}
2、引用关键帧
animation: animation-name 动画名称
animation-duration 动画的执行时间（s|ms）
[animation-timing-function] 速度曲线（ease|ease-in|ease-out|ease-in-out|linear）
[animation-delay] 延迟时间
[animation-iteration-count] 动画的执行次数 ,默认1次；设置次数直接写数值，没有单位；infinite无限循环
[animation-direction] 播放次序
[animation-fill-mode]; 动画结束之后显示的状态
播放次序：normal正常播放 alternate正向反向轮流播放 alternate-reverse反向正向轮流播放 reverse反向播放
动画结束之后显示的状态：both动画结束或开始时的状态 forwards动画结束时的状态 backwards动画开始时的状态
3、animate.css动画库
css3动画库，预设了闪烁（flash）、翻转（flip）、弹跳（bounce）、旋转（rotateIn|rotateOut）、淡入淡出（fadeIn|fadeOut）、抖动（shake）等动画效果
3.1 使用方法：
(1)引入文件 <link rel="stylesheet" href="css/animate.min.css">
(2)使用
<p class="animate__animated animate__flash">文字内容</p>
animate__animated为基础类名，必须要添加
animate__flash 指定动画类型
4、css3中过渡和动画的区别和各自使用场景
4.1 区别：
1）语法：
过渡——transition: 属性名 完成时间 速度曲线 延迟时间;
动画——animation: 自定义名称 完成时间 速度曲线 播放次数 奇偶顺序 延迟时间;
@keyframes 自定名称{} 需要先定义关键帧，再通过animation属性引用关键帧
2）触发：
过渡：需要借助伪类、js、@media触发。
动画：自动触发
3）执行次数
过渡：执行一次后不会执行，但是可以借助transitionEnd事件添加循环；
动画：可以通过animation-iteration-count属性设置循环次数；
4）复杂度
过渡：简单动画效果，可以通过transition-timing-function属性展示动画的速度效果
动画：复杂动画效果，可以定义关键帧，控制每一帧的动画效果
4.2 适用场景：
transition：适用于当元素从一种样式变换为另一种样式时为元素添加效果
animation：可以在网页中取代动画图片、Flash及需要灵活定制多个帧以及循环的动画中
6.8.9、 媒体查询
1、媒体查询
-
根据设备显示器的特性，设置不同的css样式
-
css2 不同媒体类型 设置不同的css样式
-
css3 针对不同设备特性在不改变页面内容的情况下 为特定输出设备定制显示效果
-
媒体查询可以检测到的内容：
viewport的宽度和高度
设备的宽度和高度
设备的朝向
分辨率
2、引入方式
1）在样式表中引入
在style标签对引入
使用link标签引入外部的css文件（媒体查询写在css文件中）
@media mediaType and (media feature){
选择器{ 属性: 属性值; }
}
mediaType媒体类型：
all 所有设备
screen 电脑屏幕、平板电脑、智能手机等
print 打印或打印预览
speech 屏幕阅读器等发声设备
meida feature 媒体特性表达式：
width浏览器宽度 height浏览器高度
max-width最大宽度 min-width最小宽度
device-width 设备宽 device-height 设备高
max-device-width 最大设备宽 min-device-width 最小设备宽
orientation 浏览器窗口朝向(landscape横屏显示、portrait竖屏显示)
aspect-ratio:1/2 可视区宽度和高度的比率（max min)
device-aspect-ratio:1/1 输出设备的屏幕可视区宽度和高度的比率
2）使用link标签引入
<link rel="stylesheet" href="" media="mediaType and (mediaFeature)">
6.8.10、响应式布局
概念：
一个网站适配所有终端，实现不同屏幕分辨率下的终端网页的不同布局；
使用媒体查询针对不同宽度的设备进行布局和样式设置，从而达到适配不同设备的目的
优点：
1、一站适配所有终端、减少工作量；
2、缩短开发周期；
3、对搜索引擎表现更友好；
4、在每个设备中都能得到较好的设计
缺点：
1、在老版本的浏览器兼容性不好；
2、兼容各种设备工作量大，效率较低；
3、加载更多的样式和脚本文件；
4、设计比较难于精确定位和控制；
5、是一种折中性质的设计方案，在一定程度上改变网页布局结构，会出现用户混淆情况；
6、维护困难
6.9.1、什么是响应式布局？
响应式设计、响应式开发
解决移动互联网 实现不同屏幕分辨率下网页的不同展示效果，不需要为每个终端定制特定版本
包含弹性布局、图片、css media query等
页面的设计和开发 需要根据用户行为、设备环境进行相应调整
通过媒体查询检测不同的设备尺寸，通常页面头部设置meta标签声明viewport
6.9.2、技术要点
1、标签设置
- meta标签设置:
虚拟窗口
使用高版本IE内核浏览器或Chrome
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
http-equiv属性 HTML4 规定字符集
- 针对手持设备优化，不支持viewport的浏览器
<meta name="HandheldFriendly" content="true">
- IE8-不支持媒体查询，使用media-queries.js或respond.js来增加IE对媒体查询的支持
<script src="https://cdn.bootcdn.net/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/livingston-css3-mediaqueries-js/1.0.0/css3-mediaqueries.min.js"></script>
2、使用媒体查询适配对应的样式
- 媒体查询常见的媒体尺寸设置
常用的媒体查询尺寸：
1200px
1100px 1024px 1000px
980px
768px 720px
640px
480px
320px
- 移动设备优先：超小设备 手机 768px以下
@media all and (min-width: 768px){ 小屏幕}
@media all and (min-width: 992px){ 中等屏幕}
@media all and (min-width: 1200px){ 大屏幕}
- 大屏幕优先：大屏幕 桌面 1200px及以上
@media all and (max-width: 1199px){ 中等屏幕 }
@media all and (max-width: 991px){ 小屏幕 }
@media all and (max-width: 767px){ 超小屏幕 }
3、响应式内容设置
- 字体设置
css3 rem 相对于根元素的font-size属性值而言
html{ font-size: 100%; }
@media all and (min-width: 768px){
html{ font-size:; }
}
- 百分比布局
宽度使用百分比——内填充、margin、border
布局：浮动、定位、弹性盒子
图片
前景图：max-width属性控制图片大小，height: auto;
背景图：background-size属性
