重庆网站建设企业,网站开发所涉及的技术,wordpress 无觅,北京南站到故宫地铁怎么坐文章目录 1. 单位类型与相对基准2. 相对长度1.em2.rem3.%百分比4.vw 和 vh5.vmin 和 vmax6.vm7.ch8. ex 3. 总结 1. 单位类型与相对基准
单位名称单位类型 #xff08;相对/绝对#xff09;相对基准px相对屏幕像素缩放后的尺寸百分比相对font-size相对于继承#xff0c;wid… 文章目录 1. 单位类型与相对基准2. 相对长度1.em2.rem3.%百分比4.vw 和 vh5.vmin 和 vmax6.vm7.ch8. ex 3. 总结 1. 单位类型与相对基准
单位名称单位类型 相对/绝对相对基准px相对屏幕像素缩放后的尺寸百分比相对font-size相对于继承width相对与父元素em相对相对于本元素的font-sizerem相对根元素
2. 相对长度
1.em
相对于所在容器的font-size属性若自身没有设置font-size属性则相对于浏览器的默认字体尺寸。
相当于“ 倍” 比如设置当前的 div 字体大小为 1.5em则当前的 div 的字
体大小为当前 div 继承的字体大小*1.5 倍。
可以指定到小数点后三位比如“1.234em”
一般浏览器默认字体大小是16px, 则1em 16px, 2em 32px
如果用户通过浏览器的UI控件缩放页面改变了文字的大小那么我们整个页面也会进行放大或缩小。兼容性良好
示例 在浏览器中输出3种字体大小的文字展示em的作用。
!DOCTYPE htmlhtml langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title体验em/titlestylestyle.div{font-size:30px;}.p{font-size:2em;}.span{font-size:0.5em;}/style/style/headbodydiv classdivdiv 标签中的文字大小为 30pxp classpP 标签中的文字大小为 2remspan classspanspan 标 签 中 的 文 字 大 小 为 0.5rem/span/p/div/body/html2.rem
r 是 root 的意思就是相对于根节点的font-size属性来进行缩放如果有嵌套的关
系嵌套关系的元素的字体大小始终按照根节点的font-size属性进行缩放。
只要修改根元素就可以成比例的调整所有字体大小还可以避免字体大小逐层复合的连锁反应。兼容性IE9、火狐 3.6、 safari5.0
示例 在浏览器中输出3种字体大小的文字展示rem的作用。
!DOCTYPE htmlhtml langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title体验rem/titlestylestylehtml{font-size:16px;}.div{font-size:30px;}.p{font-size:1rem;}.span{font-size:0.5rem;}/style/style/headbodydiv classdivdiv 标签中的文字大小为 30pxp classpP 标签中的文字大小为 1remspan classspanspan 标 签 中 的 文 字 大 小 为 0.5rem/span/p/div/body/html浏览器显示内容 3.%百分比
宽泛的讲是相对于父元素但是并不是十分准确
1对于普通定位元素就是我们理解的父元素
2对于position: absolute;的元素是相对于已定位的父元素
3对于position: fixed;的元素是相对于 ViewPort可视窗口
4.vw 和 vh
vw和vh是视口viewport units单位何谓视口顾名思义视口即为可视窗口。
分两种情况
1.在pc端视口指pc端中浏览器的可视区域
2.在移动端移动端的视口分三种Layout Viewport布局视口、 Visual Viewport视觉视口、Ideal Viewport理想视口这三个视口的区别不多赘述这里指的是Layout Viewport布局视口。
vw和vh根据你浏览器窗口的大小的单位不受显示器分辨率的影响是不是很神奇这就代表了我们不需要顾虑到现在那么多不同电脑有关分辨率的自适应问题。
对于视口viewpoint的宽度或者高度。1vw等于视口宽度的1%1vh等于视口高度的1%。兼容性高版本浏览器均支持。
eg: 视口被均分为100单位的vw屏幕宽375px,1vw3.75px视口被均分为100单位的vh屏高1200px,1vh12px;
vw、vh与%百分比的区别
1% 是相对于父元素的大小设定的比率vw、vh 是视口大小决定的。
2vw、vh 优势在于能够直接获取高度而用 % 在没有设置 body 高度的情况下是无法正确获得可视区域的高度的所以这是挺不错的优势。
3对于横竖屏背景铺满的问题使用%在ipx可能存在安全留白区域
4vh是相对视口高度计算尺寸, 需要考虑全面屏视口高度尺寸偏大
5本质用vw和vh都可以,千万别一个盒子的宽高vw和vh混用
注意视口单位区别于%单位视口单位是依赖于视口的尺寸根据视口尺寸的百分比来定义的而%单位则是依赖于元素的祖先元素。
示例 在浏览器中绘制一个长方形的粉色矩形宽为浏览器的宽高为浏览器的高的一半。
改变浏览器窗口大小不是放大缩小页面粉色矩形的宽高相对于浏览器的宽高比例不变。
展示vw和vh的作用。
!DOCTYPE htmlhtml langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title体验vw和vh/titlestyle .box {width: 100vw;height: 50vh;background-color: pink;} /style/headbodydiv classbox/div/body/html浏览器显示内容
5.vmin 和 vmax
vmin是当前 vw 和 vh 中较小的一个值vmax是当前 vw 和 vh 中较大的一个值。
做移动页面开发时如果使用 vw、wh 设置字体大小比如 5vw在竖屏和横屏状态下显示的字体大小是不一样的。
由于 vmin 和 vmax 是当前较小的 vw 和 vh 和当前较大的 vw 和 vh。这里就可以用到 vmin 和 vmax。使得文字大小在横竖屏下保持一致。
示例 不断改变浏览器大小会看到粉色矩形大小不断变化。展示vmin的作用。
!DOCTYPE htmlhtml langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title体验vmin/titlestyle .box {width: 50vmin;height: 100vmin;background-color: pink;} /style/headbodydiv classbox/div/body/html浏览器显示内容
vmax与vmin类似自行尝试此处不做赘述。
如果你要让这个元素始终铺满整个视口的可见区域将height和width的值改为100vmax
.box {height: 100vmax;width: 100vmax;}6.vm
css3新单位相对于视口的宽度或高度中较小的那个。
最小的那个被均分为100单位的vm举个例子浏览器高度900px宽度1200px取最小的浏览器高度 1 vm 900px/100 9 px。
由于现在vm的兼容性较差这里就不做展示了。
7.ch
数字0的宽度
8. ex
依赖于英文字母小x的高度
3. 总结
css中的长度单位一共有8个分别是pxemptexpcinmmcm
px,em和rem用的较多em和rem是用来适配不同屏幕的最终也会换算成px来进行布局因此对于精确度没有限制
1网页布局中一般都是用px。
2百分比一般宽泛的讲是相对于父元素自适应网页布局用的多。
3viewport可视窗口也就是浏览器。
calc()使用通用的数学运算规则但是也提供更智能的功能
使用“”、“-”、“” 和 “/”四则运算
可以使用百分比、px、em、rem等单位
可以混合使用各种单位进行计算
表达式中有“”和“-”时其前后必须要有空格如widht: calc(12%5em)这种没有空格的写法是错误的
表达式中有“”和“/”时其前后可以没有空格但建议留有空格。
例如 设置div元素的高度为当前窗口高度-100px
div{height: calc(100vh - 100px);}一般用来设置流式布局宽高当然你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值
calc()的兼容性如下:
实际使用时同样需要添加浏览器的前缀:
.elm {/*Firefox*/-moz-calc(expression);/*chrome safari*/-webkit-calc(expression);/*Standard */calc();}4chrome强制最小字体为12号即使设置成 10px 最终都会显示成 12px当把html的font-size设置成10px,子节点rem的计算还是以12px为基准所以网上很多文章提到的将html的font-size设为10方便计算不是那么可取。
5vw、vh、vmin、vmax 使用的前提是在移动端的前提下即首先申明个的缩放比例。
链接https://blog.csdn.net/xijinno1/article/details/132332263
