【Taro】React+Taro项目实现页面样式兼容手机端和Pad端

前言:
taro本身就是兼容多端的ui框架,是现在开发中比较常用的框架,兼容小程序、h5等,所以下面介绍下一些特殊情况的时候怎么实现样式兼容,在不同分辨率下
1.手机端兼容

在config/index.js配置文件中添加如下配置
designWidth: 750, // 设计稿宽度
deviceRatio: {  // 适配不同设备宽度640: 2.34 / 2,750: 1,828: 1.81 / 2,}
这样配置之后再不同型号的手机号都可以做到适配了

2.手机端和pad端同时兼容

/* 如果使用taro开发的项目样式既想兼容手机端,又想兼容pad端可以通过以下方式实现
1.手机端和pad端使用的是同一个页面,只是字体大小等不同可以使用@media screen and (max-width: 1024px)去针对单独的字体样式设置
2.手机端和pad端使用的是不同的页面开发,完全是两套独立的样式,可以通过在项目的index.html文件中判断实现
具体代码如下:
*/
// 第一种情况  index.less
// pad端
@media screen and (max-width: 1024px)
.title {font-size: 20px;
}
// 手机端
@media screen and (max-width: 375px)
.title {font-size: 14px;
}// 第二中情况  index.html
// H5响应式脚本配置
!function(a) {function(b) {let u = a.document.documentElementlet w = u.getBoundingClientRect().widthif (w>=1024) { // pad端u.style.fontSize=w/1220*20+"px"} else { // 手机端u.style.fontSize=w/375*20+"px"}}a.addEventLisenter("resize", () => {b()})b()
}(window)

以上是我用过的方法,如果还有其他比较好用的方法的话欢迎大家留言,一起交流学习!!!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/203216.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数据库函数大全(更新中)

IF(expr1,expr2,expr3) SELECT IF(1<2,yes ,no);#如果 1<2 满足返回 ‘yes’ 否则 ‘no’,也可以用于修改 UPDATE salary SET sex IF(Sex m, f, m); # sex m 改为 ‘f’ , sex f 改为 ‘m’ with with xx_v1 as( sql查询语句1 ),xx_v2 as( sql查询语句2 ),xx_v…

点击el-tree小三角后去除点击后的高亮背景样式,el-tree样式修改

<div class"videoTree" v-loading"loadingTree" element-loading-text"加载中..." element-loading-spinner"el-icon-loading" element-loading-background"rgba(0, 0, 0, 0.8)" > <el-tree :default-expand-all&q…

鸿蒙4.0开发笔记之ArkTS语法基础之应用生命周期与页面中组件的生命周期(十六)

文章目录 一、应用生命周期二、生命周期函数定义三、生命周期五函数练习 一、应用生命周期 1、定义 应用生命周期就是代表了一个HarmonyOS应用中所有页面从创建、开启到销毁等过程的全生命周期。查看路径如下&#xff1a; Project/entry/src/main/ets/entryability/EntryAbili…

libevent库中的http相关函数举例

evhttp_set_cb 是一个用于设置回调函数的函数&#xff0c;该回调函数在 Libevent 的 HTTP 服务器框架 (libevent-http) 中用于处理 HTTP 请求。这个函数需要三个参数&#xff1a;一个 evhttp 实例&#xff0c;一个回调函数&#xff0c;以及一个用于传递到回调函数的 "ctx&…

SpringBoot集成Elasticsearch8.x(9)|(RestClient实现Elasticsearch的简单操作)

SpringBoot集成Elasticsearch8.x(9)|(RestClient curl实现Elasticsearch的操作) 文章目录 SpringBoot集成Elasticsearch8.x(9)|(RestClient curl实现Elasticsearch的操作)@[TOC]前言一、DSL 介绍二、初始化客户端三、封装RestClient dsl执行三、更新1.实用script更新es…

Google Guava简析

Google Guava 是Google开源的一个Java类库&#xff0c;对基本类库做了扩充。感觉最大的价值点在于其 集合类、Cache和String工具类。 github项目地址&#xff1a;GitHub - google/guava: Google core libraries for Java github文档地址&#xff1a;Home google/guava Wiki …

17、XSS——session攻击

文章目录 一、session攻击简介二、主要攻击方式2.1 预测2.2 会话劫持2.3 会话固定 一、session攻击简介 session对于web应用是最重要&#xff0c;也是最复杂的。对于web应用程序来说&#xff0c;加强安全性的首要原则就是&#xff1a;不要信任来自客户端的数据&#xff0c;一定…

Spring Boot与Mybatis基础配置(手动写增删改查)

一、 配置 1.新建项目 1.项目基础配置 解释&#xff1a;记得把这个改成start.aliyun.com要不没有java8也就是jdk1.8 2.项目依赖配置 2.配置maven 配置前&#xff1a; 配置后&#xff1a; 3.创建子项目并配置父子项目pom.xml 配置父pom.xml 声明当前项目不是要打成jar包的…

NFC和蓝牙在物联网中有什么意义?如何选择?

#NFC物联网# #蓝牙物联网# 在物联网中&#xff0c;NFC和蓝牙有什么意义&#xff1f; NFC在物联网中代表近场通信技术。它是一种短距离、高频的无线通信技术&#xff0c;可以在近距离内实现设备间的数据传输和识别。NFC技术主要用于移动支付、电子票务、门禁、移动身份识别、防…

利用阿里云 DDoS、WAF、CDN 和云防火墙为在线业务赋能

在这篇博客中&#xff0c;我们将详细讨论使用阿里云 CDN 和安全产品保护您的在线业务所需的步骤。 方案描述 创新技术的快速发展为世界各地的在线业务带来了新的机遇。今天的人们不仅习惯了&#xff0c;而且依靠互联网来开展他们的日常生活&#xff0c;包括购物、玩游戏、看电…

【python VS vba】(7) python与numpy (建设ing)

目录 1 numpy 的基本介绍 2 numpy里的两种新数据类型&#xff1a;ndarray 和 matrix 2.1 numpy特殊的数据类型 2.1.1 python的数据类型 2.1.2 首先 python原生的list 和 tuple 2.1.3 numpy的数据类型 2.2 np.matrix() 或者 np.mat() 2.2.1 首先&#xff0c;两种写法相…

基于PicGo实现Typora图片自动上传GitHub

文章目录 一. 引言二. 原理三. 配置3.1 GitHub 设置3.2 下载配置 PicGo3.3 配置 Typora3.4 使用 一. 引言 Typora是一款非常好的笔记软件&#xff0c;但是有一个比较不好的地方&#xff1a;默认图片是存放在本地缓存中。这就会导致文件夹一旦被误删或电脑系统重装而忘记备份文件…

pymysql报错: unable to rollback、Already closed

参考&#xff1a; https://www.coder.work/article/4516746 https://www.cnblogs.com/leijiangtao/p/11882107.html https://stackoverflow.com/questions/55116007/pymysql-query-unable-to-rollback unable to rollback处理&#xff1a; # 关闭光标对象 cursor.close() # 关…

华为OD机试 - 执行任务赚积分(Java JS Python C)

题目描述 现有N个任务需要处理,同一时间只能处理一个任务,处理每个任务所需要的时间固定为1。 每个任务都有最晚处理时间限制和积分值,在最晚处理时间点之前处理完成任务才可获得对应的积分奖励。 可用于处理任务的时间有限,请问在有限的时间内,可获得的最多积分。 输入…

【Flink on k8s】- 8 - Flink kubernetes operator 的架构和设计

目录 1、整体介绍 2、架构体系 2.1 架构介绍 2.2 Control loop(控制循环)

18、XSS——cookie安全

文章目录 1、cookie重要字段2、子域cookie机制3、路径cookie机制4、HttpOnly Cookie机制5、Secure Cookie机制6、本地cookie与内存cookie7、本地存储方式 一般来说&#xff0c;同域内浏览器中发出的任何一个请求都会带上cookie&#xff0c;无论请求什么资源&#xff0c;请求时&…

西南科技大学C++程序设计实验六( 继承与派生一)

一、实验目的 1. 理解不同继承属性对派生类访问基类成员的区别 2. 掌握单继承程序编写 二、实验任务 1、调试下列程序,并在对程序进行修改后再调试,指出调试中的出错原因(该题中A为基类,B为派生类,B以public方式继承A) 重点:理解不同继承方式数据的访问权限,派生类…

.kann勒索病毒解密方法|勒索病毒解决|勒索病毒恢复|数据库修复

导言&#xff1a; 在数字化的今天&#xff0c;.kann勒索病毒等数字威胁正日益猖狂&#xff0c;给个人和企业的数据安全带来了巨大威胁。本文将深入介绍.kann勒索病毒的特征&#xff0c;提供有效的数据恢复方法&#xff0c;并分享一些预防措施&#xff0c;助您更好地在数字世界…

Java利用TCP实现简单的双人聊天

一、创建新项目 首先创建一个新的项目&#xff0c;并命名为聊天。然后创建包&#xff0c;创建两个类&#xff0c;客户端&#xff08;SocketClient&#xff09;和服务器端&#xff08;SocketServer&#xff09; 二、实现代码 客户端代码&#xff1a; package 聊天; import ja…

Memory-augmented Deep Autoencoder for Unsupervised Anomaly Detection 论文阅读

Memorizing Normality to Detect Anomaly: Memory-augmented Deep Autoencoder for Unsupervised Anomaly Detection 摘要1.介绍2.相关工作异常检测Memory networks 3. Memory-augmented Autoencoder3.1概述3.2. Encoder and Decoder3.3. Memory Module with Attention-based S…