移动端和PC端

移动端和PC端有什么不同

1、所考虑兼容性的方向是不同的
PC端主要考虑的是不同浏览器之间的兼容。
而移动端主要考虑的是不同手机分辨率是不同的。也就是说PC端只要考虑的是不同浏览器之间对布局造成的问题，而移动端则主要考虑的手机分辨率的问题，注意，这里说的是主要，有程度，也没绝对的意思。

原因：
浏览器主要分为内核+外壳，外壳并不重要但也可能会影响到页面布局等问题，而内核最重要，它是用来解析代码的，内核不同，解析的的规则就不同。
早期有非常多浏览器厂商自助研发的内核，而现在的edge、chrome、firefox、safair全部变成了webkit内核。所以浏览器主要考虑不同浏览器因为外壳不同的原因造成的兼容性问题。

而移动端只有一个内核，就是webkit，只考虑布局的问题。就是在不同的分辨率下页面布局的问题。手机屏幕尺寸很多，我们不可能做到一个尺寸的手机就采用一种布局方式，而是采用自适应布局，即不同分辨率的手机下采用一套布局样式也不会乱。自适应布局就是flex布局+rem布局

2、代码测试问题
PC端代码测试直接按F12就可以了，移动端测试虽然也可以在电脑上按F12，但是解决不了全部问题，最好的测试方式还是真机测试，因为不同系统版本也可能造成兼容性的问题。这里也简单举个例子说为啥手机端在电脑测试并不能解决所有问题，就比如，你做的双指缩放和旋转的功能，你在电脑是测试不了的，只能在自己手机上测试。

PC到移动端的发展过程

这里最后补充一下布局的发展历程：

1、最早的是定宽布局方式：
即宽度写个固定的，然后居中margin:0 auto;，两边留白
2、局部定宽布局：
即设置了最小宽度和最大宽度、和百分比宽度
min-width、max-width、width
3、流体布局
浮动float+百分比%
4、响应式布局
即媒体查询，用过bootstrap的朋友应该也知道，bootstrap就是用的媒体查询。
5、自适应布局
flex布局+rem布局