前言
本人是一个爱好火锅的小白，做一个前端基础系列相关知识的整理，虽然现在这方面的文章和视频已经多不胜数，就当是给自己一个巩固和回顾，毕竟生命不息，学习不止。
概述
在现阶段Web开发中，除了对PC端浏览器进行开发，同时也会进行移动Web开发，毕竟现在移动设备已经占市场多数，手机、平板等，几乎人手一部，那肯定就避免不了开发移动端的网页。
移动端开发，不能像在PC那般，现在移动设备屏幕分辨率类型实在是多之又多，就拿Android设备来说，屏幕是越做越大，分辨率也是千奇百怪，几乎一个机型一个分辨率，这也是移动开发中比较“皮”的一个部分。
浏览器现状
- 目前市场上浏览器的现状，从PC和移动端两个部分来看
- PC：Chrome、360、QQ、火狐、百度、搜狗、IE
- 移动端：Chrome、360、苹果Safari、UC、QQ、百度、搜狗、猎豹以及各个厂商手机自带的浏览器
像国内UC、QQ、百度等手机浏览器，都是根据webkit修改过来的内核，所以我们在移动开发中想要兼容主流浏览器，其实就处理webkit内核的浏览器即可，不用做其他太多的兼容
手机屏幕现状
上面说到移动设备屏幕众多，碎片化严重，这个现象现在不仅仅出现在Android，iPhone手机目前屏幕碎片化也在加剧
- Android目前主要分辨率：480x800，480x854，540x960，720x1280，1080x1920，2k、4k屏等；
- iPhone目前主要分辨率：640x960，640x1136，750x1334，1242x2208
但是咱们作为开发者，不用太过关注这些分辨率，只需要关心设计图的尺寸，因为我们常用的尺寸单位是像素(px)。至于分辨率，可以使用各种各样的手段对其进行兼容，让它自动识别这个分辨率进行加载。
常见移动端屏幕尺寸
这里就直接上图了，作为了解
注：以上数据均参考自material.io/devices/
这里就涉及到了几个相关概念，尺寸、开发尺寸和物理像素比
物理像素比就是手机的尺寸和开发尺寸的一个比例，比如IPhone6里面，它的尺寸是750x1334的，而开发尺寸是375x667，它们则是一个2:1的关系，我们根据这个关系，去处理页面上的图片和位置等。
我们在开发过程中，关注的并不是尺寸，而是开发尺寸。
这个开发尺寸，其实就是设计图的尺寸，根据设计图所给的尺寸进行开发。
移动端调试
使用浏览器的开发者模式进行模拟移动设备调试
比如在Chrome中，打开控制台，选择元素按钮旁边有一个类似小手机的图标
点击之后页面就会模拟成移动设备进行显示，同时页面上方也显示当前设备的一个开发尺寸，左侧可以进行设备切换。
可以通过设备切换，切换不同的设备进行不同尺寸的显示，当然，如果没有你需要的设备，可以点击edit进行自定义添加
结尾
关于移动Web开发的基础就先说这么多，后面会针对具体的开发方案进行说明，包括一些相关知识。
