web移动端
移动端开发
HTML
移动端适配
流式布局
百分比布局，也叫流式布局
__好处__，大屏幕下显示更多的内容
__坏处__，宽屏下比例会有一些不协调
rem布局
等比缩放布局，也叫rem布局(root em)
单位:
- em 是一个相对单位，1em等于当前元素或父元素的font-size值(当前元素没有 font-size则父元素)
- rem 是一个相对单位，1rem等于根元素的font-size值(html标签)
vw/vh 把屏幕分为100份，1vw等于屏幕宽度的1%
在meta中已经把layout viewport设置成和visual viewport一样的宽度了
两种设置rem布局的方式
- js
- vw
要给body重新设置font-size(默认为16px)，避免受到html的font-size的影响
响应式布局
利用媒体查询，既media queries，可以针对不同的媒体类型定义不同的样式，从而实现响应式布局
1 | @media all and (min-width:500px){ |
在link标签内的media属性可以设置是否包含css
媒体类型：
| 取值 | 含义 |
|---|---|
| all | 用于所有设备 |
| 用于打印机和打印预览 | |
| screen | 用于电脑屏幕，平板电脑，智能手机等 |
| speech | 用于屏幕阅读器等发声设备 |
常见选项：
- and not
- min-width max-width
- orientation:portrait orientation:landscape (横纵屏)
常见修改样式：
- display
- float
- width
注：响应式代码写到要适配的CSS后面
CSS
viewport 视口
在移动端viewport视口就是浏览器显示页面内容的屏幕区域，在viewport中有两种视口，分别表示为visual viewport(可视视口)
visual viewport固定大小跟屏幕大小相同，在上面，而layout viewport可改变大小，在下面
layout viewport默认大小为980像素，可通过以下代码获取
1 | document.documentElement.clientWidth |
jq使用以下代码获取
1 | $(window).width() |
现代网页需要将layout viewport设置成跟visual viewport等同大小，方便进行网页制作
通过<meta>标签进行设置，name属性指定viewport值，content属性进行视口配置
取值：
- width 设置layout viewport的宽度特* device-width表示设备宽
- height 设置layout viewport的高度特定值，一般不进行设置
- initial-scale 设置页面的初始缩放
- minimum-scale 设置页面的最小缩放
- maximum-sacle 最大缩放
- user-scalable 设置有页面能否进行缩放
注意事项
预留。。。
Javascript
预留。。。
对象
预留。。。
event 对象
移动端 触摸事件
- ontouchstart
- ontouchmove
- ontouchend
- ontouchcancel
调试工具
移动端模拟器
切换平台之后，要重新刷新页面
注意事项
访问网站的PC端和移动端
PD端一套代码，移动端另一套代码访问淘宝网 -> 后端检测当前设备 ->如果是PC端 -> www.taobao.com
访问淘宝网 -> 后端检测当前设备 -> 如果是移动端 -> www.taobao.com重定向 -> h5.m.taobao.com
框架
Boorstrap
用于开发响应式布局，移动设备优先的web项目html CSS js框架
特色：
注意事项
bootstrap所有元素都是box-sizing:border-box
居中按钮使用text-center类
微信