react PC端适配自适应

在index中添加如下内容

html,body{font-size: 100px;}

rem.js

// // // 实现 rem 等比适配
// const baseSize = 37.5 /* 基准适配 */// function setRem() {//   // 设置当前页面基于 375 进行缩放适配，需要根据设计稿改写除数
//   const scale = document.documentElement.clientWidth / 375
//   // 设置页面根节点字体大小，第二个乘积表示最大扩大两倍
//   document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
// }
// setRem()
window.onload = function () {/*720代表设计师给的设计稿的宽度，你的设计稿是多少，就写多少;100代表换算比例，这里写100是为了以后好算,比如，你测量的一个宽度是100px,就可以写为1rem,以及1px=0.01rem等等*/getRem(1920, 100)
};
window.onresize = function () {getRem(1920, 100)
};function getRem(pwidth, prem) {var html = document.getElementsByTagName("html")[0];var oWidth = document.body.clientWidth || document.documentElement.clientWidth;html.style.fontSize = oWidth / pwidth * prem + "px";
}
// // rem自适应设置
// var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
// var reCalc = function() {//     //设置根字体大小npm
//     var docEl = document.documentElement;
//     docEl.style.fontSize = 20 * (docEl.clientWidth / 375) + 'px';// }
// document.addEventListener("DOMContentLoaded", function() {//     reCalc();
// }, false)// window.addEventListener(resizeEvt, reCalc, false);

在 index.js文件中引入该rem

然后适配就做好了

这里用的是rem适配不过没有将px直接转换成rem
需要用户手动修改一下

推荐使用这个插件

这里需要改成一百或者改成你需要的数字这里的一百表示 1rem = 100px

鼠标选中要修改的px 然后使用快捷键 alt+z 就可以直接将其改为rem了

react PC端适配自适应相关推荐

vue适配PC端屏幕自适应
vue适配PC端屏幕自适应 1.下载postcss-px2rem和px2rem-loader npm i postcss-px2rem px2rem-loader 2.src目录下新建utils文件夹 ...
React移动端适配解决方案lib-flexible和postcss-px2rem、node.getIterator is not a function 报错使用postcss-pxtorem
文章目录 React移动端适配解决方案lib-flexible和postcss-px2rem 第一步第二步第三步第四步第五步问题分割线==================== 一.淘宝弹性布 ...
flexible.js+rem解决pc端适配
第一步:新建 flexible.js文件这里默认是10等份,手动改为24,此时1rem=1920/24px即80px.(设计稿是1920px的) (function flexible(window, ...
vue项目实现大屏PC端字体自适应
vue项目实现大屏PC端字体自适应我们字体自适应选择使用rem作为单位,通过监听窗口大小的变化,更新1rem的对应的px数来实现字体自适应. 注意该方法,我们需要在APP.vue文件中实现, 首先A ...
Vue 移动端、PC 端适配
Vue 移动端.PC 端适配可以使用 lib-flexible.amfe-flexible.postcss-pxtorem.postcss-px2rem 和 postcss-px-to-viewpor ...
Vue pc端适配不同分辨率屏幕
前言 pc端一般是不需要适配的,因为现在的显示器分辨率一般都是1920*1080(设计图也是),一般不用管. 但是有一种情况你的设计图是1920*1080,开发完了.发现别人设备因为某些原因不是这个分 ...
Vue项目pc端适配方案（scss）
前言:vue项目适配可借助于插件lib-flexible 和postcss-px2rem. lib-flexible插件的作用:根据屏幕尺寸不同设置html根标签的字体大小,1rem即等于根标签的字体 ...
PC端页面自适应不同分辨率的方法
以1920* 1080的设计稿为例,实现PC端不同分辨率适配 <script TYPE="text/javascript"> var docEl = document. ...
VUE pc端适配移动端H5
需要安装两个插件 postcss-pxtorem 和 lib-flexible 直接安装postcss-pxtorem插件,报错" Error: PostCSS plugin postcss ...
react移动端适配
create-react-app 1.下载插件 npm install postcss-px-to-viewport --save-dev 2.将config文件夹暴露显示在目录中 npm run e ...

react PC端适配自适应

在index中添加如下内容

react PC端适配自适应相关推荐

最新文章

热门文章

react PC端 适配 自适应

在index中添加如下内容

react PC端 适配 自适应相关推荐

最新文章

热门文章

react PC端适配自适应

react PC端适配自适应相关推荐