关于移动端适配的几个方法，快速构建响应式网站必备知识

随着移动端的发展，手机端的页面应用越来越广泛，所以我们现在更多的是做移动端的页面。

但是我们同样要维持pc端，因此难免会遇到许多麻烦。

而且现在做移动端适配的方法也有好多种，针对不同的网站我们需要合理的判断，选择全适的方法；

第一种方法：整个页面宽高用px写死，让宽度自适应

这是最蠢的一个办法，但是实际上我们用得也挺多，它适用于一些页面结构比较复杂的网站。

我们只需要在头部加入：

就ok了，但是它的缺陷太多，比如说有些字体会变得特别大。

对于那些页面重构太麻烦的项目，你可以选择用这种方式先顶一段时间，然后再来重做吧。

第二种方法：用js动态获取移动端页面宽度，动态自适应

这种方法的好处就是能基本保证页面在各种型号的设备上面不变形

方法就是在头部添加：

我们通过设备的分辨率来让页面自适应，会更精确

第三种方法：rem布局，把所有单位用rem代替

这样的页面在移动端运行完全没有问题，我们首先通过获取移动设备的宽度来动态计算html的font-size的值。

通常我们将font-size的默认值设为100px,这样更利于换算，我们就可以把所有的px单位直接除以100.。来算出我们需要设置的值。

同样我们需要在头部写一段js来进行计算：

三目运算大家可能用得不是很多

return p>1?1:p<0.5?0.5:p;

这句话的意思是把p的值控制在0.5到1之间，当然我们也可以让它大于1，这样就可以在pc端满屏显示了。

但是整个界面会被拉长，会变得很丑，所以我们选择不这样做。

用rem布局自适应是一件很爽的事情，可是它的缺点就是在pc端，某些低端浏览器会不支持，但在手机上跑是完全没压力的。

第四种方法：flexbox布局，用弹性盒子的方式，达到响应式效果

这个也是比较常用的，属于css3的内容，当然也存在着pc端某些浏览器不支持的问题。

这个对于结构简单点的页面来说，比rem会显得更加好用，大家可以去网上学习一样相关的知识，

现在的主流混合开发框架都支持使用flexbox布局。特别是react-native.。

第五种方法：传统做法，页面跳转

想通过一种方法完全完美地适应各个平台，要遇到的坑还是挺多的，所以现在依然会有一些人采用两套代码的形式进行移动端适配

要想在pc端的项目可以直接达到适配IE6.。移动端页面又可以完美展现，你必须要维护两套代码。

我们可以在pc端主页面的头部加入这样一段js代码：

页面中我们可以看到，如果是移动端，我们可以实现自动跳转页面，而且在头部运行的js并不会在加载完页面之后执行，

整个过程用户完全感觉不到，可以达到很好的用户体验 。

以上就是我个人总结的移动端适配，纯属个人经验，其中有误，还望指出。