微信知彼网络网站建设,网站通cms,网站开发的感想,WordPress关联搜索插件一、自适应布局
所谓前端适配#xff0c;就是为了让移动设计稿在大部分的移动设备上看起来有一致的展示效果#xff0c;目前比较流行的方法有两种。一种是强制meta viewport宽度为设计稿宽度#xff0c;一种是使用rem自适应布局的flexible.js。
二、当前流行的移动端自适应…一、自适应布局
所谓前端适配就是为了让移动设计稿在大部分的移动设备上看起来有一致的展示效果目前比较流行的方法有两种。一种是强制meta viewport宽度为设计稿宽度一种是使用rem自适应布局的flexible.js。
二、当前流行的移动端自适应方案rem 淘宝无限适配
2.1、rem布局
rem是css中的单位而且是相对单位rem单位是基于html中根元素的字体大小。因此我们只需要动态改变根元素的字体大小从而达到自适应的目的
2.2、淘宝无线适配
根据屏幕宽度划分成十等分其中一份的宽度就是根元素字体的大小
//meta视口标签
meta nameviewport contentwidthdevice-width, initial-scale1, maximum-scale1, minimum-scale1, user-scalableno2.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 transparentfakeBody.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物理像素 。
使用步骤
确定设计稿宽度 pageWidth计算比例 750rpx pageWidth px ,因此 1px750rpx/pageWidth 。在less文件中只要把设计稿中的px750/pageWidth rpx 即可(将px单位替换即可其余数字再乘即可)。 原创不易还希望各位大佬支持一下\textcolor{blue}{原创不易还希望各位大佬支持一下}原创不易还希望各位大佬支持一下 点赞你的认可是我创作的动力\textcolor{orange}{点赞你的认可是我创作的动力}点赞你的认可是我创作的动力 ⭐ 收藏你的青睐是我努力的方向\textcolor{red}{收藏你的青睐是我努力的方向}收藏你的青睐是我努力的方向 评论你的意见是我进步的财富\textcolor{green}{评论你的意见是我进步的财富}评论你的意见是我进步的财富
