css中的单位

vh: 相对于视窗的高度, 视窗被均分为100单位的vh;
vw: 相对于视窗的宽度, 视窗被均分为100单位的vw;

vmax: 相对于视窗的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax;
vmin: 相对于视窗的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin;
视区所指为浏览器内部的可视区域大小,
即window.innerWidth/window.innerHeight大小,不包含任务栏标题栏以及底部工具栏的浏览器区域大小。

calc
calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,用来指定元素的长度。比如说,你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。为何说是动态值呢?因为我们使用的表达式来得到的值。不过calc()最大的好处就是用在流体布局上,可以通过calc()计算得到元素的宽度。

calc是 css3提供的一个在css文件中计算值的函数:

用于动态计算长度值。
需要注意的是,运算符前后都需要保留一个空格,例如:width: calc(100% - 10px);
任何长度值都可以使用calc()函数进行计算;
calc()函数支持 “+”, “-“, “*”, “/” 运算;
calc()函数使用标准的数学运算优先级规则;
calc(100vh - 10px) 表示整个浏览器窗口高度减去10px的大小
calc(100vw - 10px) 表示整个浏览器窗口宽度减去10px的大小

转载https://blog.csdn.net/wkj001/article/details/94872296?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_baidulandingword-0&spm=1001.2101.3001.4242
转载的地址

1.背景介绍

我们为什么要选择合适的网页设计单位

随着Web的发展,对新的解决方案的需求也会继续增大,对网页的要求更高。

网页设计单位是涉及到我们布局的效果,使用不同的单位会对最终的demo,会有影响。

现在都是要求响应式设计,需要适配各种设备,电脑,手机,平板。如果单位不合适,可能在这个设备显示良好,那个设备就会打乱布局。

所以需要我们选择合适的单位来进行开发,设计。
2.知识剖析

1、px

px就是pixel的缩写,意为像素。px就是设备或者图片最小的一个点,比如常常听到的电脑像素是1024x768的,表示的是水平方向是1024个像素点,垂直方向是768个像素点。

是我们网页设计常用的单位,也是基本单位。通过px可以设置固定的布局或者元素大小,缺点是没有弹性。

特点是1. em的值并不是固定的; 2. em会继承父级元素的字体大小。

2、em

参考物是父元素的font-size,具有继承的特点。如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值。
特点是1. em的值并不是固定的; 2. em会继承父级元素的字体大小。
3、rem

rem是相对于根元素html,这样就意味着,我们只需要在根元素确定一个参考值,可以设计HTML为大小为10px,到时设置1.2rem就是12px.以此类推。

优点是,只需要设置根目录的大小就可以把整个页面的成比例的调好。

4、%

一般来说就是相对于父元素的,

1、对于普通定位元素就是我们理解的父元素 2、对于position: absolute;的元素是相对于已定位的父元素 3、对于position: fixed;的元素是相对于ViewPort(可视窗口),
5、vw

css3新单位,view width的简写,是指可视窗口的宽度。假如宽度是1200px的话。那10vw就是120px

举个例子:浏览器宽度1200px, 1 vw = 1200px/100 = 12 px。

6、vh

css3新单位,view height的简写,是指可视窗口的高度。假如高度是1200px的话。那10vh就是120px

举个例子:浏览器高度900px, 1 vh = 900px/100 = 9 px。

7、vm

css3新单位,相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vm 举个例子:浏览器高度900px,宽度1200px,取最小的浏览器高度,1 vm = 900px/100 = 9 px。

兼容性太差 ,现在基本上没人用,我试了一下Chrome就用不了。

3.常见问题

假如使用em来设置文字大小要注意什么?

4.解决方案

注意父元素的字体大小,因为em是根据父元素的大小来设置的。比如同样是1.5em,要是父元素是20,那1.5em就是30px.要是父元素是30px,1.5em就是45px.

特别是在多重div嵌套里面更要注意。

5.扩展思考

css还有哪些长度单位?

in:寸

cm:厘米

mm:毫米

t:point,大约1/72寸

pc:pica,大约6pt,1/6寸

转载地址 https://blog.csdn.net/weixin_42192534/article/details/80289782?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.control

添加链接描述

上一篇:屏幕自适应方法和input框添加一个单位


下一篇:P3628 [APIO2010]特别行动队 单调队列优化dp