微信小程序，界面适配

小程序提供了rpx计量单位

这里解释下rpx

把所有界面界面宽度切分成750块，计算时候取块计算就达到了宽度适配！

直接贴源码

.wxss

page{
    height: 100%;
    width:750rpx;
}
.lunbo{
    width:750rpx;
    height:25%; 
}
.items{
    width: 100%;
    height: 75%;
}
.items .item{
    width:100%;
    height: 100%;
}
.items .item:nth-child(1){
    background: #666;
}
.items .item:nth-child(2){
    background: #999;
}
.items .item:nth-child(3){
    background: #333;
}

画横线的为适配必须样式

.wxml

<!--index.wxml-->
<view id="lunbo"  class="lunbo">
    <swiper indicator-dots="{{indicatorDots}}"
    autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" style="width:100%;height:100%;">
        <block wx:for="{{imgUrls}}">
            <swiper-item >
            <image src="{{item}}" style="width:100%;height:100%;"/>
            </swiper-item>
        </block>
    </swiper>
</view>
<scroll-view scroll-y scroll-into-view="item1" class="items">
    <view id="item1" class="item">
        <view class="item-top">
            
        </view>
    </view>
    <view id="item2" class="item"></view> 
    <view id="item3" class="item"></view> 
    <view id="item4" class="item"></view>   
</scroll-view>

//logs.js
var util = require('../../utils/util.js')


Page({
  data: {
    imgUrls: [
      'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
    ],
    indicatorDots: true,//是否显示面板指示点
    autoplay:true,//是否自动切换
    interval: 2000,//自动切换时间间隔
    duration: 1000,//滑动动画时长
    circular: true,//是否采用衔接滑动
  },
 onload:function(){
   document.getElementById('lunbo');
 }
  
})

.json

{}

4个文件的代码如上ok看下效果

效果在web开发者工具上适配所有提供的机型！！