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的宽高进行设置,这个方法的优势在于兼容性方面很好,劣势则在于当前市场上不同的机型 ...
随机推荐
- (六)React Ant Design Pro + .Net5 WebApi:后端环境搭建-EF Core
一. 简介 EFCore 是轻量化.可扩展.开源和跨平台版的常用数据访问技术,走你(官方文档) 二. 使用 1.安装数据库驱动包.PMC 工具包 不同的数据库有不同的包,参考,我用 PostgreSQ ...
- 小程序授权登录并 laravel7(laravel8) token 应用
参考博客: https://blog.csdn.net/qq_42839386/article/details/118279530 1:composer 下载 composer require fir ...
- think php 富框架文本编辑器
商品的详细描述一般都是图文混合.对于图文混合的内容,需要使用富文本编辑器来实现. Ueditor富文本编辑器的下载地址: http://ueditor.baidu.com/website/downlo ...
- Nebula Graph 在企查查的应用
本文首发于 Nebula Graph Community 公众号 背景 企查查是企查查科技有限公司旗下的一款企业信用查询工具,旨在为用户提供快速查询企业工商信息.法院判决信息.关联企业信息.法律诉讼. ...
- Oneops运维系统
背景:公司对接其他系统时都会将业务分为几大模块由不同的人员去开发部署.那么部署方式为传统方式登录服务器,然后操作.所以每次上线我们可能都需要等待别的同事操作完才能操作自己所负责的业务系统.针对以上 ...
- 关于python很好的网站和书籍
https://python-patterns.guide/ https://docs.python-guide.org/ https://www.amazon.com/_/dp/1491946008 ...
- mtu的原理和作用
MTU: 最大传输单元,是指一种通信协议的某一层上面所能通过的最大数据包大小,最大传输单元这个参数通常与通信接口有关. 因为协议数据单元的包头和包尾的长度是固定的,MTU越大,则一个协议数据单元的承载 ...
- [happyctf]部分writeup
题目名称:sqltest所属:MISC考察点:盲注 眼力 耐心(好吧是废话) 附件下载下来 ,到手一个流量包,用wireshark打开,大致浏览了一下,抓的应该是盲注的数据流量. 这里有一个经验问题, ...
- 数据类型 Java day7
数据类型 数据类型包含:引用数据类型和基本数据类型 引用数据类型:出去基本数据类型,其他的类型,如String 基本数据类型:总共分四大类有八种 四大类:整数,浮点数.字符.布尔 一.整数包含以下 数 ...
- java反射笔记(学习尚硅谷java基础教程)
反射一.概述:Reflection Reflection(反射)是被视为动态语言的关键,反射机制允许程序在执行期借助于Reflection API取得任何类的内部信息,并能直接操作任意对象的内部属性 ...