当前位置:首页 >> 跨学科知识体系 >> 【Taro】React+Taro项目实现页面样式兼容手机端和Pad端,酷派8050

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

cpugpu芯片开发光刻机 跨学科知识体系 1
文件名:【Taro】React+Taro项目实现页面样式兼容手机端和Pad端,酷派8050 【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)

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

协助本站SEO优化一下,谢谢!
关键词不能为空
同类推荐
«    2025年12月    »
1234567
891011121314
15161718192021
22232425262728
293031
控制面板
您好,欢迎到访网站!
  查看权限
网站分类
搜索
最新留言
文章归档
网站收藏
友情链接