【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.documentElement
		let w = u.getBoundingClientRect().width
		if (w>=1024) { // pad端
            u.style.fontSize=w/1220*20+"px"
          } else { // 手机端
            u.style.fontSize=w/375*20+"px"
          }
	}
	a.addEventLisenter("resize", () => {
		b()
	})b()
}(window)

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