移动端页面的相对高度

最新推荐文章于 2024-12-03 16:08:25 发布
最新推荐文章于 2024-12-03 16:08:25 发布
阅读量646 收藏 1
点赞数
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/llllllloooooo/article/details/74551341
本文介绍如何利用CSS3中的vh单位实现移动端页面的全屏显示效果。通过设置div的高度为特定数量的vh单位，可以确保不同尺寸的屏幕都能得到良好的适配。例如，3个div分别设置为20vh、60vh和20vh即可铺满整个屏幕。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

写移动端页面的时候，用百分比高度没办法恰好铺满整个屏幕

这个时候用到了vh，以下是css3手册的定义


所以100个vh即为设备屏幕的高度，可以将div 的高度设置为多少个vh

在我遇到的情况下，3个div的最小高度分别设置为20vh，60vh和20vh，就可以铺满整个屏幕了

min-height: 60vh;


相对的，还有其他的单位：

vw：视窗宽度的百分比 
vh：视窗高度的百分比 
vmin：当前较小的vw和vh 
vmax：当前较大的vw和vh


----------------------------------------------------------------------


南乡子_
关注
关于一个前端移动端高度自适应例子
锋子
05-11 1万+
移动端页面样式布局
移动端页面的尺寸设置
笔芯君
01-20 1139
viewport就是浏览器上可以显示网页的部分 将宽度设为640，因为目前主流 的设备宽度为640，样式上不用特殊处理，与PC书写保持一致。 target-densitydpi=device-dpi,指定屏幕像素密度DPI,device-dpi 为设备原本的DPI值,不会有任何缩放 在iphone3上，一个css像素确实是等于一个屏幕物理像素的。后来随着技术的发展，移动设备的屏幕
移动端手动控制页面高度
weixin_30266829的博客
03-05 141
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0,...
html移动端获取页面的高度,移动端页面如何获取当前页面高度并赋值给div最小高度？...
weixin_28894691的博客
06-03 551
宝慕林4294392在移动端，可以使用flex布局给你个例子：nbsp;html>Document         * {         &nbsp...
CSS 单位
weixin_34418883的博客
11-25 215
概览 CSS中的长度单位有很多，觉得有必要整理备忘。 网上介绍的也比较多和全，详见参考资料。 单位大体分为两大类： 绝对单位 ，不会因为其他元素的尺寸变化而变化。 相对单位 ，没有一个固定的度量值，而是由其他元素尺寸来决定的相对值。 单位 类型 简介 px Absolute 像素 (计算机屏幕上的一个点)，1px = 1/9...
移动端页面设计rem-
09-13
在移动端页面设计中，"rem"（root em）是一个至关重要的概念，它为实现响应式设计提供了强大支持。本文将详细解析如何利用rem单位在HTML5页面中创建与设计图比例一致、在不同屏幕尺寸下仍能保持布局一致性的页面。 ...
移动端手机端web页面
09-12
除此之外，优化触摸交互也是移动端页面设计的重要部分。按钮和链接需要有适当的触控目标大小，通常至少44x44像素，以确保用户能轻松地用手指操作。同时，考虑到手机用户的滚动习惯，页面滚动应该顺畅无阻，避免出现...
Vue实现移动端页面切换效果
明月如霜丶
03-12 3458
在子页面把整个页面做绝对定位，覆盖整个屏幕，子父页面将 router-view 用 transition 套起来，并加上过渡动画就可以啦。 代码： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" c
移动端页面适配：实现与策略
2. 重点调整字体、宽度、高度、间距以及图片尺寸，这些元素直接影响到页面的整体布局和用户体验。 3. 设计图通常按照手机分辨率的两倍尺寸制作，便于进行像素级别的适配。 4. 使用相对单位rem（root em）代替绝对...
移动端布局
qq_56101688的博客
11-24 1015
移动端布局是指针对移动设备（如智能手机和平板电脑）设计的网页或应用程序的用户界面布局。由于移动设备的屏幕尺寸较小，与传统桌面电脑相比，它们在显示内容时有一些特殊的考虑因素。任何一个移动端的布局都要有viewpoint。
html中高度用什么表示方法,html – 使用VH表示高度响应适合框SVG
weixin_28881989的博客
06-14 396
问题是因为您只将视口单元中的高度分配给容器,而不是实际的SVG元素.因此,容器的高度始终保持响应(如60vh),但svg元素的高度会根据宽度和viewBox设置而变化.这会导致SVG的一部分由于溢出而被剪切：隐藏在容器元素上.您可以通过从容器中删除overflow：hidden并向SVG元素添加边框来验证上述内容.要解决此问题,只需将以下CSS属性添加到svg元素即可.这将确保SVG始终只与容器一...
第五章 CSS盒模型
最新发布
2301_80866080的博客
12-03 605
5.1 盒模型的定义CSS盒模型（Box Model）是CSS布局的核心，它定义了HTML元素在页面上如何显示。盒模型包括以下几个部分：内容区域（Content Area）：这是盒子的主要内容区域，包括文本、图片或其他媒体内容。内边距（Padding）：内容区域周围的空间，可以是透明的或有颜色的。内边距是可选的，并且不会影响盒子的最终尺寸。边框（Border）：围绕内边距和内容区域的边缘。边框可以有不同的样式（实线、虚线、点线等），宽度和颜色。
如何解决用户对浏览器进行缩放或滚动鼠标滑轮、或调节屏幕显示百分比后，页面变形或显示不全
qq_24441205的博客
07-05 3041
1.单独的响应式布局hold不住这个问题，因为出问题的是device-pixel-ratio 2.问题现象是高分屏下整好的东西，在普分屏下会放大；而普分屏下整好的东西，在高分屏上会缩小。 3.重现这个问题不需要高分屏，直接用Ctrl++或者Ctrl±出来的效果是跟高分屏一致的（所以搞定这个问题之后，也可以同时预防用户误触网页缩放）。另外恢复是Ctrl+Num0 4.解决的关键就是你得在媒体适配里写device-pixel-ratio单独适配像素比；另外，需要把绝大多数组件由px单位转换为rem单位，因为需要
css中的视窗单位
charlene0824的博客
04-18 1513
视窗单位视窗是浏览器实际显示内容的区域–换句话说是你的不包括工具栏和按钮的网页浏览器。这些单位是vw,vh,vmin和vmax。它们都代表到了浏览器尺寸的比例和窗口的大小调整产生的规模改变。比如有一个1000px（宽）和800px（高）的视窗（viewport） vw–代表视窗（viewport）的宽度为1%，当宽度为1000px时，50vw=500px vh–窗口高低的百分比 50vh=400px
html居中全屏,用CSS3 vh 简单实现DIV全屏居中
weixin_36163782的博客
06-27 390
vh、vw、vmin、vmax介绍vw：视窗宽度的百分比(1vw代表视窗的宽度为1%)vh：视窗高度的百分比vmin：当前vw和vh中较小的一个值vmax：当前vw和vh中较大的一个值浏览器兼容性(1)桌面PCChrome：自26版起就完美支持(2013年2月)Firefox：自19版起就完美支持(2013年1月)Safari：自6.1版起就完美支持(2013年1...
Css 的自适应hv和vw
dawfwafaew的博客
03-11 1091
一、视口单位(Viewport units) 在Pc端是指,视口指的是在PC端，指的是浏览器的可视区域。 而在移动端，它涉及3个视口：Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal Viewport（理想视口）。 视口单位中的“视口”，PC端指的是浏览器的可视区域；移动端指的就是Viewport中的Layout Viewport。 1.vw：1vw等于视口宽度的1%。 2.vh：1vh等于视口高度的1%。 ...
css设置高度和宽度相同
满大人的博客
05-25 8977
如果确定width:100%;则设置高度 height: 100vw; 如果确定高度height:100%;则设置 width: 100vh;
css 保持宽高比缩放
阿豪
01-24 201
原文链接: css 保持宽高比缩放 上一篇: ...
CSS3 使用 calc() 计算高度 vh px
热门推荐
Ranx的博客
09-28 13万+
1、px     像素，我们在网页布局中一般都是用px。 2、百分比    百分比一般宽泛的讲是相对于父元素，自适应网页布局越来越多，百分比也经常用到了。 3、Viewport     viewport：可视窗口，也就是浏览器。     vw Viewport宽度， 1vw 等于viewport宽度的1%     vh Viewport
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值