CSS3 vw/vh 实现内容窗口自适应

今天在写网易云登录注册页面时，没有背景感觉有点突兀，于是在网上下载了一张图片导入了进去，但大小不合适，我刚开始把图片大小写成固定的了，后来在浏览博客的时候看到了有关vw和vh的相关内容，看完后也将写的页面进行了优化，确实好用，也算是今天新学的一个小知识点吧，给大家分享一下。

vw：视窗宽度的百分比（1vw 代表视窗的宽度为 1%）
vh：视窗高度的百分比（ 1vh 代表视窗的高度为 1%）
vmin：当前 vw 和 vh 中较小的一个值
vmax：当前 vw 和 vh 中较大的一个值

vw、vh与 % 的区别：

1. % 是相对于父元素的大小设定的比率，vw、vh 是视窗大小决定的。
2. vw、vh 优势在于能够直接获取高度，而用 % 在没有设置 body高度的情况下，是无法正确获得可视区域的高度的。

这个写法在移动端很实用，而且很常用到。

在客户端，视口指的是浏览器的可视区域；
而在移动端，它涉及3个视口：Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal Viewport（理想视口）。指的就是Layout Viewport, “视区”所指为浏览器内部的可视区域大小，即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。

CSS3 vw/vh 实现内容窗口自适应相关推荐

css3自适应布局单位vw,vh
视口单位(Viewport units) 什么是视口? 在桌面端,视口指的是在桌面端,指的是浏览器的可视区域:而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Vi ...
css3自适应布局单位vw,vh你知道多少？
视口单位(Viewport units) 什么是视口? 在PC端,视口指的是在PC端,指的是浏览器的可视区域: 而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual V ...
css单位vw vh,css3自适应布局单位vw,vh详解
视口单位(Viewport units) 什么是视口? 在桌面端,视口指的是在桌面端,指的是浏览器的可视区域:而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Vi ...
Vue3使用element-plusUI解决菜单高度自动自适应的问题，使用CSS3的vh单位
最近在升级Vue的前端项目,把所有的框架升级到较新稳定版,前端UI用的elementUI,也升级到了element-plus,菜单组件的高度设置了height:100%也无效,于是设置了min-hei ...
css3的vw单位,vh单位的讲解，以及vw vh的兼容性
vw vh的介绍 vw,vh是css3中给我们提供的新的单位,他们是相对于viewport视窗的宽高进行计算的单位.说白了,就是相对于浏览器的窗口的大小. vw单位 vw是相对于视窗宽度的单位, 1v ...
响应式布局的常用解决方案(媒体查询、百分比、rem和vw/vh）
在前端开发过程中,静态网页通常需要适应不同分辨率的设备,常用的自适应解决方案包括媒体查询.百分比.rem.和vw /vh,本文主要分析px在移动端布局中的不足,以及几种不同的自适应解决方案一 ...
PC端、移动端响应式布局的常用解决方案对比(媒体查询、百分比、rem和vw/vh）
PC端.移动端响应式布局的常用解决方案对比简要介绍: 一.px 和视口 1. 像素 2. 视口 (1) 布局视口(layout viewport) (2) 视觉视口(visual viewport ...
响应式布局的常用解决方案对比(媒体查询、百分比、rem和vw/vh）
响应式布局的常用解决方案对比(媒体查询.百分比.rem和vw/vh) px和视口媒体查询百分比自适应场景下的rem解决方案通过vw/vh来实现自适应 px和视口在静态网页中,我们经常用像素( ...
Vite + Vue3 项目中，使用 vw/vh 适配移动端，并通过 Android Studio 打包
目录 1. 使用 vw/vh 适配移动端 1.1 使用 vite 初始化项目 1.2 安装插件,将 px 转化成 vw 1.2.1 在 vite.config.ts 中,声明插件 1.2.2 手写 p ...

CSS3 vw/vh 实现内容窗口自适应

CSS3 vw/vh 实现内容窗口自适应相关推荐

最新文章

热门文章