这是我参与「第五届青训营 」伴学笔记创作活动的第 11 天
（仅供自己参考，技术点请看字节整理的资料和相应官方技术文档）
这是前端基础系列里的第3篇《移动端开发》
移动端浏览器：
UC浏览器，QQ浏览器，欧朋浏览器，百度手机浏览器，360安全浏览器，谷歌浏览器，搜狗手机浏览器，猎豹浏览器，以及其他杂牌浏览器。
国内的UC和QQ，百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自主研发的内核
兼容移动端主流浏览器，处理Webkit内核浏览器即可
手机屏幕 屏幕尺寸非常多，碎片化严重 480x800, 480x854, 540x960, 720x1280，1080x1920、2K，4k屏。 iPhone设备的主要分辨率有：640x960, 640x1136, 750x1334, 1242x2208等。
移动端调试方法
- Chrome DevTools（谷歌浏览器）的模拟手机调试
- 搭建本地web服务器，手机和服务器一个局域网内，通过手机访问服务器
- 使用外网服务器，直接IP或域名访问
移动开发选择和技术解决方案
- 移动端主流方案
- 单独制作移动端页面（主流）
- 通过判断设备，跳到移动端页面。
- PC端和移动端为两套页面代码，两套样式方案
- 响应式页面兼容移动端（其次）
- 即pc和移动端共用一套网站，只不过在不同屏幕下，样式会自动适配
-
移动端技术解决方案：
- 移动端浏览器兼容问题：以 webkit 内核为主、使用 H5 标签和 CSS3 样式
- 移动端公共样式
- 移动端 CSS 初始化推荐使用 normalize.css/ necolas.github.io/normalize.c… /CSS3盒子模型/ box-sizing: border-box; -webkit-box-sizing: border-box;
/点击高亮我们需要清除清除 设置为transparent 完成透明/ -webkit-tap-highlight-color: transparent;
/在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式/ -webkit-appearance: none;
/禁用长按页面时的弹出菜单/ img,a { -webkit-touch-callout: none; }
移动端常见布局
- 移动端单独制作 流式布局（百分比布局） flex 弹性布局（强烈推荐） less+rem+媒体查询布局 混合布局
- 响应式 媒体查询 bootstarp
- 流式布局
- 流式布局，就是百分比布局，也称非固定像素布局。
- 是移动web开发使用的比较常见的布局方式
