使用VMIN进行布局
先了解css3的两个属性vmax和vmin
vmax 相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax
vmin 相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin
竖屏布局的时候，750rpx就是竖屏布局屏幕的宽度，vmin不管横竖屏的情况下，100vmin都是手机屏幕的宽度，所以rpx与vmin之间有一个换算的关系：x rpx=( x * 100 / 750)vmin。
也就是说： 75rpx转化为vmin就是 75 * 100/750=10vmin
所以我们将rpx转化成vmin就可以正常的进行横屏的开发。
主要：
@function tovmin(KaTeX parse error: Expected '}', got 'EOF' at end of input: rpx) { //rpx为需要转换的字号
@return #{$rpx * 100 / 750}vmin;
}文章来源：https://www.toymoban.com/news/detail-676160.html
<template>
<view class="clanHall" style="background-image: url(https://image.zrms.com.cn/1683537773246xianghuo.png);">
<view class="videoTop row-me row-center">
<image src="../static/back.png" mode="aspectFit" class="returnImg" @click="goClick"></image>
<view class="row-me row-center broadcast">
<image src="../static/icon_laba.png" mode="aspectFit" class="margin-right10 horn"></image>
<swiper circular="true" vertical="true" autoplay="true" interval="3000" duration="1000"
class="margin-right30 swiperBox">
<swiper-item v-for="(item,index) in noticeList" :key="index"
class="row-me row-center swiperItem colorfff">
<view class="margin-left10 txt1">{{item.name}}</view>于<view class="txt2">{{item.day}}
</view>去世，送上属于你的思念。
</swiper-item>
</swiper>
</view>
</view>
<view class="leftBox">
<view class="row-me row-center viewBox margin-bottom20" @click="tabLeft(1)">
<image src="../static/btn_quanjing.png" mode="aspectFit" class="img"></image>
<view class="font-bold colorfff leftTxt">全景</view>
</view>
<view class="row-me row-center viewBox margin-bottom20" @click="tabLeft(2)">
<image src="../static/btn_sc.png" mode="aspectFit" class="img">
</image>
<view class="font-bold colorfff leftTxt">商城</view>
</view>
<view class="row-me row-center viewBox margin-bottom20" @click="tabLeft(3)">
<image src="../static/btn_jcxx.png" mode="aspectFit" class="img"></image>
<view class="font-bold colorfff leftTxt">家祠信息</view>
</view>
<view class="row-me row-center viewBox" @click="tabLeft(4)">
<image src="../static/btn_jcys.png" mode="aspectFit" class="img"></image>
<view class="font-bold colorfff leftTxt">家祠议事</view>
</view>
</view>
<view class="rightBottom row-me row-center">
<view class="viewBox" @click="tabRightbottom(1)">留言</view>
<view class="viewBox" @click="tabRightbottom(2)">相册</view>
</view>
</view>
</template>
<script>
export default {
components: {
},
data() {
return {
noticeList: [ //公告栏播报
{
name: '杨树林',
day: '2020年3月29日',
},
{
name: '杨树林01',
day: '2020年3月29日',
},
{
name: '杨树林02',
day: '2020年3月29日',
},
],
}
},
// 侦听器
watch: {
},
// 计算属性
computed: {
},
//组件创建
created() {
},
// 页面加载
onLoad(e) {
},
// 页面显示
onShow() {
},
// 方法
methods: {
goClick() {
this.$.back();
},
tabLeft(index) {
if (index == 1) {
this.$.toast('暂无开通，敬请期待！');
} else if (index == 2) {
this.$.open("/ancestralHall/store/indexList");
} else if (index == 3) {
this.$.toast('暂无开通，敬请期待！');
} else if (index == 4) {
this.$.toast('暂无开通，敬请期待！');
}
},
tabRightbottom(index) {
if (index == 1) {
this.$.toast('暂无开通，敬请期待！');
} else if (index == 2) {
this.$.open("/myAncestralHall/myAncestralHallPage/photo");
}
},
},
// 页面隐藏
onHide() {
},
// 页面卸载
onUnload() {
},
// 触发下拉刷新
onPullDownRefresh() {
},
// 页面上拉触底事件的处理函数
onReachBottom() {
},
}
</script>
<style lang="scss" scoped>
@function tovmin($rpx) {
//$rpx为需要转换的字号
@return #{$rpx * 100 / 750}vmin;
}
// width: tovmin(750);
.clanHall {
height: 100vh;
overflow: auto;
background-color: #2A3143;
background-size: 100% 100%;
.videoTop {
// height: 88rpx;
height: tovmin(88);
.returnImg {
// width: 123rpx;
// height: 34rpx;
// margin-left: 60rpx;
// margin-right: 46rpx;
width: tovmin(123);
height: tovmin(34);
margin-left: tovmin(60);
margin-right: tovmin(46);
}
.broadcast {
flex: 1;
// height: 80rpx;
height: tovmin(80);
border-radius: 20rpx;
.horn {
// width: 30rpx;
// height: 30rpx;
width: tovmin(30);
height: tovmin(30);
}
.swiperBox {
width: 100%;
// height: 80rpx;
height: tovmin(80);
.horn {
// width: 30rpx;
// height: 30rpx;
width: tovmin(30);
height: tovmin(30);
}
.swiperItem {
font-size: tovmin(24);
.txt1 {
color: #DBB081;
}
.txt2 {
color: #DBB081;
}
}
}
}
}
.leftBox {
position: fixed;
// top: 118rpx;
// left: 90rpx;
// width: 200rpx;
width: tovmin(200);
top: tovmin(118);
left: tovmin(90);
.viewBox {
// width: 200rpx;
// height: 80rpx;
width: tovmin(200);
height: tovmin(80);
background: rgba(0, 0, 0, 0.5);
border-radius: 50rpx;
}
.img {
// width: 44rpx;
// height: 44rpx;
// margin-left: 28rpx;
// margin-right: 12rpx;
width: tovmin(44);
height: tovmin(44);
margin-left: tovmin(28);
margin-right: tovmin(12);
}
.leftTxt {
font-size: tovmin(24);
}
}
.rightBottom {
position: fixed;
// bottom: 58rpx;
// right: 40rpx;
bottom: tovmin(58);
right: tovmin(40);
.viewBox {
// width: 182rpx;
// height: 70rpx;
// line-height: 70rpx;
background-image: url('../static/bg_liuyan.png');
background-size: 100% 100%;
// font-size: 26rpx;
font-weight: bold;
color: #FFFFFF;
text-align: center;
// margin-left: 27rpx;
width: tovmin(182);
height: tovmin(70);
line-height: tovmin(70);
font-size: tovmin(26);
margin-left: tovmin(27);
}
}
}
</style>
文章来源地址https://www.toymoban.com/news/detail-676160.html
到了这里，关于uniapp实现微信小程序横屏适配问题demo效果（整理）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
