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. 对象中的apply&call

    显式绑定法 apply/call(); 通过显式绑定法可以使用另一个对象中的方法 apply/call()都是JS预定义的方法, 他们都可以用于将一个对象作为参数调用对象方法 FOR example ...

  2. w10环境vs2017,vs2019配置Opengl快捷方法

    最近,计算机图形学老师向我们布置了任务,配置自己的opengl.百度之后我发现很多教程和方法尝试之后,我发现一种简单的方法来分享给大家. 首先我的软件配置是w10专业版系统+Visual Stdio ...

  3. spring事务详解(基于注解和声明的两种实现方式)

    Spring事务( Transaction ) 事务的概念 事务是一些sql语句的集合,作为一个整体执行,一起成功或者一起失败. 使用事务的时机 一个操作需要多天sql语句一起完成才能成功 程序中事务 ...

  4. CentOS 7 源码安装 Zabbix 6.0

    Zabbix 主要有以下几个组件组成: Zabbix Server:Zabbix 服务端,是 Zabbix 的核心组件.它负责接收监控数据并触发告警,还负责将监控数据持久化到数据库中. Zabbix ...

  5. mtu的原理和作用

    MTU: 最大传输单元,是指一种通信协议的某一层上面所能通过的最大数据包大小,最大传输单元这个参数通常与通信接口有关. 因为协议数据单元的包头和包尾的长度是固定的,MTU越大,则一个协议数据单元的承载 ...

  6. phpstudy、Apache安装DVWA教程

    1.下载DVWA(http://www.dvwa.co.uk/) 2.解压缩DVWA安装包到服务器的目录下 Apache: \Apache24\htdocs phpStudy: \PHPTutoria ...

  7. AFO以后的机房游记

    2019.8.6~8.8 周老师让我讲插头DP,理所当然地到机房备课(tuifei) dl24来了足足19个人.只可惜lsy没来,我们的phy,ljx去了首师附.看不到神仙打架了[哭] 插头DP这玩意 ...

  8. JavaScript day03 循环

    循环 while循环 循环是重复性做一件事情 没有办法控制每次循环的时间长度 循环会增大程序时间复杂度(不建议无限循环嵌套 一般情况下不会嵌套超过两次) 死循环 是不会停止的循环 会导致电脑内存溢出 ...

  9. 从零开始,开发一个 Web Office 套件(14):复制、粘贴、剪切、全选

    这是一个系列博客,最终目的是要做一个基于 HTML Canvas 的.类似于微软 Office 的 Web Office 套件(包括:文档.表格.幻灯片--等等). 博客园:<从零开始, 开发一 ...

  10. java == 和 equals