微信小程序如何获取屏幕宽度

文章转载自:http://blog.csdn.net/kerryqpw/article/details/78802023

=====================================================

微信小程序如何获取屏幕宽度

 

       方法1:

[javascript]  view plain  copy
  1. imageLoad: function () {  
  2.    this.setData({  
  3.      imageWidth: wx.getSystemInfoSync().windowWidth  
  4.    })  
  5.  }  

        方法2:

[css]  view plain  copy
  1. .imgClass{  
  2.  width100vw;  
  3. }  

CSS3引入的”vw”和”vh”基于宽度/高度相对于窗口大小 

”vw”=”view width”“vh”=”view height” 

以上我们称为视窗单位允许我们更接近浏览器窗口来定义大小。


[css]  view plain  copy
  1. .demo {  
  2.   width100vw;  
  3.   font-size10vw; /* 宽度为窗口100%, 字体大小为窗口的10% */  
  4. }  
  5. .demo1 {  
  6.   width80vw;  
  7.   font-size8vw; /* 宽度为窗口80%, 字体大小为窗口的8% */  
  8. }  
  9. .demo2 {  
  10.   width50vw;  
  11.   font-size5vw; /* 宽度为窗口50%, 字体大小为窗口的5% */  
  12. }  
  13. .demo3 {  
  14.   width10vw;  
  15.   height50vh; /* 宽度为窗口10%, 容器高度为窗口的50% */  
  16. }  

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值