当前位置:首页 > 日记 > 正文

微信小程序 宽高自适应详解

微信小程序 宽高自适应详解

微信小程序 图片宽高自适应

1.以前将小程序图片宽度设置为屏幕宽度:

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

2.现在:

.imgClass{ width: 100vw;}

解析:

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

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

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

参照demo案例对照下面四个容器的css样式:

.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% */}

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

相关文章

wps文字如何删除其中一页图文教程

wps文字如何删除其中一页图文教程

文字,删除,图文教程,方法,电脑软件,  在制作wps文档的时候,怎么删除文档其中的一页呢?对于新手来说不熟悉使用wps怎么办?下面小编就为你介绍wps文字怎样删除一页的方法,希望能帮到大家。wps文字删除其中一页的方法第一种方法  打开文档,找…

详解使用angularjs的ng-options时

详解使用angularjs的ng-options时

默认值,详解,如何设置,初始值,电脑软件,这两天我用ng-options过程中遇到的初始值为空白的问题,记得去年就遇到过,怎么解决的忘记了,费了一阵子功夫之后解决了,想记下来,方便遇到同样问题的小伙伴当然还有自己。1.场景:就是做一个查询列表的弹窗,其…

javascript实现二叉树遍历的代码

javascript实现二叉树遍历的代码

二叉树遍历,代码,电脑软件,javascript,前言:紧接着上篇 二叉树的javascript实现 ,来说一下二叉树的遍历。本次一本正经的胡说八道,以以下这个二叉树为例子进行遍历:接着是要引入二叉树实现的代码:function Node(data, left, right) { this.data…

ps怎么设计一款独特的彩色炫光字体

ps怎么设计一款独特的彩色炫光字体

字体,独特,彩色,电脑软件,ps,今天我们来看看使用PS制作一组彩色炫光字体效果的文字的教程,很简单,图文如下。软件名称:Adobe PhotoShop7.0 简体中文版软件大小:154MB更新时间:2014-09-02好的,开始我们的教程1、新建900X500白色画布,输入文字(最好选…

怎么运用WPS来设计一个二维码

怎么运用WPS来设计一个二维码

二维码,电脑软件,WPS,  使用WPS文字制作属于自己的二维码,二维码的使用是越来越普遍,我们可以通过扫面二维码来进行支付,使用起来非常方便。以下是小编为您带来的关于WPS设计一个二维码,希望对您有所帮助。WPS设计一个二维码1、打开WPS文字这…

微信小程序 scroll-view隐藏滚动条

微信小程序 scroll-view隐藏滚动条

滚动条,详解,程序,电脑软件,微信小,一:scroll-view隐藏滚动条在书写网页的时候,往往会为了页面的美观,而选择去掉滚动区域默认的滚动条,而在这里,就是为小程序去掉滚动条的其中的一种方法:scroll-view.wxml:scroll-view.wxssscroll-view.js 最终…

PS导航器怎么快速定位的位置?

PS导航器怎么快速定位的位置?

定位,位置,导航,快速,电脑软件,PS窗口只显示了该图片的一部分图像,想要快速找到图片,就可以使用ps中的导航器快速的找到我们所需要的图像位置,下面我们就来看看详细的教程。软件名称:Adobe Photoshop 8.0 中文完整绿色破解版软件大小:150.1MB更…

PS怎么给自然的合成云彩?

PS怎么给自然的合成云彩?

云彩,自然,电脑软件,PS,拍摄时,经常拍不到云彩,这就需要我们手动加入了。风景图片是我自己拍摄的,云彩是在网上截图的。软件名称:Adobe Photoshop 8.0 中文完整绿色破解版软件大小:150.1MB更新时间:2015-11-041、打开ps,打开图片,按ctrl+j,复制图层…

Excel2013中如何计算方差和均方差

Excel2013中如何计算方差和均方差

方差,计算,方法,电脑软件,strong,  Excel2013中如何计算方差和均方差?方差、均方差,可能现在回想起来都有点陌生。但是,我们在初中数学里面就有所接触,方差可以反映数据的偏移程度,多用于零件测绘行业,在Excel表格中,有时需要计算出方差,下面小…

怎么在WPS表格中使用if函数完成分

怎么在WPS表格中使用if函数完成分

函数,评级,步骤,表格,分数,  用if函数可以不仅可以对学生的考试成绩进行评级,还可以对很多数字数据来进行评级,比如工人的工资,天气指数等。下面小编教你怎么在WPS表格中使用if函数完成分数评级。WPS表格中使用if函数完成分数评级的步骤新建…

angular $watch 一个变量的变化 |

angular $watch 一个变量的变化 |

变量,实例,电脑软件,angular,watch,废话不多说,直接上代码$scope.$watch('custArea', function(newValue, oldValue) { angular.forEach(newValue, function(item, key) { if($scope.custArea.indexOf("000000") > -1){ // $sc…