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

方法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. java 线程池线程忙碌且阻塞队列也满了时给一个拒接的详细报告

    线程池线程忙碌且阻塞队列也满了时给一个拒接的详细报告.下面是一个自定义的终止策略类,继承了ThreadPoolExecutor.AbortPolicy类并覆盖了rejectedExecution方法把 ...

  2. Java之创建对象>7.Avoid finalizers

    1.Finalizers are unpredictable, often dangerous, and generally unnecessary. 2.never do anything time ...

  3. HDU 4472 Count(数学 递归)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4472 Problem Description Prof. Tigris is the head of ...

  4. V-rep学习笔记:vrep中的实用工具

    在V-REP的模型浏览器中可以找到一个工具文件夹tools,点开后会在下面一栏中显示许多方框图,将这些方框拖到场景模型中可以实现一些特定的功能,方便建模或其它操作. Center of mass vi ...

  5. JAVA识别字符串是数字(英文)还是汉字,web页面进行字符截断的帮助类

    public static void main(String[] args) { //长度是2说明是英文/数字/英文状态下的字符,长度为4说明是汉字/中文状态下的字符 String str = &qu ...

  6. COUNTA函数功能是返回参数列表中非空值的单元格个数

    COUNTA:返回参数列表中非空值的单元格个数

  7. Dlib三维点云示例

    Dlib三维点云示例 源代码来自Dlib的示例代码http://dlib.net/3d_point_cloud_ex.cpp.html 在windows下需要链接winmm``comctl32``gd ...

  8. php反射API 获取属性/注释/方法 执行方法 实例

    <?php class Person { /** * 这里是对$_allowDynamicAttributes的注释信息 */ private $_allowDynamicAttributes ...

  9. Appium原理及版本变化细节

    Appium原理小结 Api接口调用selenium的接口,Android底层用android的instrumentation(API2.3+ 通过绑定另外一个独立的selendroid项目来实现的) ...

  10. JS正则替换掉小括号及内容

    正則表達式:\ ( [ ^ \ ) ] * \ ) JS代码: var str="hello(world)"; var nstr = str.replace(/\([^\)]*\) ...