淘宝flexible.js+rem适配pc端

1、引入flexible.js文件：

(function flexible(window, document) {var docEl = document.documentElement;var 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 / 24;  // 这里默认是10等份，手动改为24，此时1rem=1920/24px即80px。（设计稿是1920px的）docEl.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、cssrem的Root Font Size改为80，修改完重启vscode

转自淘宝flexible.js+rem适配pc端 - 吴小明- - 博客园

淘宝flexible.js+rem适配pc端相关推荐

flexible.js+rem解决pc端适配
第一步:新建 flexible.js文件这里默认是10等份,手动改为24,此时1rem=1920/24px即80px.(设计稿是1920px的) (function flexible(window, ...
移动端适配+flexible.js+rem适配
移动端适配前沿: 移动端web页面的开发,由于手机屏幕尺寸.分辨率不同,或者需要考虑横竖屏问题,为了使得web页面在不同移动设备上具有相适应的展示效果,需要在开发过程中使用合理的适配方案来解决这个问 ...
移动端（五）flexible.js + rem适配布局
rem适配方案flexible.js github地址:https://github.com/amfe/lib-flexible flexible.js 是手机淘宝团队出的移动端布局适配库不需要在写 ...
淘宝flexible.js文件实现弹性布局
淘宝flexible.js到底是用来做啥的优点 1. 提供了用一套 css 去适应多种屏幕的方法 * 2.不用考虑适应屏幕的高宽比.物理尺寸等,切图成本比较低缺点只用这个方案去做,得到的是一个静 ...
手机淘宝——flexible.js 移动端自适应方案
一,flexible.js 的使用方式: github地址:https://github.com/amfe/lib-flexible 官方文档地址:https://github.com/amfe/ar ...
淘宝评论接口可以获取PC端，app端
获取淘宝商品的评论,筛选可以和淘宝保持一致, 支持并发 {"code":0,"data":{"allowInteract":"fa ...
淘宝flexible.js的使用
首先大家最关注的怎么使用,原理不原理是后面的事比如设计稿量来的宽度是100px 那么我们布局的时候,就这么写{width:1.3333rem},1.3333rem是由100/75算出来的,以此类推2 ...
rem适配pc的弊端
对于适配,我们一般是有很多中方法,例如百分比,rem适配,响应式布局(栅格),vh/vw等等我们一般不使用rem来适配,那我们来说一下rem适配pc端的弊端吧! 1兼容性的性的问题,对于不同的浏览器 ...
React.js 入门与实战之开发适配PC端及移动端新闻头条平台课程上线了
原文发表于我的技术博客我在慕课网的「React.js 入门与实战之开发适配PC端及移动端新闻头条平台」课程已经上线了,文章中是目前整个课程的大纲,以后此课程还会保持持续更新,此大纲文档也会保持更新, ...

淘宝flexible.js+rem适配pc端

淘宝flexible.js+rem适配pc端相关推荐

最新文章

热门文章