react+flexible适配布局

(1)npm i lib-flexible --save
(2)npm i postcss-px2rem --save
(3)在 node_modules/react-scripts/config/webpack.config.js 下做如下配置

const px2rem = require('postcss-px2rem');

 px2rem({ remUnit: 75 })

// px2rem({ remUnit: 75 }) 的意思就是1rem = 75px 这个是根据750px设计稿来的,如果是620 的就写 62

(4)引入 lib-flexible,在项目入口文件 index.js 里 引入 lib-flexible

(5)注释这段代码

效果:

参考链接:https://blog.csdn.net/weixin_43136379/article/details/90700295

react在移动端的自适应布局的更多相关文章

  1. Html5移动端页面自适应布局详解(阿里rem布局)

    在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport,通读网上的各种对于viewport的解释之后 大概viewport可以理解为三种 1.layout viewport  ...

  2. Html5移动端页面自适应布局详解(rem布局)

    在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport,通读网上的各种对于viewport的解释之后 大概viewport可以理解为三种 1.layout viewport  ...

  3. 移动端rem自适应布局(切图)

    本篇适用于初次使用rem为单位切图而无从下手的童鞋.核心是根据屏幕动态改变根元素字体大小,以达到适配各种屏幕.这只是一个拿来就用的教程.很多东西没有详细说明.不过对于快速做手机端切图很有帮助. 模板: ...

  4. vue在移动端的自适应布局

    一. 安装插件(lib-flexible 和 postcss-loader.postcss-px2rem) npm i lib-flexible --save npm install postcss- ...

  5. 移动端rem自适应布局关键代码

    function resi() { var html = document.querySelector("html"); var wW = document.body.client ...

  6. 自适应布局display:-webkit-box的用法

    在web布局中,我们经常使用的是display:inline-block,display:flex,这些,但其实在进行移动端设备自适应布局中,-webkit-box布局更加合适 不同的浏览器有不同的前 ...

  7. 移动端利用rem实现自适应布局

    好久没有写博客了,刚好说说最近遇到的移动端布局问题吧. 本来一直是觉得我的页面布局能力还是不错的,当然,是相对于较基础的来说还是不错的.不过,自己写的案例终归是跟实际开发有区别的,自己写案例的是觉得这 ...

  8. 【转载】rem自适应布局-移动端自适应必备

    原文链接:rem自适应布局-移动端自适应必备 版权所有,转载时请注明出处,违者必究. 由于移动端特殊性,本文讲的是如何使用rem实现自适应,或叫rem响应式布局,通过使用一个脚本就可以rem自适应,不 ...

  9. 处理移动端自适应布局的方法- calc()与vw

    在处理移动端自适应布局时,目前前端最流行的方法应该就是使用媒体查询,来设置HTML的字体大小,然后用rem为单位对Dom的宽高进行设置,这个方法的优势在于兼容性方面很好,劣势则在于当前市场上不同的机型 ...

随机推荐

  1. MATLAB神经网络应用设计【2】

    一.深度学习中经常看到epoch. iteration和batchsize,下面按自己的理解说说这三个的区别: (1)batchsize:批大小.在深度学习中,一般采用SGD训练,即每次训练在训练集中 ...

  2. 关于mysql8.0 caching_sha2_password和sha256_password认证方式

    今天开发上线新系统反馈数据库连接有问题.自己分别在命令行下及navicat进行连接发现,发现root用户密码在命令行下可以正常连接,但是新建立的子用户连接不上.于是就换成管理员密码.立即就连接上了.看 ...

  3. ArcGIS进行容积率计算

    空间分析--题目2 容积率(Plot Ratio/Floor Area Ratio/Volume Fraction)又称建筑面积毛密度,是指一个小区的地上总建筑面积与用地面积的比率.对于开发商来说,容 ...

  4. .NET 6学习笔记(2)——通过Worker Service创建Windows Service

    通过Visual Studio中的Windows Service模板,我么可以创建.NET Framework版本的Windows Service,网络上对此已有详细且丰富的各路教程.但在我们升级到. ...

  5. python学习之scipy实战1(积分用法)

    import numpy as np def main(): #1-- Integral积分 from scipy.integrate import quad, dblquad, nquad prin ...

  6. Android 12(S) 图形显示系统 - BufferQueue的工作流程(十一)

    题外话 我竟然已经写了这个系列的十一篇文章了,虽然内容很浅显,虽然内容很枯燥,虽然内容也许没营养,但我为自己的坚持点赞! 一.前言 前面的两篇文章,分别讲解了Producer的处理逻辑和queue b ...

  7. Golang 常见设计模式之装饰模式

    想必只要是熟悉 Python 的同学对装饰模式一定不会陌生,这类 Python 从语法上原生支持的装饰器,大大提高了装饰模式在 Python 中的应用.尽管 Go 语言中装饰模式没有 Python 中 ...

  8. Nginx--sub_filter模块

    客户端浏览器访问替换html中的字符: location / { root /web/htdocs; random_index on; index index.html index.htm; subs ...

  9. pip安装使用国内源的两种方法

    pip安装后使用pip安装第三方库默认是国外源,一般安装慢连接不稳定,等得花儿都谢了,结果还告诉你安装失败..../(ㄒoㄒ)/~~ 这时我们就要想想其它办法啦,毕竟不能强求 国外不行,就只有国内了赛 ...

  10. SolidWorks在一个零件中设置不同的尺寸版本

    问题 比如想设置一系列螺丝的长度,一个一个建零件非常麻烦,希望在一个零件中设置不同的长度尺寸版本 解决 比如想设置不同的拉伸长度,右键拉伸>配置特征 可以生成新配置,设置不同的D1参数,即可生成 ...