移动端布局

重点

移动端和pc端的不同
移动端新增标签属性
flex布局和rem布局

移动端和pc端的不同

pc端兼容不同的浏览器及内核。移动端只有一种浏览器内核（webkit），但是兼容不同分辨率的手机。

pc端为了布局兼容会在css的不同属性前加入不同前缀兼容不同的浏览器。
移动端学习难点是在不同分辨率的手机上显示相同比例的东西。

移动端新增标签属性

在html5中新增的标签分为三类：一类为了语义化、一类为了资源媒体的使用、一类为了移动端。

为了语义化： head头部标签、nav导航标签、main主体标签、article独立的内容标签、section区段标签、aside侧边栏标签、footer尾部标签

资源媒体： video视频标签、audio音频标签、canvas展示绘图效果标签

为了移动端：

1. input属性 input里面增加了很多类型。因为不用的类型，唤醒的键盘不同。
   type= "email"限制用户输入必须为Email类型。
   type= "url"限制用户输入必须为URL类型。
   type= "data"限制用户输入必须为日期类型。
   type= "time"限制用户输入必须为时间类型。
   type= "month"限制用户输入必须为月类型。
   type=’ "week"限制用户输入必须为周类型。
   type="number"限制用户输入必须为数字类型。max= “100” min=“0” step=“4” value= “4”。
   type= "range"滑动条。
   type="tel"手机号码。
   type="search"搜索框。
   type= "color"生成-个颜色选择表单。

2. datalist标签 规定了input元素可能的选项例表。包含一组option元素， 这些元素可以预定义可选值，在input元素输入过程中，会自定响应option元素的值。绑定的input标签必须设置Iist属性, 属性值等于datalist标签的id属性。

<input type='text' list="list">
<datalist id="list">
<option value="上海" >shanghai</option>
<option value=" 北京" >beijing</option>
</datalist>

3. 新增其他表单属性
   required:“required"设置该属性的表单元素不能为空。（可以只写required）
   提示内容写法:
   1.required:“提示内容”
   2.oninvalid= “setCustomValidity(提示内容)”
   placehoder:“提示文本提示信息”
   autofocus:“自动聚焦”，一般一个页面中放一个。（可以只写autofocus）
   autocomplete:“ off/on” ,之前填写并提交过的内容，设置on后再次填写浏览器会去识别。需要添加同一个name属性。
   multiple:" multiple"可以多选文件提交。（可以只写multiple）

meta属性

< meta name="viewport" content= "width= device-width,
user-scalable= no,initial-scale= 1.0,
maximum-scale= 1.0,minimum-scale=1, 
shrink-to-fit= no, viewport-fit=cover">
/*
width=device-width屏幕宽度=设备宽度最早写的是width=320
user-scalable=no/0用户是否可以缩放
initial-scale= 1.0初始化缩放比例山寨国产 老年机改缩放比例
maximum-scale=1.0最大缩放比例华为mate8为了个别手机
minimum-scale=1最小放缩比例
shrink-to-fit=no ios9中的bug 识别屏幕宽度
viewport-fit=cover解决苹果x刘海的问题
*/

移动端自适应

1. css3盒子模型
   box-sizing:content-box 默认 padding border 向外扩展
   border-box 内盒子 向内扩展

2. css3计算calc（计算）计算器
   +、-、*、/

移动端布局flex

见阮一峰老师的文章：Flex 布局教程
练习游戏：flexboxfroggy

常见移动端布局

1. 定宽布局
   盒子区间，里面百分比，高度自适应
   min-width、max-width

2. 流体布局 百分比+浮动
   宽度百分比，高度自适应
   （难以还原设计图）

3. 响应式布局 媒体查询
   @media screen and ( max-width: 980px ) {
   … …
   }

4. 相对单位布局
   % 相对父级的宽度
   em 相对自己的字体大小
   vw viewport-width
   1vm可视窗口宽度的百分之1
   10vm可视窗口宽度的百分之10
   vh 相对于可视窗口的高度
   vmax 是相对可视窗口中宽高最大的那个
   vmin 是相对可 视窗口中宽高最小的那个
   rem 相对的HTML根元素字体大小（它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应）

px 与 rem 的选择：
只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px。需要适配各种移动设备，使用rem。

Rem布局

在加载的一瞬加你，根据屏幕宽度改变根字体大小。

计算根字体大小：

(function (win,doc) {
function change(){
doc . documentElement . sty1e . fontSize=20* doc . documentElement . clientWidth/320+'px' ;
}
change();
win. addEventListener('resize'，change, false)
})(window, document);