微信小程序——VW、VH

最新推荐文章于 2024-07-11 20:30:00 发布
最新推荐文章于 2024-07-11 20:30:00 发布
阅读量5.4k 收藏 3
点赞数 3
分类专栏： 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tingyu_/article/details/105599419
版权

vw和vh是css3中的中的新单位，是一种视窗单位，小程序中也同样适用

  • 小程序中，窗口固定宽度为100vw，将窗口宽度平均分为100份，每一份是1vw。
  • 小程序中，窗口固定高度为100vh，将窗口高度平均分为100份，每一份是1vh。

 

tingyu_
关注
专栏目录
微信小程序中的vw和vh单位
kerryqpw的博客
07-11 2万+
微信小程序中的vm和vh单位
微信小程序填坑之路：布局适配方案（rpx、px、vw、vh）
Purpletaro的专栏
07-15 2592
因为小程序是以微信为平台运行的，可以同时运行在android与ios的设备上，所以不可避免的会遇到布局适配问题，特别是在iphone5上，因为屏幕尺寸小的缘故，也是适配问题最多的机型，下面就简单介绍几种适配方法。 rpx适配 rpx是小程序中的尺寸单位，它有以下特征： 小程序的屏幕宽固定为750rpx（即750个物理像素），在所有设备上都是如此 1rpx=（screenWidth / 750）px，其中screenWidth为手机屏幕的实际的宽度（单位px），例如iphone6...
微信小程序rpx、px、vw、vh、upx区别
qq_29707325的博客
07-07 621
upx是uni-app中的长度单位，它代表设备独立像素（与屏幕密度无关），1upx等于设备上的1个物理像素。在不同分辨率和屏幕尺寸的设备上，upx会自动转换为适应当前屏幕的最佳物理像素值，帮助开发者实现跨设备的一致性布局。如果不进行任何适配处理，使用px单位的元素在不同设备上可能会因为屏幕像素密度（PPI）的差异而显示出不同的大小。对于不需要响应式布局的元素，或者在已知屏幕尺寸和分辨率的情况下，使用px单位是合适的。在微信小程序中，使用px作为单位时，元素的尺寸会直接对应到屏幕的物理像素上。
微信小程序之px、rem、px、vw、vh
GeeLoong`s Blog
10-24 2285
rpx 是微信小程序解决自适应屏幕尺寸的尺寸单位。微信小程序规定屏幕的宽度为750rpx。 无论是在iPhone6上面还是其他机型上面都是750rpx的屏幕宽度，拿iPhone6来讲，屏幕宽度为375px，把它分为750rpx后， 1rpx = 0.5px。 微信小程序同时也支持rem尺寸单位， rem 规定屏幕的宽度为20rem, 所以 1rem = (750/20)rpx = 37.5...
微信小程序开发
记录自己工作生活中遇到的问题
02-29 755
【代码】微信小程序开发。
微信小程序——计算器案例
流楚丶格念的博客
03-30 7361
文章目录项目展示页面设计页面样式页面逻辑util-->calc.jsindex.js 项目展示 页面设计 分为上面输入的显示部分和下面按键部分 <!--pages/index/index.wxml--> <view class="result"> <view class="result-num">{{num}}</view> <view class="result-op">{{op}}</view> </view&
【微信小程序——案例2-3 婚礼邀请函】
qq_67308035的博客
10-30 978
安装Node.js，简单使用Node.js启动服务器，并且能访问服务器端资源。
微信小程序——走过的坑
semoon的博客
03-05 555
微信小程序——走过的坑 1.text标签 text标签 不能设置width wxml使用多个空格（&amp;amp;nbsp；），要添加 decode=’{{decode}}’ js文件中设置decode为true data: { decode:true, }, 2.wxss设置page整个页面的背景色 page{ background-color: #F2F2F2; } ...
微信小程序——自定义键盘：自定义组件和父组件通过事件进行属性同步
semoon的博客
03-19 3735
微信小程序——自定义键盘：自定义组件和父组件通过事件进行属性同步 自定义组件触发事件时，需要在自定义组件中使用 triggerEvent 方法，指定事件名、detail对象和事件选项： 在对组件进行封装时 在当前页面想要获取组件中的某一状态，需要使用到this.triggerEvent(’ ',{},{}),第一个参数是自定义事件名称，这个名称是在页面调用组件时bind的名称，第二个对象就可以将...
微信小程序 —— 解决自定义弹窗出现后，蒙层下的页面仍可以滚动的问题
热门推荐
Wu_shuxuan的博客
11-30 1万+
在微信小程序开发中，会碰到自定义弹窗出现后，蒙层下面的页面仍可以滚动的问题。例如： 解决方法：1. 先点击出现蒙层时，页面的最外层view：height:100vh （灵活设置，蒙层出现时height:100vh;,反之height: ;）2. 在蒙层的最外层view中加入catchtouchmove=”preventTouchMove” -wxml <view class="Montmor
微信小程序实用的布局单位vw，vh
盛国强的博客
05-08 2352
水平居中（在父布局中写，子布局为view）：display: flex; flex-direction: row; justify-content: center; 或者text-align: center; 垂直居中（在父布局中写，子布局为view）：display: flex; align-items: center; 或者 line-height: xxx; 水平居中并...
微信小程序px、rpx、vh、百分比单位介绍
tl437002770的博客
01-25 1280
微信小程序px、rpx、vh、百分比单位介绍
论小程序height:100vh或100%的大坑
最新发布
Anlantic的博客
07-11 455
1、scroll-y使用变量控制，输入框聚焦设置设置为false,失去焦点设置为true。问题也相当于没解决。咦，解决方案的高度100vh怎么和我的那么像呢，于是抱着试试的心态，将scroll-view的height改为了height:calc(100vh - 1rpx),然后发现成了。问题：原生小程序使用scroll-view包裹的很多输入框(input),当输入内容时，输入框的文字会向上跑，就是错位的问题。2、使用input的always-embed设置为true,对于我的问题没解决。
小程序设置height:100vh导致页面超出屏幕可以上下滑动
me_reader的博客
05-27 1573
在手机上测试的时候页面可以上滑且出现一条白色的线条。给页面添加`position: fixed`
微信小程序100vh和windowHeight不一样高
me_reader的博客
06-27 311
【代码】微信小程序100vh和windowHeight不一样高。
对微信小程序的一些用法的感悟和总结
qq_48701278的博客
05-03 1896
文章目录前言一、一些代码句的用法1， page页面下有多余空白区域 min-height:100vh;2，3，4，5，6，7，8，二、一些代码句的组合1，2，3，4，5，6，7，8，总结 前言 过去的半年都在做一个项目，我的分工是小程序前端，最近开始着手结项工作，想着把wxml和wxss里面一些我刚上手时不了解或者遇到的一些问题和用法总结一下。各个组件的用法我就不展开说了，官方文档上的属性和例子都很好，可以去看一下，这里是微信官方小程序文档链接：微信开放文档 现在进入正题~~ 一、一些代码句的用法
【微信小程序/前端】实用样式相关内容简记
RogerQianpeng的博客
04-18 857
一些零散的点的简单记录。
小程序和移动端100vh的区别
qq_51528868的博客
12-16 458
在小程序中如果配置了系统自带的导航栏和tabBar，小程序的100vh它会自动减去系统配置的导航栏和tabBar的高度，只显示中间的部分的高度。而浏览器，因为浏览器没有系统自带的导航栏和tabBar，所以浏览器的100vh没有减去导航栏和tabBar的高度。"navigationStyle":"custom" 去除系统自带的导航栏。"custom":true 去除系统自带的tabBar。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值