当前位置:首页>经验>

pc页面整体高度自适应怎么做(怎么做一个pc端自适应布局)

来源:原点资讯(m.360kss.com)时间:2022-10-25 09:13:46作者:YD166手机阅读>>

视口单位(Viewport units)

什么是视口?

在PC端,视口指的是在PC端,指的是浏览器的可视区域;

而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Viewport(视觉视口),Ideal Viewport(理想视口)。

视口单位中的“视口”,PC端指的是浏览器的可视区域;移动端指的就是Viewport中的Layout Viewport。

根据CSS3规范,视口单位主要包括以下4个:

1.vw:1vw等于视口宽度的1%。

2.vh:1vh等于视口高度的1%。

3.vmin:选取vw和vh中最小的那个。

4.vmax:选取vw和vh中最大的那个。

vh and vw:相对于视口的高度和宽度,而不是父元素的(CSS百分比是相对于包含它的最近的父元素的高度和宽度)。1vh 等于1/100的视口高度,1vw 等于1/100的视口宽度。

比如:浏览器高度950px,宽度为1920px, 1 vh = 950px/100 = 9.5 px,1vw = 1920px/100 =19.2 px。

vmax相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax。

vmin相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin。

pc页面整体高度自适应怎么做,怎么做一个pc端自适应布局(1)

vh/vw与%区别

pc页面整体高度自适应怎么做,怎么做一个pc端自适应布局(2)

请看下面简单的栗子:

pc页面整体高度自适应怎么做,怎么做一个pc端自适应布局(3)

VW&VH

left
right

pc页面整体高度自适应怎么做,怎么做一个pc端自适应布局(4)

兼容性问题(在移动端 iOS 8 以上以及 Android 4.4 以上获得支持,并且在微信 x5 内核中也得到完美的全面支持)

pc页面整体高度自适应怎么做,怎么做一个pc端自适应布局(5)

pc页面整体高度自适应怎么做,怎么做一个pc端自适应布局(6)

栏目热文

如何在pc端自适应布局(pc端页面自适应的布局方法)

如何在pc端自适应布局(pc端页面自适应的布局方法)

前言网站开发一般基于浏览器来展示,手机端目前成为兵家必争之地,怎么在网页端开发一份代码,在手机端也能有不错的效果呢。查资...

2022-10-25 09:08:56查看全文 >>

pc端适配最好的布局(pc端布局适配不同屏幕)

pc端适配最好的布局(pc端布局适配不同屏幕)

张扬吸睛的整体摆设、拥有自己独特风格的桌面用来形容现在主打电竞氛围的桌面搭配一点都不为过。桌面是日常所用到频率非常高的办...

2022-10-25 08:44:34查看全文 >>

ipad有必要买鼠标吗(ipad适合用鼠标吗)

ipad有必要买鼠标吗(ipad适合用鼠标吗)

作者 / 静静教主排版 / 静静教主文章字数 / 2530阅读时长 / 4分钟昨天收拾屋子的时候,发现:光ipad配件我...

2022-10-25 08:55:26查看全文 >>

ipad鼠标滚轮上下正反能调吗(ipad鼠标滚轮反的怎么改)

ipad鼠标滚轮上下正反能调吗(ipad鼠标滚轮反的怎么改)

苹果在 WWDC 全球开发者大会上发布了 iOS13 系统,果粉们应该知道从 iOS 13开始运行在 iPad 上的 系...

2022-10-25 09:29:32查看全文 >>

ipad怎么调出鼠标(ipad连鼠标怎么设置)

ipad怎么调出鼠标(ipad连鼠标怎么设置)

家里有一个IPAD AIR2一直处于闲置状态,于是我装了一个模拟时钟软件,把屏幕设置常亮再接上电源,它放在书房当表时钟使...

2022-10-25 08:59:52查看全文 >>

pc端自适应布局(pc端如何响应式布局)

pc端自适应布局(pc端如何响应式布局)

关于界面栅格的攻略,延展到适配方式。前言本文主要介绍等距栅格,旨在为有需要的同学解析栅格,从概念、结构和设计上更有效、自...

2022-10-25 08:53:58查看全文 >>

pc端怎么自适应大小(pc端自适应布局)

pc端怎么自适应大小(pc端自适应布局)

解决方法一:在main函数的最前面加上下面这个函数:#if (qt_VERSION > QT_VERSION_CH...

2022-10-25 09:10:46查看全文 >>

电脑自定义缩放比例布局(电脑桌面缩放与布局大小)

电脑自定义缩放比例布局(电脑桌面缩放与布局大小)

各个显示器的尺寸与分辨率是不尽相同的,所以需要设置各个显示器的缩放比例,这样屏幕看起来才会舒服。今天就为大家分享win1...

2022-10-25 08:44:29查看全文 >>

电脑自适应网格结构(电脑网格怎么调大小)

电脑自适应网格结构(电脑网格怎么调大小)

Abaqus中的自适应技术主要分为三种:ALE自适应网格划分、自适应网格重划分、网格-网格映射,本期我们聊聊ALE方法,...

2022-10-25 09:03:30查看全文 >>

pc端多操作界面布局(pc端布局适配不同屏幕)

pc端多操作界面布局(pc端布局适配不同屏幕)

Windows系统的多窗口管理一直是相比macOS等竞争对手的优势,现在微软在Win11中要对多任务切换的界面动手改进了...

2022-10-25 08:46:52查看全文 >>

文档排行