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

方法1:

imageLoad: function () {
this.setData({
imageWidth: wx.getSystemInfoSync().windowWidth
})
}

方法2:

.imgClass{
width: 100vw;
}

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

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

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

.demo {
width: 100vw;
font-size: 10vw; /* 宽度为窗口100%, 字体大小为窗口的10% */
}
.demo1 {
width: 80vw;
font-size: 8vw; /* 宽度为窗口80%, 字体大小为窗口的8% */
}
.demo2 {
width: 50vw;
font-size: 5vw; /* 宽度为窗口50%, 字体大小为窗口的5% */
}
.demo3 {
width: 10vw;
height: 50vh; /* 宽度为窗口10%, 容器高度为窗口的50% */
}

转:https://blog.csdn.net/kerryqpw/article/details/78802023

微信小程序如何获取屏幕宽度的更多相关文章

  1. 微信小程序开发技巧及填坑记录

    以下是自己在开发过程中遇到的坑和小技巧,记录以下: 1.出现了 page[pages/XXX/XXX] not found.May be caused by :1. Forgot to add pag ...

  2. 来自于微信小程序的一封简讯

    9月21晚间,微信向部分公众号发出公众平台-微信应用号(小程序)的内测邀请,向来较为低调的微信在这一晚没人再忽视它了. 来自个人博客:Damonare的个人博客 一夜之间火了的微信应用号你真的知道吗? ...

  3. 微信小程序的认识和开发适用性

    来源:三节课课堂笔记 小程序认知 初识小程序.   目前微信小程序包括各类公众号接口的情况:   那么微信拥有的功能产品和对应的互联网产品有哪些:   小程序相当于AppStore应用分发市场:   ...

  4. 不一样的角度 解读微信小程序

    不一样的角度 解读微信小程序 七月在夏天· 2 天前 前段时间看完了雨果奖中短篇获奖小说<北京折叠>.很有意思的是,张小龙最近也要把应用折叠到微信里,这些应用被他称为:小程序. 含着金钥匙 ...

  5. 为苹果ATS和微信小程序搭建 Nginx + HTTPS 服务

    昨天测试开发微信小程序,才发现微信也要求用HTTPS加密数据,想来是由于之前苹果的ATS审核政策的缘故吧,微信想在苹果上开放小程序必然也只能要求开发者必须使用HTTPS了,于是在服务器上测试安装Ngi ...

  6. 微信小程序入门之构建一个简单TODOS应用

    最近开始了解微信小程序,虽然小程序已经出了很久了,刚出的那段时间很火,看到很多关于小程序的技术文章,不过现在似乎没那么火了,anyway,我们还是可以学习下的. 一.了解微信小程序 1.理念:小程序开 ...

  7. 线下市场,选择微信小程序从未显得如此重要

    2017 年 1 月 9 日,小程序正式上线,到今日,3 月 8 号,这个新产品面世刚好满两个月.小程序刚推出便受到全球关注,腾讯股价当天即创逾一个月高位,但关注度先是急速上涨,不久便迅速降温,甚至在 ...

  8. 微信小程序怎么用?线下商家最适合玩小程序

    随着微信小程序不断地释放新功能,许多行业越来越关注小程序,目前已经有不少餐饮和线下传统零售企业开始谋划利用好小程序.但是,线下商业有着复杂的场景,如何针对自己行业的特点和需求开发出属于自己的小程序,是 ...

  9. 从“跳一跳”来看微信小程序的未来

    从“跳一跳”来看微信小程序的未来   相信大家这两天都被微信新推出的小程序跳一跳刷爆了朋友圈,为了方便用户在使用过程中切换小程序,微信在这次6.6.1版本中加入了下拉可快速切换小程序的功能,而“跳一跳 ...

随机推荐

  1. Cocos开发中可能会遇到的问题

      开发中碰到的问题及解决方案: 1:场景工程中没有被依赖关联的图片声音或者其它资源,导出到微信后找不到 有些在场景工程中没有指定而通过代码中动态加载的资源,cocos creator不会导出到发布目 ...

  2. js 判断是否是空对象

    主要思路 我们要考虑到的主要有:js原生对象,宿主对象(浏览器上面的). 首先对于宿主对象 主要判断是DOM 对象 和是否是window 对象 是否是DOM对象  value.nodeType 是否存 ...

  3. mtr网络连通性测试

    01.mtr命令 yum install -y   mtr [root@jiao ~]# mtr --helpusage: mtr [-hvrwctglspniu46] [--help] [--ver ...

  4. Screen2EXE录屏|录制视频

    Screen2EXE是一款具有独到压缩算法的屏幕录制软件,它可以记录用户在屏幕上的每一步操作,包括鼠标轨迹,点击动作给予花环提示,然后保存为不需播放器即可观看的exe可执行文件. 在生成录制文件的大小 ...

  5. PM_LOG

    /**查询所有网元的所有粒度**/ SELECT EMS_PM_LOG_ID, SUBNET_ID, AMOID, NE_TYPE, PO_ID, PO_TABLE, GP_BEGIN_TIME, L ...

  6. 从零開始学android&lt;AnalogClock与DigitalClock时钟组件.三十一.&gt;

    这两个组件比較交单,大家看下会使用即可了 XML文件配置 <span style="font-size:18px;"><RelativeLayout xmlns: ...

  7. oracle的decode函数

    以下转自百度, 类似于case... when... then...else...end... DECODE函数是ORACLE PL/SQL是功能强大的函数之一,目前还只有ORACLE公司的SQL提供 ...

  8. [Spring学习笔记 3 ] spring 注解详解,完全注解,常用注解

    .xml使用注解 xml 用来定义bean的信息,注解用来配置依赖信息 ) 在配置文件中配置bean )在javaBean中用注解来指定依赖注入 )在配置文件中开启注解扫描 @Resource标签 j ...

  9. HDU 4540 威威猫系列故事——打地鼠 (状态压缩DP)

    威威猫系列故事——打地鼠 Time Limit: 300/100 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others)Total ...

  10. Android——检测TXT文件中是否含有双字节字符

    在读取双字节字符时,主要涉及到编码的选取: public static boolean isRightfulTXT(File f) { // TODO Auto-generated method st ...