小程序和移动端100vh的区别

最新推荐文章于 2024-03-25 13:34:38 发布
最新推荐文章于 2024-03-25 13:34:38 发布
阅读量329 收藏 1
点赞数
文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51528868/article/details/135038516
版权

在小程序中如果配置了系统自带的导航栏和tabBar，小程序的100vh它会自动减去系统配置的导航栏和tabBar的高度，只显示中间的部分的高度

  小程序可以通过

     "navigationStyle":"custom" 去除系统自带的导航栏

     "custom":true   去除系统自带的tabBar

而浏览器，因为浏览器没有系统自带的导航栏和tabBar，所以浏览器的100vh没有减去导航栏和tabBar的高度

柠檬树^-^
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
微信小程序px、rpx、vh、百分比单位介绍
tl437002770的博客
01-25 965
微信小程序px、rpx、vh、百分比单位介绍
微信小程序 图片宽高自适应详解
01-20
微信小程序 图片宽高自适应 1.以前将小程序图片宽度设置为屏幕宽度： imageLoad: function () { this.setData({ imageWidth: wx.getSystemInfoSync().windowWidth }) } 2.现在： .imgClass{ width: 100vw; } 解析： CSS3引入的”vw”和”vh”基于宽度/高度相对于窗口大小 ”vw”=”view width”“vh”=”view height” 以上我们称为视窗单位允许我们更接近浏览器窗口来定义大小。 参照demo案例对照下面四个容
微信小程序布局中的单位及使用
最新发布
2301_76669854的博客
03-25 643
在PC端经常使用的单位，不用计算，直接使用，一般情况不用考虑设计图纸的来改变页面的大小。rem和rpx的换算关系：rem: 规定屏幕宽度为20rem；1px = 750/屏幕宽度 rpx 1rpx = 屏幕宽度/750 px。视口表示可视区域的大小。vw和vh是相对长度单位，永远以视口作为参考。相对单位，可理解为”root em”, 相对根节点html的字体大小来计算。系统将视口的宽度和高度都分为100份。1vw占用视口宽度的1%的尺寸单位，也是把页面按比例分割达到自适应的效果。
微信小程序签到弹窗(动画效果)
01-08
效果图如下所示 图片素材:https://pan.baidu.com/s/1Fa_kFBTVmps3BZf-LsC32Q 提取码: ebvr .wxml 签到 签到成功 获得0积分 好的 .wxss page{ background-color: #ccc; } view{ box-sizing: border-box; } button{ margin-top: 50rpx; } .load{ width: 80%; height: 600rpx; position: fixed; top:calc((100vh - 800rpx)/
微信小程序进入广告实现代码实例
12-30
这篇文章主要介绍了微信小程序进入广告实现代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 代码如下 <view class=container> 　　<image src=../../imgs/swiper1.jpg></image> 　　<text bindtap=cliadv>跳过广告 {{miao}}</text> </view> .container{ width:100%; height:100vh; position: relative; } image{ width:100%; heig
微信小程序布局中的单位及使用：px、rem、rpx、vw、vh、n%
qq_44577070的博客
11-24 8572
没接触过 JavaScript、CSS、HTML的小白直接开始接触微信小程序的开发，在了解了各个部分的作用以后，布局的时候就发现：怎么这么多单位？？？ px、rem、rpx、vw、vh、n% 为了不总是用得一脸懵逼，还是花点时间去好好归纳一下。 px：就是 Pixel 的缩写，就是指像素，图片采样的基本单位。 rem：把页面按比例分割达到自适应的效果。规定屏幕宽度为 20 rem，根据屏幕大小动态...
小程序设置height:100vh导致页面超出屏幕可以上下滑动
me_reader的博客
05-27 1278
在手机上测试的时候页面可以上滑且出现一条白色的线条。给页面添加`position: fixed`
移动适配---em、rem 、 vw / vh的原理以及小程序的 rpx
weixin_43323097的博客
08-19 1256
em、rem 、 vw / vh、rpx
【无标题】 移动端解决高度设为100vh时，页面超出窗口问题
qq_61834864的博客
10-31 5063
移动端解决高度设为100vh时，页面超出窗口，会产生滚动条问题
微信小程序——VW、VH
tingyu_的博客
04-18 5274
vw和vh是css3中的中的新单位，是一种视窗单位，小程序中也同样适用 小程序中，窗口固定宽度为100vw，将窗口宽度平均分为100份，每一份是1vw。 小程序中，窗口固定高度为100vh，将窗口高度平均分为100份，每一份是1vh。 ...
如何在小程序给页面根元素的高度撑满页面
yclstudy的博客
10-31 319
在页面的根元素上通过vh单位给定100 vh,由于页面内的padding和margin会造成页面的高度出现变化,可以通过box-sizing: border-box;做到消除由于高度变化而出现的滚动条。
浅析rem和em和px vh vw和% 移动端长度单位
09-24
下面小编就为大家带来一篇浅析rem和em和px vh vw和% 移动端长度单位。小编觉得挺不错的，现在分享给大家，也给大家做个参考，一起跟随小编过来看看吧
微信小程序填坑之路（三）：布局适配方案（rpx、px、vw、vh）
热门推荐
李益
11-15 4万+
因为小程序是以微信为平台运行的，可以同时运行在android与ios的设备上，所以不可避免的会遇到布局适配问题，特别是在iphone5上，因为屏幕尺寸小的缘故，也是适配问题最多的机型，下面就简单介绍几种适配方法。 rpx适配 rpx是小程序中的尺寸单位，它有以下特征： 小程序的屏幕宽固定为750rpx（即750个物理像素），在所有设备上都是如此 1rpx=（screenWi...
微信小程序100vh和windowHeight不一样高
me_reader的博客
06-27 219
【代码】微信小程序100vh和windowHeight不一样高。
微信小程序中的vw和vh单位
reg183的专栏
11-24 1001
微信小程序中的vw和vh单位 100vw代表手机宽度， 100vh代表手机高度。 实现代码： button{ width: 50vw; }
微信小程序之px、rem、px、vw、vh
GeeLoong`s Blog
10-24 1992
rpx 是微信小程序解决自适应屏幕尺寸的尺寸单位。微信小程序规定屏幕的宽度为750rpx。 无论是在iPhone6上面还是其他机型上面都是750rpx的屏幕宽度，拿iPhone6来讲，屏幕宽度为375px，把它分为750rpx后， 1rpx = 0.5px。 微信小程序同时也支持rem尺寸单位， rem 规定屏幕的宽度为20rem, 所以 1rem = (750/20)rpx = 37.5...
uniapp中rpx、px、em、rem、%、vh、vw的区别是什么
zz_ll9023的博客
12-09 1456
在选择rpx、px、em、rem、%、vh和vw这些长度单位时，需要根据具体的使用场景和需求进行选择。总之，在选择长度单位时，需要考虑具体的使用场景、设备的特性以及页面的响应式设计需求。根据需要呈现的效果和页面的兼容性需求进行选择。rpx、px、em、rem、%、vh、vw的区别主要体现在定义和特性上。
微信小程序页面高度100%
haohaoxueqd的博客
07-08 338
page {
【微信小程序scroll-view高度自适应】
qq_31629679的博客
06-25 3388
思路：找一个参考的布局通过uni.createSelectorQuery()获取其的高度，再通过uni.getSystemInfoSync().screenHeight获取屏幕高度，计算出大概的scroll_view之外高度即可（这个不能100%获取剩余的屏幕，通过适当的调整比例参数适配屏幕）注：如果需要100%适配就需要获取除scroll_view外的全部view的高度，用已获取的屏幕高度进行计算 （或将scroll_view之外的布局包裹在一个大的view中，这样就可以使用第二种情况进行处理）
vue3适配移动端vw vh单位配合@media做的适配
05-21
Vue3本身并不提供移动端适配的方案，但是可以使用vw、vh单位，以及@media媒体查询来实现移动端适配。 1. 设置html的font-size 在入口文件中，可以通过计算屏幕宽度来设置html的font-size，例如： ```javascript // main.js const setHtmlFontSize = () => { const html = document.documentElement const screenWidth = html.clientWidth html.style.fontSize = screenWidth / 375 * 16 + 'px' // 375是设计稿宽度，16是基准字体大小 } setHtmlFontSize() window.addEventListener('resize', setHtmlFontSize) ``` 在上述代码中，我们根据屏幕宽度计算出一个字体大小，然后设置到html标签的font-size属性上。 2. 使用vw、vh单位 在样式中，我们可以使用vw、vh单位来设置元素的宽度、高度、字体大小等。vw表示视口宽度的百分比，vh表示视口高度的百分比。 例如： ```css .container { width: 80vw; height: 50vh; font-size: 4vw; } ``` 在上述代码中，.container元素的宽度为视口宽度的80%，高度为视口高度的50%，字体大小为视口宽度的4%。 3. 使用@media媒体查询 有些情况下，我们需要针对不同的屏幕尺寸设置不同的样式。这时候可以使用@media媒体查询来实现。 例如，在手机竖屏状态下，我们需要将某个元素的宽度设置为100%： ```css @media screen and (max-width: 768px) { .container { width: 100%; } } ``` 在上述代码中，当屏幕宽度小于等于768px时，.container元素的宽度会被设置为100%。 综上所述，我们可以使用vw、vh单位配合@media媒体查询来实现移动端适配。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值