react手机端app王者荣耀项目适配+工具类定义

最新推荐文章于 2024-05-26 10:53:52 发布
最新推荐文章于 2024-05-26 10:53:52 发布
阅读量96 收藏
点赞数
分类专栏： react系列
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lin_fightin/article/details/118539077
版权

1 项目起步之适配

在这里插入图片描述
原理是监听页面的resize对Hmtl赋予不同的font-size，使用rem进行开发。在这里插入图片描述

项目起步之scss工具类

一般我们做一个项目可以看下ui，颜色大概有哪些，字体大小大概有哪些，然后使用工具类
在这里插入图片描述
首先是颜色的工具类，这是scss的一些语法。
在这里插入图片描述
在项目使用
在这里插入图片描述
在这里插入图片描述

项目起步之flex布局工具类

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

边距布局

.m-1 表示margin:xx,
.mx-1表示marginLeft+marginRight
.mr-1表示marginright
在这里插入图片描述
尺寸的定义一般给一个初始基础值，然后用比例来处理
在这里插入图片描述
在这里插入图片描述
这样就完成了工具类的定义。

coderlin_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
react PC端项目构建TS，react@18.2.0+antd+vite+axios+redux+sass+ts
03-07
主要用于react@18.2.0PC端，在使用项目前请确保已安装node、yarn工具，node版本18+，此项目构建主要集成：axios、antd、sass、vite、sass、react V18，其中还会介绍到如何跨页面传递数据、国际化配置、rem适配、状态...
react PC端项目构建，react@18.2.0+antd+vite+axios+redux+sass
03-07
主要用于react@18.2.0PC端，在使用项目前请确保已安装node、yarn工具，node版本18+，此项目构建主要集成：axios、antd、sass、vite、sass、react V18，其中还会介绍到如何跨页面传递数据、国际化配置、rem适配、状态...
android安卓源码海量项目合集打包-1
chenhao0568的专栏
06-11 13万+
下载地址 最后更新共计113个分类5177套源码29.2 GB。 卷 新加卷 的文件夹 PATH 列表 卷序列号为 00000200 5E7A:7F30 F:. ├─前台界面 │ ├─3D标签云卡片热门 │ │ Android TagCloudView云标签的灵活运用.rar │ │ Android 实现 标签 拖动 改变位置.rar │ │ android 流式布局和热门标签.zip │ │ ...
【宝藏】GitHub黑科技的开源项目(有趣&高质量)
大鹏的博客
06-02 9576
博主收集整理 GitHub 上高质量、有趣的开源项目，并将他们进行归类。值得注意的是，不是简单的按照编程语言来分类，而是按照更有趣的分类方式，比如：有趣项目、沙雕项目、实战项目、学习项目、实用工具等等。同时欢迎通过 Pull Request 或者 issues 给我们推荐优秀好玩的开源项目。目录好玩项目实战项目开源工具学习项目大厂开源盘点 GitHub 上堪称黑科技的开源项目，请托起你的下巴不要惊掉。盘点 GitHub 上的沙雕项目，这些项目可能会让你笑的合不拢嘴。
大学生网页设计制作作业实例代码 (全网最全,建议收藏) HTML+CSS+JS
热门推荐
HTML网页设计
10-03 23万+
临近期末，大一新生的各种考试和专业结课作业纷至沓来。web实训大作业、网页期末作业、web课程与设计、网页设计等，简直让人头大。你还在为网页设计老师的作业要求感到头大？网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求, 废话不多说，直接看效果。📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确
Android开源项目集合(不断更新)
贵公子丶笔记
03-08 9156
Android开源项目集合(不断更新) PlayAndroid https://github.com/hyzhan43/PlayAndroid Kotlin 版 玩 Android (采用的是 LiveData+ViewModel+RxJava+okHttp+Retrofit+Glide 架构 ) advanced-java https://github.com/doocs/advanced...
web前端——源码，大学生网页设计制作作业实例代码 (全网最全,建议收藏) HTML+CSS+JS (1)
VX_WJ88950106的博客
04-18 2342
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
2024web网页源码大学生网页设计制作作业实例代码 (全网最全,建议收藏) HTML+CSS+JS
weixin_BJ050106的博客
05-26 1269
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
web前端html期末大作业实例 (1500套)
HTML网页设计
10-03 8万+
临近期末，大一新生的各种考试和专业结课作业纷至沓来。web实训大作业、网页期末作业、web课程与设计、网页设计等，简直让人头大。你还在为网页设计老师的作业要求感到头大？网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求, 废话不多说，直接看效果。📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确
什么是低代码（Low-Code）？
阿里云开发者
11-16 7804
简介：什么是低代码？我们为什么需要低代码？低代码会让程序员失业吗？本文总结了低代码领域的基本概念、核心价值与行业现状，带你全面了解低代码。一 前言如果选择用一个关键词来代表即将过去的2020年，我相信所有人都会认同是“新冠”。疫情来得太快就像龙卷风，短短数月就阻断了全世界范围内无数人与人之间的物理连接。但好在，我们已经全面迈入互联网时代：N95口罩再厚，也阻挡不了信息比特流的顺畅流通（宅男：B站依然香）；居家隔离再久，也妨碍不了钉钉消息的准时送达（社畜：工作依然苦）。逍遥子在9月份的云栖大会上说：“新技术
web前端期末大作业实例 (1500套) 集合
网页设计与制作
10-19 9011
临近期末，大一新生的各种考试和专业结课作业纷至沓来。web实训大作业、网页期末作业、web课程与设计、网页设计等，简直让人头大。你还在为网页设计老师的作业要求感到头大？网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求, 废话不多说，直接看效果。📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确
React项目架构+电商项目布局及代码
07-16
React 项目架构与电商项目布局 React 框架是当前最流行的前端框架之一，对于初学者来说，如何快速上手写一个项目是一个非常重要的问题。本文将为读者详细讲解 React 项目架构、电商项目布局及代码实现。 一、 ...
springboot+react前后端分离项目.zip
07-25
基于spring和react开发的前后端分离项目，后台使用springboot+hibernate+security等技术，前端使用react+axios+antd等框架，数据库使用mysql5.5+。项目已经开发了后台管理模块，包括用户、角色、组织、菜单、字典、...
react-native+ts+dva+react-navigation的app项目
03-29
1.使用比较新的rn版本，版本号：0.70.6 2.使用ts进行开发 3.整合了dva框架进行状态管理，简单好用 4.整合react-navigation进行路由管理 5.里面写了两个demo页面，用于参考
pyzmq-26.0.0b2-cp312-cp312-manylinux_2_28_x86_64.whl
06-19
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
C++冒泡排序（基础内容）
06-19
1.循环两个变量：外层（轮数）、内层每轮的次数； 2.总轮数=元素长度-1=最大下标 3.每轮次数=元素长度-1-轮数=最大下标-轮数； 4.轮数（++），次数（++）； 5.两两交换，大的放后面 冒泡排序基础内容，自学可用； 分为三个部分，推到过程，总结，题目样例 很详细，欢迎一起学习交流
pyzmq-25.1.0-cp36-cp36m-win32.whl
最新发布
06-19
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
protobuf-3.20.3-cp38-cp38-win_amd64.whl
06-19
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
react pc端项目和移动端项目区别
04-25
React PC端项目和移动端项目的主要区别在于视图的布局和设计。PC端项目通常会使用较大的屏幕来展示更多的内容，而移动端项目则需要考虑不同屏幕尺寸和触摸操作的影响。此外，移动端项目也需要更注重性能和资源的使用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

coderlin_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值