自适应布局之淘宝无限适配+rem+微信rpx自适应

一、自适应布局

所谓前端适配，就是为了让移动设计稿在大部分的移动设备上看起来有一致的展示效果，目前比较流行的方法有两种。一种是强制meta viewport宽度为设计稿宽度，一种是使用rem自适应布局的flexible.js。

二、当前流行的移动端自适应方案：rem + 淘宝无限适配

2.1、rem布局

rem是css中的单位，而且是相对单位，rem单位是基于html中根元素的字体大小。（因此我们只需要动态改变根元素的字体大小从而达到自适应的目的）

2.2、淘宝无线适配

根据屏幕宽度划分成十等分，其中一份的宽度就是根元素字体的大小

//meta视口标签
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

2.3、flexible.js源码

  var docEl = document.documentElementvar dpr = window.devicePixelRatio || 1// adjust body font sizefunction setBodyFontSize () {if (document.body) {document.body.style.fontSize = (12 * dpr) + 'px'}else {document.addEventListener('DOMContentLoaded', setBodyFontSize)}}setBodyFontSize();// set 1rem = viewWidth / 10function setRemUnit () {var rem = docEl.clientWidth / 10docEl.style.fontSize = rem + 'px'}setRemUnit()// reset rem unit on page resizewindow.addEventListener('resize', setRemUnit)window.addEventListener('pageshow', function (e) {if (e.persisted) {setRemUnit()}})// detect 0.5px supportsif (dpr >= 2) {var fakeBody = document.createElement('body')var testElement = document.createElement('div')testElement.style.border = '.5px solid transparent'fakeBody.appendChild(testElement)docEl.appendChild(fakeBody)if (testElement.offsetHeight === 1) {docEl.classList.add('hairlines')}docEl.removeChild(fakeBody)}
}(window, document))

2.4、VSCode自动将px转化为rem

1.下载插件cssrem
2.vscode中打开文件 ==>首选项 ==>设置 ==>扩展 ==>cssrem.configuration ==>Root-font-size

三、小程序自适应之rpx自适应

rpx是微信小程序独有的css单位
以1rpx为基础单位
rpx （responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为 750rpx 。

如在iPhone6 上，屏幕宽度为 375px ，共有750个物理像素，则 750rpx = 375px = 750物理像素 ， 1rpx = 0.5px = 1物理像素 。

使用步骤：

1. 确定设计稿宽度 pageWidth
2. 计算比例 750rpx = pageWidth px ,因此 1px=750rpx/pageWidth 。
3. 在less文件中，只要把设计稿中的px=>750/pageWidth rpx 即可(将px单位替换即可，其余数字再乘即可)。

💕$原创不易，还希望各位大佬支持一下$

👍 $点赞，你的认可是我创作的动力！$

⭐ $收藏，你的青睐是我努力的方向！$

🥕 $评论，你的意见是我进步的财富！$