CSS3视口单位vw,wh
vw和vh是视口(viewport units)单位,何谓视口,就是根据你浏览器窗口的大小的单位,不受显示器分辨率的影响,是不是很神奇,这就代表了,我们不需要顾虑到现在那么多不同电脑有关分辨率的自适应问题。
vw是可视窗口的宽度单位,和百分比有点一样,1vw = 可视窗口的宽度的百分之一。比如窗口宽度大小是1800px,那么1vw = 18px。和百分比不一样的是,vw始终相对于可视窗口的宽度,而百分比和其父元素的宽度有关。
vh就是可视窗口的高度了。
他们能够根据窗口大小来自动调节字体大小,这就能很轻松地完成响应式页面的布局
利用vw,wh实现在页面中响应垂直居中,只需要以下代码
#box {
width: 50vw;
height: 50vh;
margin: 25vh auto;
}
CSS3视口单位vw,wh的更多相关文章
- css3新单位vw、vh的使用详解
响应式布局的单位我们第一时间会想到通过rem单位来实现适配,但是它还需要内嵌一段脚本去动态计算跟元素大小. 比如: (function (doc, win) { let docEl = doc.doc ...
- CSS3新单位vw、vh、vmin、vmax使用详解
像 px.em 这样的长度单位大家肯定都很熟悉,前者为绝对单位,后者为相对单位.CSS3 又引入了新单位:vw.vh.vmin.vmax.下面对它们做个详细介绍. 新单位也成为视窗单位,视窗(View ...
- CSS3 - 新单位vw、vh、vmin、vmax使用详解(附样例)
像 px.em 这样的长度单位大家肯定都很熟悉,前者为绝对单位,后者为相对单位.CSS3 又引入了新单位:vw.vh.vmin.vmax.下面对它们做个详细介绍. 一.基本说明 1,vw.vh.vmi ...
- css3新单位vw、vh、vmin、vmax的使用介绍
1,vw.vh.vmin.vmax 的含义 (1)vw.vh.vmin.vmax 是一种视窗单位,也是相对单位.它相对的不是父节点或者页面的根节点.而是由视窗(Viewport)大小来决定的,单位 1 ...
- CSS3新单位vw,vh,vmin,vmax详解
1,vw,vh,vmin,vmax是由视窗Viewport大小来决定的,单位1,代表1%,是一种相对单位,只要是为响应式适配视窗的一种解决方案: vw:view width(视窗宽度)的百分比,1vw ...
- css3新单位vw、vh、vmin、vmax的使用详解(转载)
文章传送门: https://blog.csdn.net/ZNYSYS520/article/details/76053961
- CSS3 - 新单位vw、vh、vmin、vmax使用详解
参考文章出自:https://www.hangge.com/blog/cache/detail_1715.html
- css3自适应布局单位vw,vh你知道多少?
视口单位(Viewport units) 什么是视口? 在桌面端,视口指的是在桌面端,指的是浏览器的可视区域:而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Vi ...
- css3自适应布局单位vw,vh详解
视口单位(Viewport units) 什么是视口? 在桌面端,视口指的是在桌面端,指的是浏览器的可视区域:而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Vi ...
随机推荐
- svg圆环缓冲动画
代码如下 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8& ...
- ajax-jq
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- leetcode-685-冗余连接②
题目描述: 参考后提交:并查集: class Solution: def findRedundantDirectedConnection(self, edges: List[List[int]]) - ...
- django 模型ManyToMany 关联的添加,删除,查询
models.py文件内容: from django.db import models class person(models.Model): name = CharField(max_length= ...
- idea bug解决
1.编译时错误:软件包 javax.servlet.http 不存在import javax.servlet.http.HttpServletRequest 解决办法:把servlet-api.jar ...
- linux中hadoop组件启动日志存放问题
如果是nohup xxxx &的话会在当前目录下生成一个nohup文件存放当前出现所有的日志,&表示后台启动: 当然你也可以将日志存放在>/dev/null表示当前日志存放的位置 ...
- 2018-2019-2-20175323 java实验五 网络编程与安全
20175323 java实验五 网络编程与安全 任务一 ①编写MyBC.java实现中缀表达式转后缀表达式的功能 ②编写MyDC.java实现从上面功能中获取的表达式中实现后缀表达式求值的功能 基本 ...
- SetFileAttributes
设置文件属性: SetFileAttributes(文件名, 属性值) 读取文件属性:GetFileAttributes(文件名); 读取文件属性 SetFileAttributes(文件名, FIL ...
- 转-C/C++ new与malloc区别
1.属性 new/delete是C++关键字,需要编译器支持.malloc/free是库函数,需要头文件支持. 2.参数 使用new操作符申请内存分配时无须指定内存块的大小,编译器会根据类型信息自行计 ...
- 7 Scatter-loading Features
7.1 About scatter-loading The scatter-loading mechanism enables you to specify the memory map of an ...