视窗单位 vs 百分比单位
来源:互联网 发布:洛丽帕女装有淘宝店吗 编辑:程序博客网 时间:2024/04/28 21:19
声明:
本文大部分内容属于摘录,引用原文地址如下:
视窗单位 vs 百分比单位
视窗(Viewport)单位
视窗(Viewport)单位是相对单位,意味着它们没有客观的尺寸。它们的大小是由视窗(Viewport)大小决定的。下面是四个与视窗(Viewport)有关的单位。
我将集中讨论前两个单位,因为它们更可能被使用。
在很多情况下,视口单位(vh和vw)和百分比单位在它们可以实现的功能方面是重叠的。然而,它们每个都有其明显的优点和缺点。概括的说:
//当处理宽度的时候,%单位更合适。处理高度的时候,vh单位更好。著作权归作者所有。
1、处理宽度时,%表示的是html或者body的比例。然而vm单位根据视窗的宽度决定它的大小。他们之间细微的区别在于,浏览器的视窗包含了两边的滚动条和边框等。因为应以内容为标准,所以推荐使用百分比。
2、处理高度时
在另一方面,当使一个元素跨越整个页面的高度时,vh远比百分比单位好。
因为用百分比定义的元素的大小是由它的父元素决定的,只有父元素也填满整个屏幕的高度时我们才能拥有一个填满整个屏幕的高度的元素。这通常意味着我们不得不把元素定位成固定的,为了使元素的父元素为html元素,或者依赖一些程序。
只需要设置它的vh
.box { height: 100vh;}
更多效果请参考原地址。
0 0
- 视窗单位 vs 百分比单位
- css中的视窗单位
- 基于视窗单位的排版
- 基于视窗单位的排版
- margin与百分比单位
- css中的百分比单位详解
- CSS中如何使用视窗单位
- CSS之基于视窗单位的排版
- 单位
- 单位
- 单位
- 单位
- 宽度百分比单位的转换公式
- CSS的单位及line-height百分比
- CSS3视窗单位vw、vh、vmin、vmax说明
- CSS3视窗单位vw、vh、vmin、vmax说明
- 数值单位 VS 二进制位数
- 常用长度单位PX/EM/PT/百分比转换公式
- idea多Module出现依赖循环问题----aAnnotation processing is not supported for module cycles
- 88.使用JavaScript发送GET or Post 请求
- java final类
- java实现简单的队列和栈
- 深度学习算法实践3---神经网络常用操作实现
- 视窗单位 vs 百分比单位
- Android 积分签到动画 位移+透明
- Computer Robot
- int main(int argc,char* argv[])详解
- java设计模式之观察者模式
- 位运算
- android(体验一个项目天气预报开发)-0
- 根据前序遍历和中序遍历重建二叉树
- VS2010+VMWare8+VisualDDK1.5.6 创建并调试你的第一个驱动程序