求知若饥，虚心若愚。
最近一直在负责公司微信端的重构，在此期间遇到了颇多问题，遇到问题不要怕，总会有解决的办法。
看了网上很多资料，但和我想表达的东西有些不同，说下我自己的理解。
PC端的前端，负责的是用PC浏览器打开的网页。
PC浏览器因为软件的不同也会有些差异，常见的有Safari、Chrome、Firefox、IE（IE6-IE8、IE9以上）。
移动端的前端，负责的是用手机打开的网页。相信大家应该注意到了，写的是用手机打开的网页，而非手机浏览器打开的网页。为什么这样讲呢？因为手机App里面也有前端做的页面，如微信。
移动端和PC端的区别有很多，但我认为它们之间最大的区别就是设备。
从不同的设备出发，可以分析出很多问题：
PC的GPU与手机的GPU的处理能力差异较大，看下面的截图：
拥有相同架构的GPU处理器，在移动端的GPU与PC的GPU相比，手机处理能力只有电脑处理能力的十分之一。
GPU的处理能力关前端什么事情？这关系大大的有，因为浏览器的主要结构里面有个“渲染引擎”，该结构需要硬件GPU的大力支持，请看下面的截图：
该截图出自我之前写过的文章**《浏览器内部工作原理》**，有兴趣的朋友可以看看。
再来看一个东西，2016年6月起最近六个月在国内浏览器市场份额与移动设备市场份额的情况：
不同的手机，不同的品牌手机的尺寸都会有些许不同，前端使用HTML、CSS、JS需要对其进行适配和布局。一套代码，适应多个终端，因此会涉及到布局和排版等问题。还有就是UI给的设计图只是针对具体的一个手机定做的，因此在不同大小的手机上访问同一个页面效果肯定会有不同，这就需要UI和前端一起来协商解决。
手机大小的不同导致的问题一般是CSS样式，如位置、宽度、高度、字体样式、大小等。
最近做的页面效果，相同的页面，一个在IPhoneSE的效果，另一个在魅蓝note2的效果。
现在主流的手机系统不外乎就是IOS和Android，手机系统导致的问题是API支不支持的问题,比如webgl相关API在IOS上支持，在Android上不支持，又比如webp相关API在Android上支持，在IOS上不支持。
即使在相同的系统里面，尤其是Android上，也会出现样式的紊乱，导致的问题是API支不支持的问题，比如display:flex属性在Android4.3以下版本部分支持。
不同浏览器都有自己不同是默认样式，比如在Safari中默认有一些自带样式，即使你对该样式赋值了其他样式，它也没有改变，如下图：
注意看右下角的确认按钮，我用CSS进行了样式修改，但还是无效，还是会把原来Safari默认的按钮样式带了进来，这时需要用到一个CSS属性：-webkit-appearance来解决该问题。这只是举例，还有其他的东西都会在后面讲到。
第一章节讲解了PC和移动端的区别及移动端的各种问题，遇到这些问题，肯定会有解决的方法的，下面听我一一到来。
1 | /*1.去除系统默认appearance的样式，常用于IOS下移除原生样式*/ |