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

方法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. nginx做负载均衡,验证码总是不对(2台服务器)

    问题原因:页面中有错误链接,导致跳转到另一台服务器,验证码显示的确是刚开始访问的 (有的静态文件一边没有,就需要去另外一边找,然后就跳了.) 解决方法:把静态文件都提取到了nginx上就解决了.

  2. vue 模板如何解析

    1.模板 一个最简答的模板: <div id="app"> {{ message }} </div> v-for模板: <ul id="ex ...

  3. Webwork【04】Configuration 详解

    Webwork做为经典的Web MVC 框架,个人觉得源码中配置文件这部分代码的实现十分考究. 支持自定义自己的配置文件.自定义配置文件读取类.自定义国际化支持. 可以作为参考,单独引入到其他项目中, ...

  4. Android学习笔记四:activity的四种启动模式

    Activity有四种启动模式:standard,singleTop,singleTask,singleInstance. 1.standard:标准启动模式 默认模式,这个模式下启动的Activit ...

  5. Java HmacSHA1算法

    Java HmacSHA1算法 public static String hmacSha1(String src, String key) { try { SecretKeySpec signingK ...

  6. Knockout学习之表单绑定器(下)

    “hasFocus”绑定 hasFocus绑定器会将DOM元素的焦点状态与视图模型中的属性相关联,当你设置视图模型中关联的属性为true或false后,将能够设置关键的DOM元素是否获得焦点. 比如下 ...

  7. 转:关于 OGRE 与 OSG 的简单比较

    1   前言 我曾经细致阅读过 OGRE 和 OSG 官方提供的文档,有<Pro OGRE 3D Programming>.OGRE自带手册(manual).王锐老师等翻译的<Ope ...

  8. Swoole源代码学习记录(十三)——Server模块具体解释(上)

    Swoole版本号:1.7.5-stable Github地址:https://github.com/LinkedDestiny/swoole-src-analysis 最终能够正式进入Server. ...

  9. Replace和ReplaceAll的差别

    先澄清几个误区 1.CharSequence 不是 Char :有些小朋友依据參数的类型选择Replace或ReplaceAll方法 2.Replace 和 ReplaceAll :并非有些小朋友想象 ...

  10. github不能访问、加载css、js解决办法

    很奇怪,白天在公司还能正常访问github,晚上回来访问却有问题,表现症状是页面加载慢,并且页面样式明显错乱. 在chrome下用F12开发者工具一看,有2条css和2条js 404 了,猜想应该是g ...