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. SpringCloudStream(RabbitMQ&Kafka)&Spring-Kafka配置使用

    目录 是什么 解决问题 使用方式 创建生产者项目 pom yml 生产消息方法 接口 实现 创建消费者项目 pom yml 接收消息方法 重复消费 消费者yml 持久化 消费者负载个性配置(预拉取) ...

  2. Laravel-Auth认证

    1.建立数据表 admins 2.找到config下的auth.php 文件,加入如下代码 <?php return [ /* |-------------------------------- ...

  3. 防止SQL 注入;如何进行防SQL 注入。

    防止SQL 注入:1.开启配置文件中的magic_quotes_gpc 和magic_quotes_runtime 设置2.执行sql 语句时使用addslashes 进行sql 语句转换3.Sql ...

  4. php 23种设计模型 - 单例模式

    单例模式(Singleton) 单例模式(Singleton Pattern)是 Java 中最简单的设计模式之一.这种类型的设计模式属于创建型模式,它提供了一种创建对象的最佳方式. 这种模式涉及到一 ...

  5. 实践2:如何使用word2vec和k-means聚类寻找相似的城市

    理解业务 一个需求:把相似的目的地整理出来,然后可以通过这些相似目的地做相关推荐,或者是相关目的地的推荐 准备数据 Word2Vec算法:可以学习输入的文本,并输出一个词向量模型 对数据进行清洗,去出 ...

  6. ArcGIS进行视域分析及地形图制作

     问题说明 开发商要在本区域建造观景亭,希望在观景亭上能看到优美的景色.根据提供的数据,完成以下要求. 一. 数据说明(见"题目3"文件夹) 1. DEM.tif:研究区域的数据高 ...

  7. Azure Container App(一)应用介绍

    一,引言 容器技术正日益成为打包.部署应用程序的第一选择.Azure 提供了许多使用容器的选项.例如,我们可以使用 Azure 容器注册表来存储和管理 Docker Images.Azure Cont ...

  8. 张高兴的 Entity Framework Core 即学即用:(一)创建第一个 EF Core 应用

    写在前面 Entity Framework Core (EF Core) 是 .NET 平台流行的对象关系映射(ORM)框架.虽然 .NET 平台中 ORM 框架有很多,比如 Dapper.NHibe ...

  9. 【公告】淘宝 npm 域名即将切换 && npmmirror 重构升级

    镜像下载.域名解析.时间同步请点击阿里云开源镜像站 前言 本文将包括两部分内容: 淘宝 npm 域名即将停止解析 npmmirror 镜像站大重构升级 原淘宝 npm 域名即将停止解析 正如在< ...

  10. Linux中ftp服务器的安装与部署

    一.ftp简介FTP(File Transfer Protocol,文件传输协议) 是 TCP/IP 协议组中的协议之一.FTP协议包括两个组成部分,其一为FTP服务器,其二为FTP客户端.其中FTP ...