vw、vh、vmin、vmax、em、rem的使用详解
转载自:https://blog.csdn.net/ZNYSYS520/article/details/76053961
1,vw、vh、vmin、vmax 的含义
- vw:视窗宽度的百分比(1vw 代表视窗的宽度为 1%)
- vh:视窗高度的百分比
- vmin:当前 vw 和 vh 中较小的一个值
- vmax:当前 vw 和 vh 中较大的一个值
2,vw、vh 与 % 百分比的区别
3,vmin、vmax 用处
4,em, rem
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸.
1. em的值并不是固定的;
2. em会继承父级元素的字体大小。
任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。
为了简化font-size的换算,需要在css中的html选择器中声明Font-size=62.5%,这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em。
vw、vh、vmin、vmax、em、rem的使用详解的更多相关文章
- CSS各种度量单位----px、em、%、rem、vh/vw、vmin/vmax
本文主要讲下CSS中各类度量单位的意思和区别. 开发中最常用到的css单位是px.em.%.随着css3的出现,带来了更多的度量单位,这些单位为响应式开发,带来很大的好处.各种单位的浏览器兼容性可以去 ...
- css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
原文地址: http://blog.csdn.net/jyy_12/article/details/42557241 px:绝对单位,页面按精确像素展示 em:相对单位,基准点为父节点字体的大小,如果 ...
- 深度解析使用CSS单位px、em、rem、vh、vw、vmin、vmax实现页面布局
1.px:绝对单位,页面按精确像素展示 2.em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值. e ...
- css中px em rem vw vh vmax vmin等单位的区别--转载
px:绝对单位,页面按精确像素展示 em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值. rem:相对 ...
- css单位介绍em ex ch rem vw vh vm cm mm in pt pc px
长度单位主要有以下几种em ex ch rem vw vh vm cm mm in pt pc px %,大概可以分为几种"绝对单位"和"相对单位"和" ...
- css3 em rem等单位的区别
px:绝对单位,页面按精确像素展示 em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值. rem:相对 ...
- CSS3自适应字体大小(vw vh)
viewpoint css3提供了一些与当前viewpoint相关的元素,vw,vh,vmin, vmax等. “viewpoint” = window size vw = 1% of viewpor ...
- 视区相关单位vw, vh..简介以及可实际应用场景
这篇文章发布于 2012年09月24日,星期一,01:15,归类于 css相关. 阅读 37012 次, 今日 12 次 by zhangxinxu from http://www.zhangxinx ...
- 视区相关单位vw, vh..简介以及可实际应用场景——张鑫旭
一.N多的唠哩唠叨 CSS3中一些新的单位早在去年春暖花开的时候就介绍了,参见:CSS长度值及时间.频率.角度单位.显然,其中就提到了本文要感叹的单位vw, vh,见下图: 不过“我看见你”和“我触碰 ...
随机推荐
- 使用Apache JMeter对SQL Server、Mysql、Oracle压力测试(一)
前段时间面试被问到了数据库方面的知识:比如选择什么样的数据库,如何优化,怎么加索引,于是想到了自己动手测试一下常用数据库的性能: 第一步,下载好JMeter之后打开运行.话说这个JMeter打开还真是 ...
- 装PIL库
pip install Pillow -i http://mirrors.aliyun.com/pypi/simple/ --trusted-host mirrors.aliyun.com
- POJ 1159 Palindrome(最长公共子序列)
Palindrome [题目链接]Palindrome [题目类型]最长公共子序列 &题解: 你做的操作只能是插入字符,但是你要使最后palindrome,插入了之后就相当于抵消了,所以就和在 ...
- C#学习笔记(2)
1.获取当前可用串口端口号 using System.IO.Ports; string[] portNames = SerialPort.GetPortNames(); 2.TextBox换行.设置光 ...
- spring boot 整合 百度ueditor富文本
百度的富文本没有提供Java版本的,只给提供了jsp版本,但是呢spring boot 如果是使用内置tomcat启动的话整合jsp是非常困难得,今天小编给大家带来spring boot整合百度富文本 ...
- 设置和获取cookie
通过make_response(“响应体”)创建response响应对象. 然后返回. 与直接return “响应体” 是一样的. 但是这里我们需要用到response响应对象,去设置cookie @ ...
- CentOS 7 Nginx1.12.2平滑升级到新版本nginx-1.13.3
查看当前Nginx版本信息 [root@web ~]# /usr/local/nginx/sbin/nginx -V nginx version: nginx/ built by gcc (Red H ...
- linux下python3(Setup)项目
新建setup.py文件 写入 from setuptools import setup setup( name='tickets', #定义你项目的名称 py_modules=['tickets', ...
- Maven项目集成Jetty
1.新建webapp maven项目. 项目目录结构如下. 2.pom文件添加jetty构建. <project xmlns="http://maven.apache.org/POM/ ...
- Mac 下 实现终端跳转 服务器 不用输入密码
首先需要安装 expect 安装 expect 需要 tcl 依赖 第一步 下载tcl http://www.tcl.tk/software/tcltk/downloadnow84.tml 将下载好 ...