react在移动端的自适应布局
react+flexible适配布局
(1)npm i lib-flexible --save
(2)npm i postcss-px2rem --save
(3)在 node_modules/react-scripts/config/webpack.config.js 下做如下配置


// 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在移动端的自适应布局的更多相关文章
- Html5移动端页面自适应布局详解(阿里rem布局)
在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport,通读网上的各种对于viewport的解释之后 大概viewport可以理解为三种 1.layout viewport ...
- Html5移动端页面自适应布局详解(rem布局)
在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport,通读网上的各种对于viewport的解释之后 大概viewport可以理解为三种 1.layout viewport ...
- 移动端rem自适应布局(切图)
本篇适用于初次使用rem为单位切图而无从下手的童鞋.核心是根据屏幕动态改变根元素字体大小,以达到适配各种屏幕.这只是一个拿来就用的教程.很多东西没有详细说明.不过对于快速做手机端切图很有帮助. 模板: ...
- vue在移动端的自适应布局
一. 安装插件(lib-flexible 和 postcss-loader.postcss-px2rem) npm i lib-flexible --save npm install postcss- ...
- 移动端rem自适应布局关键代码
function resi() { var html = document.querySelector("html"); var wW = document.body.client ...
- 自适应布局display:-webkit-box的用法
在web布局中,我们经常使用的是display:inline-block,display:flex,这些,但其实在进行移动端设备自适应布局中,-webkit-box布局更加合适 不同的浏览器有不同的前 ...
- 移动端利用rem实现自适应布局
好久没有写博客了,刚好说说最近遇到的移动端布局问题吧. 本来一直是觉得我的页面布局能力还是不错的,当然,是相对于较基础的来说还是不错的.不过,自己写的案例终归是跟实际开发有区别的,自己写案例的是觉得这 ...
- 【转载】rem自适应布局-移动端自适应必备
原文链接:rem自适应布局-移动端自适应必备 版权所有,转载时请注明出处,违者必究. 由于移动端特殊性,本文讲的是如何使用rem实现自适应,或叫rem响应式布局,通过使用一个脚本就可以rem自适应,不 ...
- 处理移动端自适应布局的方法- calc()与vw
在处理移动端自适应布局时,目前前端最流行的方法应该就是使用媒体查询,来设置HTML的字体大小,然后用rem为单位对Dom的宽高进行设置,这个方法的优势在于兼容性方面很好,劣势则在于当前市场上不同的机型 ...
随机推荐
- 探索TiDB Lightning的源码来解决发现的bug
背景 上一篇<记一次简单的Oracle离线数据迁移至TiDB过程>说到在使用Lightning导入csv文件到TiDB的时候发现了一个bug,是这样一个过程. Oracle源库中表名都是大 ...
- SQL从零到迅速精通【基本语句】
1.使用T-SQL语句创建数据表authors,输入语句如下. CREATE TABLE authors { auth_id int PRIMARY KEY,--数据表主键 auth_name VAR ...
- Cloud Computing Chapter3 (云计算第三章)
本篇文章是对课程大型软件系统设计与体系结构(双语)[又名:云计算]的课堂内容总结,适用于大连交通大学. Cloud Computing Chapter3 Understanding Cloud Com ...
- JS 实现排序算法
冒泡排序 比较相邻的元素.如果第一个比第二个大,就交换他们两个. 对每一对相邻元素做同样的工作,从开始第一对到结尾的最后一对.在这一点,最后的元素应该会是最大的数. 针对所有的元素重复以上的步骤,除了 ...
- LINUX安装 RPM与YUM
1 Linux软件安装概述 安装程序的方式: 通用二进制格式:直接解压压缩文件,就可以使用.但一定要注意安装平台. 软件包管理器:如RPM. 软件包管理器的前端工具:如YUM. 源代码编译. 1 1. ...
- 记一次mybatis-plus遇到的问题
在用了 springboot 和 mybatis-plus很久之后, 有一天突然看到配置文件有点繁杂, 想将相同的配置拉到application.yml里, 就在将配置拉过去后, 问题就开始出现了. ...
- 打靶笔记-02-vulhub-Hackademic.RTB1
打靶笔记-02-vulhub-Hackademic.RTB1 一.靶机信息 Name: Hackademic: RTB1(中等难度) Date release: 6 Sep 2011 Author: ...
- PicGo+Typora配置gitee图床
1 .下载Typora Typora官网地址:https://www.typora.io/#windows 本文使用的Typora版本为 0.11.2 根据自己的要求进行安装即可! 2.下载PicGo ...
- ES学习总结
1.创建索引 put localhost:9200/person 2.添加数据 put localhost:9200/person/_doc/1 { "first_name" : ...
- Ansible 使用配置
1.配置 /etc/ansible/hosts 文件,添加被管控主机ip #vim /etc/ansible/hosts 文件末尾添加组[group1]和被管控主机的IP [group1] 192 ...