网站建设文件上传,论述网站建设引言,做电力产品的外贸网站,公司网络营销外包前言#xff1a; taro本身就是兼容多端的ui框架#xff0c;是现在开发中比较常用的框架#xff0c;兼容小程序、h5等#xff0c;所以下面介绍下一些特殊情况的时候怎么实现样式兼容#xff0c;在不同分辨率下 1.手机端兼容
在config/index.js配置文件中添加如下配置
desi…前言 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 (w1024) { // pad端u.style.fontSizew/1220*20px} else { // 手机端u.style.fontSizew/375*20px}}a.addEventLisenter(resize, () {b()})b()
}(window)以上是我用过的方法如果还有其他比较好用的方法的话欢迎大家留言一起交流学习
