React webpack移动端页面实现自适应

已于 2024-06-27 10:10:08 修改
阅读量242 收藏
点赞数 5
文章标签： react.js webpack 前端
于 2024-06-26 14:16:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84930436/article/details/139987736
版权

1.先创建脚手架

create-react-app 项目名称

2.脚手架创建完成导入webpack

npm run eject

3.在webpack.config.js中配置自适应

4.下载lib-flexible postcss-px2rem包适配布局

npm i lib-flexible postcss-px2rem --save

5.webpack.config.js中引入postcss-px2rem

6.在webpack.config.js中找到options在其配置注：px2rem({ remUnit: 75 }) 的意思就是1rem = 75px 这个是根据750px设计稿来的，如果是620 的就写 62

7.在index.js中引入lib-flexible

8.这样页面适配就完成了

嘻嘻哈哈-西
关注
  • 5
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
移动端适配webpack配置px转rem或vh，vw
好好学习
02-19 3191
移动端适配常用百分比，rem，后来又多了一个vh，vw。当然在less，sass可以写计算规则来转换px，比较麻烦，打包一次搞定就好 px转rem的配置 安装依赖 npm install px2rem-loader -D --save 配置loader var px2remLoader = { loader: 'px2rem-loader', options: { remUnit: 75...
React+flexible移动端适配布局
qq_63917051的博客
03-26 435
同时，在 webpack.config.js 的 postcss-loader loader里面添加。的意思就是1rem = 112.5px 这个是根据1125px设计稿来的。解包后，可以看到项目目录下多了一个。引入 postcss-px2rem。
15. 重学webpack——移动端适配方案
2024路在何方
08-01 474
推荐：《webpack学完这些就够了》 《webpack学完这些就够了》该专题主要讲述webpack4.x从入门到成仙的学习笔记，配置和原理应有尽有。现在由于webpack5.0的诞生，打算从现在开始从0开始写一遍webpack5.0的学习笔记，与大家一起分享学习，可以点击上方专栏订阅哦。 以下是本节正文： 移动端适配方案 当我们在移动端开发时，会发现需要兼容各种尺寸的终端设备，所以，如果有一套统一的适配方案，是十分有必要的。 适配方案 将页面宽度分成 10 份（x 份自己定），那么每份宽度就
实现React适配（pc端,移动端）
2301_79439327的博客
06-27 793
1.首先pc端适配所用的包2.然后在config中找到 webpack.config.js 在 webpack.config.js 中添加以下代码代码添加完的效果2.1 如果没有config文件夹在终端输出以下代码2.2在终端 npm run eiect 如果报错分析报错：这通常意味着你正在尝试执行一个 Git 操作（如切换分支、拉取或推送），但是你的工作目录中有未跟踪的文件（即 Git 不知道这些文件应该被跟踪还是忽略）或者你有未提交的更改。解决方法：a. 初始化 Git 仓库git init。
webpack4配置之——16：viewport适配移动端
kevin的博客
03-21 808
移动端适配配置 这里将之前的优化框架相关内容删除了，框架上的东西在看过我这之前的文章后，应该对webpack 已经有了了解，那么在这个基础上，去看vue-cli或者create-react-app，看它们的 webpack 配置，起码能知道该如何去修改了，在它们的基础上，去搭配出适合自己项目的脚手架。 本文将主要记录下我在使用 viewport 适配移动端时，学习的一些东西~ 移动端首先最重要的是...
React实现窗口自适应、自适应防抖、memo 缓存优化、监听元素尺寸变化
luemeon的博客
09-29 467
对父组件暴露获取 ECharts 实例的方法，让父组件可直接通过实例调用原生函数。作为一个全局通用组件，在 props 不变的情况下，跳过重新渲染。
详解基于Vue/React项目的移动端适配方案
10-16
本文将详细介绍如何在基于Vue和React的项目中实现移动端适配，通过示例代码展示具体的配置流程，帮助开发者提升开发效率。 在开始详细介绍之前，我们需要先了解几个基本概念： 1. 像素（Pixel，px）：是屏幕上的一...
121_HTML手机电脑网站_网页源码移动端前端_H5模板_自适应响应式源码.zip
08-02
- JavaScript框架/库（如React、Vue、Angular）：简化DOM操作，加速开发进程，实现组件化开发。 - 脚手架工具（如Webpack、Gulp）：自动化处理资源编译、打包、优化等任务。 - 版本控制系统（如Git）：协同开发，...
H1088_HTML手机电脑网站_网页源码移动端前端_H5模板_自适应响应式源码.zip
08-02
在移动前端，JavaScript可以处理用户输入、更新页面内容、执行异步通信（AJAX）以及实现各种复杂功能，如表单验证、路由管理、页面过渡效果等。配合框架和库（如React、Vue或Angular），JavaScript能进一步提高开发...
H840_HTML手机电脑网站_网页源码移动端前端_H5模板_自适应响应式源码.zip
08-02
"H840_HTML手机电脑网站_网页源码移动端前端_H5模板_自适应响应式源码.zip" 这个标题表明我们正在处理一个关于HTML5的网站源码，它专为手机和电脑设计，适用于移动端前端开发，并且具有自适应和响应式特性。...
H70_HTML手机电脑网站_网页源码移动端前端_H5模板_自适应响应式源码.zip
08-02
【标题】中的“H70_HTML手机电脑网站_网页源码移动端前端_H5模板_自适应响应式源码.zip”表明这是一个与HTML5相关的网站源码包，适用于手机和电脑，设计为移动前端的H5模板，并具有自适应和响应式特性。这意味着源码...
React项目的样式自适应的几种方法
m0_47298749的博客
07-25 1241
在React项目中，实现样式自适应是确保应用在不同设备和屏幕尺寸下都能提供良好用户体验的重要任务。本文将介绍几种常用的方法来实现React项目的样式自适应，并提供相应的代码示例。
Vue+webpack移动端: 将px转化为rem，适配各种机型
寂寞的天空的博客
07-27 1932
该配置基于node环境，vue-cli+webpack 1.下载lib-flexible npm i lib-flexible --save 2.引入lib-flexible 在main.js中引入lib-flexible import 'lib-flexible/flexible' 3.设置meta标签（移动端都需要设置） 通过meta标签，设置设备宽度以及缩放比例 &...
【手淘自适应】rem+webpack实现移动端自适应布局的思路
waht的博客
08-21 1125
开始之前先粗略讲一下各种概念，如果要深入理解可以谷歌关键词到处逛逛。如果对这些概念了如指掌，那就可以直接拉到第二块二、实现自适应布局区域。 一、各类名词概念 1、各类像素 （1）物理像素(dp —— device pixels) 概念 说人话就是屏幕上每一颗最小发光点就是1个物理像素。ppi（每英寸像素量）是屏幕像素密度的单位，像素密度越大，屏幕显示细节就能更多，画质更加细腻，文本更加清晰。。...
React-Native优质开源项目，详解
最新发布
weixin_42282293的博客
07-16 341
React Native Elements 是一个跨平台的 UI 组件库，提供了一组高度可定制的 UI 组件，帮助开发者快速构建移动应用的用户界面。React Navigation 是一个用于 React Native 应用的路由和导航库，提供了灵活的导航解决方案，适用于各种应用场景。Lottie 是一个用于加载和渲染 After Effects 动画的库。Lottie for React Native 允许开发者在应用中轻松集成高质量的动画。
如何进行各个终端的页面适配(react项目安装插件 postcss-px-to-viewport)
qq_52181663的博客
11-17 982
2、在webpack的配置文件中（webpack.config.js），引入这个插件，并进行配置。1、先安装这个插件 这个插件会自动将样式文件中的 px 转换为 vw。（2）、再进行配置 在 getStyleLoaders（）中配置。一般我们都是按着UI稿的尺寸来写固定的px 这个习惯。插件是 postcss-px-to-viewport。在上例的配置中，页面的参考宽高为 750 1624。我们可以引用插件来做。（以reactApp为例）这个可以根据设计稿的宽高来，这样方便！
react项目网页端适配（利用自定义hooks）
lin_fightin的博客
03-15 1271
思路就是利用window的resize事件，监听窗口变化，再利用hooks函数，在生命周期创建前监听，在生命周期结束时取消监听。具体看代码 这个useLifecycles是react-use的一个模仿组件的componentDidMount，和componentWillUnmount。也可以利用useEffect(()=>{},[])代替，接着就是监听window的resize事件，然后触发serRemFunc函数。 再看看setRemFunc的实现。 思路是，封装一个类，传入设计稿大小，要转换的比
react PC端 适配 自适应
信念之于人，犹翅膀之于鸟，信念是飞翔的翅膀
03-21 4367
在index中添加如下内容 html,body{ font-size: 100px; } rem.js // // // 实现 rem 等比适配 // const baseSize = 37.5 /* 基准适配 */ // function setRem() { // // 设置当前页面基于 375 进行缩放适配，需要根据设计稿改写除数 // const scale = document.documentElement.clientWidth / 375 /
react适配移动端
08-23
在React中适配移动端可以采用响应式设计的方式，使得应用在不同设备上都能有良好的显示效果和用户体验。可以CSS媒体查询来根据不同的屏幕尺寸应用不同的样式。例如，可以使用@media规则来定义适应不同屏幕尺寸的CSS样式。通过设置媒体查询的断点，可以针对不同的设备尺寸应用不同的样式。另外，可以使用React的移动端组件库，如Ant Design Mobile或React Native Elements，来快速搭建移动端界面，这些组件库已经对移动端的布局和交互做了优化，可以提高开发效率。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [移动端适配知识（react--张天禹）](https://blog.csdn.net/qq_44917015/article/details/121725516)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值