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的宽高进行设置,这个方法的优势在于兼容性方面很好,劣势则在于当前市场上不同的机型 ...
随机推荐
- Docker - 安装&测试
一.什么是Docker Docker 是一个开源的应用容器引擎,基于 Go 语言 并遵从 Apache2.0 协议开源. Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级.可移植的容器中 ...
- 关于php接受xml的一些问题,simplexml_load_string收不到数据
接受xml数据一般使用这两种方法 方法1: file_get_contents('php://input'); 方法2: simplexml_load_string($GLOBALS['HTTP_RA ...
- vue中使用keepAlice的各种问题
项目需求:从项目列表页index,进入到列表的详情页detail,再从detail返回到index,需要缓存index的数据 在App.vue中的配置 <template> <div ...
- Qt记事本,美化版
主体代码实现 #include "mainwindow.h" #include "ui_mainwindow.h" #include<QMenu> ...
- Docker——常用命令
常用命令 docker version # 显示docker的版本信息 docker info # 显示docker的系统信息,包括镜像和容器的数量 docker 命令 --help # 帮助命令,中 ...
- Serialzers 序列化组件
Serialzers 序列化组件 前言 当做前后端分离的项目时,JSON是一个轻量级的数据交互格式.所有我们给前端数据的时候都要转成json格式,那就需要对我们从数据库拿到数据进行序列化 Django ...
- 和风天气WebApi使用教程
1.首先进入和风天气开发平台,点击右上角的注册进行注册 和风天气开发平台 2.填写注册用的邮箱和密码完成注册,可能还需要手机号,按提示注册完成即可. 3.从和风天气开发平台右上角进入控制台,输入你刚刚 ...
- .net core 配置Swagger 摆脱PostMan,你值得拥有这样的api调试方式
废话不多说直接来看 第一步: 安装nuget包:Swashbuckle.AspNetCore.Swagger Swashbuckle.AspNetCore.SwaggerGen Swashbuckle ...
- 数据库上云实践:使用Ora2pg进行数据库迁移
目录 概述 重要 前置条件 配置环境 Win环境配置 linux环境配置 定义ORACLE_HOME环境变量 Ora2Pg使用方法 配置文件ora2pg_table.conf 配置文件解释:Oracl ...
- [vmware to openstack] 安装virtio驱动
描述 从vmware的虚拟机迁移到opensatck,由于vmware虚拟机磁盘类型采用的是scsi,要迁移到opensatck平台运行,发现虚拟机无法起来,原因是vmware虚拟机没有安装vir ...