移动端基础

兼容移动端主流浏览器，处理webkit内核浏览器即可

1.调试方式

1. Chrome DevTools的模拟手机调试
2. 搭建本地Web服务器，手机和服务器一个局域网内，通过手机访问服务器
3. 使用外网服务器直接ip或者域名访问

2. 视口vlewport

即屏幕区域

• 布局视口 layout viewport
  固定宽度980px不适合移动端

• 视觉视口 visual viewport
  网站区域

• ideal视口 ideal viewport
  适合，实现这个视口需要手动添写meta标签，可以实现视口和设备宽度相当

  ideal viewport标准viewport设置

  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0,
  maximum-scale=1.0,minimum-scale=1.0">
  

3.二倍图

在pc端中，1px=1像素
在移动端中（iphone8为例），1px=2像素

Retina视网膜屏幕显示技术，将更多像素压缩到一块屏幕，从而达到更高分辨率

解决二倍图问题（时其不至于模糊），在pc端将原始图提前缩小一半，然后再到手机自动放大2倍，就能在手机上呈现原来图片的比例，提高清晰度

4.移动端技术解决方案

移动端浏览器基本以webkit内核为主，所以可以放心使用H5和CSS3样式，私有前缀只考虑添加webkit
css初始化：normalize.css
可以从https://cdn.bootcdn.net/ajax/libs/normalize/8.0.1/normalize.css下载引入
normalize.css的优点：

• 保护了有价值的默认值
• 修复了浏览器的bug
• 模块化
• 有详细文档

5.特殊样式

盒子模型
-webkit-box-sizing:border-box;
清除点击高亮
-webkit-tap-hightlight-color:transparent;
去除默认外观样式
-webkit-appearance:none;
禁用常按页面弹出菜单
img a{
-webkit-touch-callout: none;
}

6.常见布局

1. 流式布局
2. flex弹性布局（强推）
3. less+rem+媒体查询布局
4. 混合布局