程序员经验分享-hwhale

react在移动端的自适应布局

2023-11-16

1、移动端基本可以无阻碍的进行flex的弹性布局，这边对flex就不进行深究

2、可以进行依据窗口进行vw、vh、vmin、vmax单位的布局

（1）vw、vh、vmin、vmax 是一种视窗单位，也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗（Viewport）大小来决定的，单位 1，代表类似于 1%。
具体描述如下：
vw：视窗宽度的百分比（1vw 代表视窗的宽度为 1%）
vh：视窗高度的百分比
vmin：当前 vw 和 vh 中较小的一个值
vmax：当前 vw 和 vh 中较大的一个值

（2）vw、vh 与 % 百分比的区别
% 是相对于父元素的大小设定的比率，vw、vh 是视窗大小决定的。vw、vh 优势在于能够直接获取高度，而用 % 在没有设置 body 高度的情况下，是无法正确获得可视区域的高度的，所以这是挺不错的优势。

（3）vmin、vmax 用处
做移动页面开发时，如果使用 vw、wh 设置字体大小（比如 5vw），在竖屏和横屏状态下显示的字体大小是不一样的。
由于 vmin 和 vmax 是当前较小的 vw 和 vh 和当前较大的 vw 和 vh。这里就可以用到 vmin 和 vmax。使得文字大小在横竖屏下保持一致。

（4）浏览器兼容性
桌面 PC
Chrome：自 26 版起就完美支持（2013年2月）
Firefox：自 19 版起就完美支持（2013年1月）
Safari：自 6.1 版起就完美支持（2013年10月）
Opera：自 15 版起就完美支持（2013年7月）
IE：自 IE10 起（包括 Edge）到现在还只是部分支持（不支持 vmax，同时 vm 代替 vmin）
移动设备
Android：自 4.4 版起就完美支持（2013年12月）
iOS：自 iOS8 版起就完美支持（2014年9月）

4、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
// px2rem({ remUnit: 75 }) 的意思就是1rem = 75px 这个是根据750px设计稿来的，如果是620 的就写 62

（4）引入 lib-flexible，在项目入口文件 index.js 里 引入 lib-flexible
在这里插入图片描述
（5）注释这段代码
在这里插入图片描述
注：如果上述实现起来有问题，希望读者能指出，顺手给个赞吧

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

React

react在移动端的自适应布局 的相关文章

  • React中的“计算属性”

    React中的 计算属性 相信许多学习过vue的小伙伴对计算属性都不陌生吧 计算属性能帮我们数据进行一些计算操作 计算属性是依赖于data里面的数据的 在vue中只要计算属性依赖的data值发生改变 则计算属性就会调用 那React中也有计

  • React重点知识拓展，含Hooks、路由懒加载等

    第7章 React扩展 一 setState 1 setState更新状态的2种写法 setState stateChange callback 对象式的setState stateChange为状态改变的对象 该对象可以体现出状态的更改

  • React仿写网易云音乐项目

    文章目录 一 项目功能说明 二 最终效果 三 文件目录结构说明 四 项目技术栈 五 核心技术 1 配置项目别名 craco craco 2 使用reset css进行 css 重置 3 使用CSS Sprites 精灵图 4 使用 memo

  • react项目中使用react-dnd实现列表的拖拽排序

    现在有一个新需求就是需要对一个列表 实现拖拽排序的功能 要实现的效果如下图 可以通过 react dnd 或者 react beautiful dnd 两种方式实现 今天先讲下使用react dnd是如何实现的 github地址 https

  • React 组件通讯

    目录 1 组件通讯 概念 1 组件的特点 2 知道组件通讯意义 总结 2 组件通讯 props 基本使用 1 传递数据和接收数据的过程 2 函数组件使用 props 3 类组件使用 props 总结 3 组件通讯 props 注意事项 1

  • state和props的区别__react

    首先说明 state和props是每个组件都有的 其次 state可变 但props不可变 这是官网给出的说法 但实操过程中 state的确可变 但props也可以变 是不是fb搞错了 当然不是 这里的可变与不可变 说的是改变后 是否会重新

  • React学习之扩展浅比较（三十四）

    注意 这玩意也已经被React PureComponent的功能取代了 这里依旧是提一下 主要是React v15的版本中的react with addons js 这些玩意还存在 哎 害人呐 引入 import shallowCompar

  • react 使用 scss

    react 使用 scss 日常记录开发中遇到的坑 1 使用 npm install sass loader node sass S 进行安装 2 在页面中直接使用 有时候可以 有时候不行 原因 我个人觉得安装的两个插件本版兼容问题 nod

  • chrome浏览器安装redux-devtools调试工具

    chrome浏览器安装redux devtools调试工具 1 点击进入https www chromefor com 2 在搜索框搜索redux 3 找到最新版本 Redux DevTools v2 17 0 进行下载 4 选择下载线路

  • React页面设计初体验

    1 定制路由 export default login path login name login component layouts BlankLayout routes path login component Login Index

  • 组件间样式覆盖问题--CSS Modules

    1 组件间样式覆盖问题 问题 CityList 组件的样式 会影响 Map 组件的样式 原因 在配置路由时 CityList 和 Map 组件都被导入到项目中 那么组件的样式也就被导入到项目中了 如果组件之间样式名称相同 那么一个组件中的样

  • react组件状态同步-状态提升

    假设定义组件TemperatureInputSon import React from react class TemperatureInputSon extends React Component constructor props su

  • hook中使用ref使用

    对于antd的fom表单 hook使用ref import React useState useEffect useRef from react const dateRef useRef dateRef current setFieldsV

  • Umi+Dva初印象＜基础应用，结构，流转逻辑＞

    目录 前言 知识储备 generator函数 Dva初识 实际交互 函数式组件 class组件 前言 项目初始为umi脚手架进行初始化 lt 初始化过程 http t csdn cn cuTaY gt 工程中加载了umi自带的antd ui

  • React解密：React Hooks函数之useCallback和useMemo

    之所以将useCallback和useMemo放到一起 从某种意义上说 他们都是性能优化的始作俑者 他们也有很多的共性 我们先来回顾一下class组件性能优化的点 调用 setState 就会触发组件的重新渲染 无论前后 state 是否相

  • React核心概念：状态提升

    上一节 表单 下一节 组合vs继承 React核心概念 状态提升 引言 添加第二个输入框 编写转换函数 状态提升 经验总结 引言 很多情况下我们使用的多个组件需要对同一个数据做出对应的反应 在这里我们推荐把这个共享的状态提升到距离这些组件最

  • React 定时刷新接口

    通过 useEffect 在页面加载时调用 getNodeDetailList 列表接口 useEffect gt getNodeDetailList change 然后通过 setInterval 来进行定时刷新 useEffect gt

  • 值得收藏的UmiJS 教程

    点击上方关注 前端技术江湖 一起学习 天天进步 前言 网上的umi教程是真的少 很多人都只写了一点点 很多水文 所以打算自己写一篇 自己搭建umi 并封装了一下常用的功能 并用到公司实际项目中 umi介绍 Umi 是什么 Umi 中文可发音

  • 如何提高React组件的渲染效率的？在React中如何避免不必要的render？

    面试官 说说你是如何提高组件的渲染效率的 在React中如何避免不必要的render 一 是什么 react 基于虚拟 DOM 和高效 Diff 算法的完美配合 实现了对 DOM 最小粒度的更新 大多数情况下 React 对 DOM 的渲染

  • React安装依赖 node_modules中有下载依赖项但package.json文件中没有依赖

    React安装依赖 node modules中有下载依赖项但package json文件中没有依赖 直接在下载依赖项后 加 S 就可以解决 随机 id 生成器 uuid nanoid npm install nanoid S S save

随机推荐

  • 【Redis】常见数据结构及命令

    Redis常见命令 Redis数据结构介绍 Redis是一个key value的数据库 key一般是String类型 但是value的类型有很多种 Redis 通用命令 通用指令是部分数据类型的 都可以使用的指令 常见的有 KEYS 查看符

  • C++实现英语词典

    需要的东西 1 一个词典的txt文件 2 创建map容器 map

  • 最小二乘支持向量机”在学习偏微分方程 （PDE） 解方面的应用（Matlab代码实现）

    欢迎来到本博客 博主优势 博客内容尽量做到思维缜密 逻辑清晰 为了方便读者 座右铭 行百里者 半于九十 本文目录如下 目录 1 概述 2 运行结果 3 参考文献 4 Matlab代码实现 1 概述 本代码说明了 最小二乘支持向量机 在学习偏

  • 多媒体(视频容量计算)-软件设计（四十二）

    真题详解 有向图 软件设计 四十一 https blog csdn net ke1ying article details 129942490 一 音频概念 声音带宽 人耳 20Hz 20KHz 说话300 3400Hz 小于20Hz次声波

  • 上海链节科技：什么是企业链改？

    如何定义链改 链改 即用区块链中的部分技术原理和机制来改造业务系统中特定的部分 以创造更高效 更有公信力的系统 甚至还包括利用区块链上的各类积分 Token通证 来重新分配业务系统进而间接的改进业务系统背后的生产关系 传统基本结构的公司 通

  • 从IDataReaderHelper中读取数据实体

    using System using System Collections Generic using System Linq using System Text using System Data using System Reflect

  • 截取oracle字符串中的数字(转载）

    截取oracle字符串中的数字 云淡风轻博客 博客园 cnblogs com 方法一 如果Oracle版本不是太低的话 使用 正则表达式函数 REGEXP SUBSTR 处理 REGEXP SUBSTR有5个参数 分别是 第一个是输入的字符

  • GMAPPING的参数设置

    二 运行gmapping 我总结了运行gmapping的两种方法 1 基于命令行 rosrun gmapping slam gmapping scan scan delta 0 1 maxUrange 4 99 xmin 5 0 ymin

  • python必背代码-Python高手必修课：如何让 Python 代码更易读,推荐收藏

    阅读本文大概需要 10 分钟 我们知道 Python 是一种动态语言 在声明一个变量时我们不需要显式地声明它的类型 例如下面的例子 a 2 print 1 a 1 a 运行结果 1 a 3 这里我们首先声明了一个变量 a 并将其赋值为了 2

  • 【深入理解C++】string

    文章目录 1 概述 2 string的定义与初始化 3 string的赋值 4 string的读写 5 string的长度 6 string的遍历 6 1 运算符 6 2 at 6 3 迭代器 6 4 范围for 7 string 与 ch

  • Excel开发(VBA)— 快速定位最后有记录的行

    有时候 在进行Excel开发时 需要知道某列的最后一行的行号 Excel也提供了相关功能 Range End属性 Dim strCell As String Dim nLastUseRow As Long Dim nLastRcdRow A

  • Vue深入响应性原理

    深入响应性原理 参考资料 响应性 深入响应性原理 什么是响应性 Vue如何知道哪些代码在执行 Vue如何跟踪变化 被代理的对象 Proxy vs 原始标识 如何让渲染响应变化 响应性基础 声明响应式状态 创建独立的响应式值作为refs Re

  • 数据挖掘之关联分析（实验展示以及源代码）

    数据挖掘之关联分析 算法实现 Apriori算法和FP growth 算法 源代码 简单描述下 关联分析概念 关联分析概念主要参考下面的博文 原文 https blog csdn net qq 40587575 article detail

  • idea如何设置自动换行(亲测)

    方法 步骤 第一步 点击idea中的file 然后点击setting 第二步 在编辑中选择代码风格 然后点击java 第三步 在如图所示的栏目中点击Ensure 开头的选项 第四步 选择好以后直接点击apply应用 使其生效 第五步 返回代

  • Python界面 可视化开发（python3+PyQt5+Qt Designer）

    前言 以前制作一个Python窗体界面 我都是用GUI窗口视窗设计的模块Tkinter一点一点敲出来的 今天朋友问我有没有Python窗体的设计工具 用鼠标拖拖 就能完成窗体设计 我查了查相关资料 果然有一款好用的工具 Qt Designe

  • Q3.Numpy_统计分析-排序、去重和重复、搜索和计数函数

    Part 1 排序函数 numpy排序方式主要分为直接排序和间接排序两种 直接排序是指对数值直接进行排序 间接排序是指根据一个或多个键对数据集进行排序 在numpy中 直接排序常用sort 函数 间接排序常用argsort 函数和lexso

  • 官方YOLOV5的torch模型-＞ONNX模型-＞RKNN模型

    1 环境配置 1 1 RKNN Toolkit2的环境配置 下载RKNN Toolkit2 git clone https github com rockchip linux rknn toolkit2 git 打开一个终端命令行窗口 安装

  • C++primer(第五版）---14章（重载运算与类型转换）

    目录 编辑 重载运算符的基本概念 调用重载运算符 而有些运算符不应该被重载 应该保持与内置类型一致的含义 是否成员成员函数 重载io lt lt 和 gt gt 运算符 重载 lt lt 运算符 重载 gt gt 运算符 算术运算符 关系运

  • python英文（无空格）文本分词模块wordninja使用

    在NLP中 数据清洗与分词往往是很多工作开始的第一步 大多数工作中只有中文语料数据需要进行分词 现有的分词工具也已经有了很多了 这里就不再多介绍了 英文语料由于其本身存在空格符所以无需跟中文语料同样处理 如果英文数据中没有了空格 那么应该怎

  • react在移动端的自适应布局

    1 移动端基本可以无阻碍的进行flex的弹性布局 这边对flex就不进行深究 2 可以进行依据窗口进行vw vh vmin vmax单位的布局 1 vw vh vmin vmax 是一种视窗单位 也是相对单位 它相对的不是父节点或者页面的根

热门标签