一、移动端与PC端的不同
1.W3C标准的支持情况
PC端：Chrome浏览器支持最好，低版本IE支持较差，然而中国人用的IE多数版本较低
移动端：Chrome浏览器支持良好，而ios浏览器支持较差
PS：CAN I USE（caniuse.com）是一个可以查询可以查询浏览器对W3C标准的支持情况
2.交互上因屏幕的变化而改变
屏幕变小意味着很多东西需要触发才能展现，最明显的就是菜单变化。
一般情况会把菜单栏横向或竖向摆放在页面的顶端，而移动端屏幕变化，空间不足，所以变成点击触发才展现菜单栏
3.布局可以采用更多的方式
- Flex布局（弹性盒子布局）。
- Rem计算
4.性能上考虑不一样
移动端存在以下几点性能上的问题
- 要考虑弱网络环境
- 流量问题
- 图片的适配和压缩问题
5.移动端的坑
- 浏览器的性能问题
- 手机的各个厂商（我们权限不高，受制于浏览器）
- Android的版本问题（需要兼容，微信的公众号就是微信自己写的一个浏览器，不需要考虑兼容问题）
二、手机设备的基本概念
- physical pixel 物理像素，指屏幕分辨率
- device-independent pixel 设备独立像素 和设备无关的像素 px
- device pixel ratio 设备像素比 物理像素/独立像素
- PPI（每英寸的像素值）物理像素高宽的平方和开方之后除以英寸的值，可以理解为像素密度，当PPI大于300时屏幕就是高清屏
1.physical pixel（物理像素、又叫设备像素Device Pixel）
中文有多种名字，它的物理像素是固定的，这是厂商在出厂时就设置好了的，即一个设备的分辨率是固定的。
我们常说的1920×1080像素分辨率就是用的设备像素单位。
2.device-independent pixel 设备独立像素
字面上理解就是与设备无关像素。是与设备无关的逻辑像素，是一种总的概念，包括我们经常说的CSS像素。CSS像素适用于web编程，指的是我们在样式代码中使用到的逻辑像素，是浏览器的抽象单位，实际并不存在。
3.device pixel ratio 设备像素比（DPR）
也叫像素缩放比，
公式为：物理像素 / 设备独立像素 = DPR
4.PPI 每英寸的像素值
物理像素高宽的平方和开方之后除以英寸的值，可以理解为像素密度，当PPI大于300时屏幕就是高清屏。
\
三、Viewport
移动设备上的viewport是指设备的屏幕上能用来显示网页的区域，一般来讲，移动设备上的Viewport都要大于浏览器的可视区域。
viewport是一个标签属性。
语法
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scaleble=no">属性说明
- widtht：设置layout viewport的宽度，值为一个正整数，或字符串“device-width”，通常device-width将viewport设置为当前设备的宽度。
- height：设置layout viewport的高度，这个属性对我们并不重要，很少使用。
- initial-scale：设置页面的初始缩放值，为一个数字，可以带小数。（设备的宽度 / 显示网页区域 = initial-scale）
- minimum-scale：设置页面的最小缩放值，为一个数字可以带小数。
- maximum-scale：设置页面的最大缩放值，为一个数字，可以带小数。
- user-scalable：是否允许用户进行缩放，值为“no”或“yes”。（多点触控那种的两个手指缩放）.
四、css度量单位
CSS的度量单位有：
- px（pixel）像素值
- rem 根据html元素的字体大小作为单位。不受父元素影响。
- em 根据父元素的字体大小作为单位，也就是继承父元素的字体大小。
- vw 屏幕宽度的百分之1.
- vh 屏幕高度的百分之1.
- vmin 屏幕最小值的百分之1.
- vmax 屏幕最大值的百分之1.
PS：如果屏幕是宽屏，则vmin就是使高度，vmax就是宽度。如果屏幕是竖屏（手机那种），vmin是宽度，vmax就是宽度。这么多单位都是为了兼容不同分辨率。
viewport被均分为100单位的vh和vw。100vh为视口的总高，100vw为视口的总宽。
五、浏览器分布情况
在PC端比较需要考虑的浏览器的IE，在做网页前通常需要讨论兼容到IE几，这会影响到技术和CSS属性等等的使用
-移动端
- Android原生浏览器
- ios原生浏览器
- 国产友商：会对原生的Android浏览器进行改动，删去一些原有的功能，添加一些没有的功能。
- 微信：X5内核，用途广泛