移动端适配方案

我总结的pc=>移动端适配方案有两种，下面主要介绍一下自适应的方案

1.响应式方案：跨设备、且内容简单例如静态页面可使用此方案

2.自适应方案：一般用于不需要跨设备且内容多而复杂

  下面来详述一下移动端做自适应的方案：

主要使用淘宝无线适配布局详解，再html中插入 以下 meta

 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">

 再去搜索应用一个flexible.js（去百度搜索都有）或者去GitHub上下载https://github.com/amfe/lib-flexible

这样整个网页在设备内显示时的页面宽度就会等于设备逻辑像素大小，也就是device-width。

这么做就保证了页面的大小与设计稿保持一致了，比如设计稿如果是750的横向分辨率，那么实际页面的device-width，以iphone6来说，也等于750，这样的话设计稿上标注的尺寸只要除以某一个值就能够转换为rem了

淘宝布局的第二个要点，就是html元素的font-size的计算公式，font-size = deviceWidth / 10，

淘宝的这个方案也设置了一个临界点，当设备竖着时横向物理分辨率大于1080时，html的font-size就不会变化了，因为此时的分辨率已经可以直接去访问电脑版页面了无需在手机端操作观看了，

其中淘宝网页还做了同一个链接判断终端设备进行页面跳转，这样就能统一网址啦！代码我贴在下面了

if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
    window.location.href = "";     //跳转到手机端的页面
 } else {
    window.location.href = "";     //跳转到pc端的页面
 }

还有不会的可以私信我哦！

大家一起交流学习