移动WEB开发之流式布局移动端基础

浏览器现状

PC端常见浏览器

360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器。

移动端常见浏览器

UC浏览器，QQ浏览器，欧朋浏览器， 百度手机浏览器，360安全浏览器，谷歌 浏览器，搜狗手机浏览器，猎豹浏览器 ，以及其他杂牌浏览器。

国内的UC和QQ，百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自主研发的内核，就像国内的手 机操作系统都是基于Android修改开发的一样。

总结：兼容移动端主流浏览器，处理Webkit内核浏览器即可。

手机屏幕现状

移动端设备屏幕尺寸非常多，碎片化严重。

Android设备有多种分辨率：480x800, 480x854, 540x960, 720x1280，1080x1920等，还有传说中的2K，4k屏。

近年来iPhone的碎片化也加剧了，其设备的主要分辨率有：640x960, 640x1136, 750x1334, 1242x2208等。

作为开发者无需关注这些分辨率，因为我们常用的尺寸单位是 px 。

常见移动端屏幕尺寸

注：以上数据均参考自How to Find Device Metrics for Any Screen - Material Design

注：作为前端开发，不建议大家去 纠结dp，dpi，pt，ppi等单位。 

移动端调试方法

Chrome DevTools（谷歌浏览器）的模拟手机调试

添加手机 

搭建本地web服务器，手机和服务器一个局域网内，通过手机访问服务器

使用外网服务器，直接IP或域名访问

总结

移动端浏览器我们主要对webkit内核进行兼容

我们现在开发的移动端主要针对手机端开发

现在移动端碎片化比较严重，分辨率和屏幕尺寸大小不一

学会用谷歌浏览器模拟手机界面以及调试