浏览器现状

PC端浏览器存在历史久远，兼容性好。移动端浏览器发展新，要考虑很多兼容性。总结：兼容移动端主流浏览器，处理webkit内核浏览器即可。

手机屏幕的现状

屏幕尺寸大小不一

移动端调试方法

• Chrome DevTools的模拟手机调试
• 搭建本地web服务器，手机和服务器一个局域网内，通过手机访问服务器
• 使用外网服务器，直接IP或域名访问

视口

视口是浏览器显示页面的内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口

布局视口

一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面的手机上显示的问题。

视觉视口

用户正在看到的网站的区域。注意：是网站的区域。可通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度。

理想视口

为使网站在移动端有最理想的浏览器和阅读宽度而设定，理想视口对设备来讲是最理想的视口尺寸，需要手动添加meta视口标签通知浏览器操作。meta视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽布局视口就多宽。总结：最终会使用理想视口，而理想视口就是将布局视口的宽度修改为视觉视口。

meta标签

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

最标准的viewport设置

• 视口宽度和设备保持一致
• 视口的默认缩放比例1.0
• 不允许用户自行缩放
• 最大允许的缩放比例1.0
• 最小允许的缩放比例1.0

二倍图

物理像素和像素比

物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。
物理像素比：1px不一定等于等于1个物理像素。
由于视网膜屏幕技术：将更多物理像素点压缩至一块屏幕提高分辨率，提高屏幕显示的细腻程度。因此图片会按照物理像素比放大倍数造成图片模糊。通常使用二倍图提高背景图质量。

背景缩放

background-size属性规定背景图像的尺寸

background-size:背景图片宽度 背景图片高度

单位：长度|百分比|cover|contain
cover把背景图像拓展至足够大，以使背景图像完全覆盖背景区域。
contain把图像拓展至最大尺寸，以使其宽度和高度完全适应内容区域。

移动端技术解决方案

• 移动端浏览器兼容问题
  移动端浏览器基本以webkit内核为主，因此我们就考虑webkit兼容性问题，可放心使用h5标签和css3样式。同时浏览器的私有前缀我们只需考虑添加webkit即可。
• 移动端公共样式
  移动端css初始化推荐使用normalize.css：保护了有价值的默认值、修复了浏览器的bug、模块化的、拥有详细的文档

官网地址：http://necolas.github.io/normalize.css/

移动端大量使用css3盒子模型

传统模式宽度计算：盒子的宽度=css中设置的width+border+padding
css3盒子模型：盒子的宽度=css中设置的宽度width里面包含了border和padding
也就是说，css3盒子模型中padding和boreder不会撑大盒子

//css3盒子模型
box-sizing:border-box
//传统盒子模型
box-sizing:content-box

移动端特殊样式

//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+媒体查询布局
• 混合布局
  响应式
• 媒体查询
• bootstrap