px、em、rem等前端开发常见单位有哪些?

时间:2019-11-18 20:44:34 分类:建站知识 阅读:871
摘要:传统的项目开发中,我们只会用到px、%、em这几个单位,它可以适用于大部分的项目开发,并且拥有比较良好的兼容性。
px、em、rem等前端开发常见单位有哪些? 传统的项目开发中,我们只会用到px、%、em这几个单位,它可以适用于大部分的项目开发,并且拥有比较良好的兼容性。但是你知道吗?从css3开始,浏览器对逻辑单位的支持又提升到了另外一个境界,增加了rem、vh、vw、vm等一些新的长度单位,我们可以利用这些新的单位开发出比较良好的响应式页面,随之覆盖多种不同分辨率的终端,包括移动设备等。现在让我们来看下这些长度单位有什么区别。

第一:px

px就是pixel的缩写,意为像素。px就是一张图片最小的一个点,一张位图就是千千万万的这样的点构成的,比如常常听到的电脑像素是1024x768的,表示的是水平方向是1024个像素点,垂直方向是768个像素点。

第二:em

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

第三:rem

css3新单位,相对于根元素html(网页)的font-size,不会像em那样,依赖于父元素的字体大小,而造成混乱。

第四:%

一般宽泛的讲是相对于父元素,但是并不是十分准确。

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

第五:vw

css3新单位,viewpoint width的缩写,视窗宽度,1vw等于视窗宽度的1%。举个例子:浏览器宽度1200px, 1 vw = 1200px/100 = 12 px。

第六:vh

css3新单位,viewpoint height的缩写,视窗高度,1vh等于视窗高度的1%。举个例子:浏览器高度900px, 1 vh = 900px/100 = 9 px。

第七:vm

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

以上就是网页前端开发常见单位了,希望对前端学习的小伙伴们有帮助哦!如果需要前端开发外包服务,可以找我们金柚互联,一般网页前端在150-220一个页面,根据动效和切图难度而定,具体可咨询客服!

珈文网络凭借6年专业企业网站建设经验,坚持以“帮助中小企业实现网络营销化”为宗旨,累计为1200多家中小企业客户提供品质建站服务,得到了客户的一致好评。如果您有公司网站建设优化、公司网站改版、竞价落地页设计、域名注册、主机空间租赁、手机网站建设、网站备案、小程序开发、APP开发、企业宣传视频制作、万词霸屏等方面的需求,请点击QQ咨询我们或拨打咨询热线:158 155 17902(同微信)吧。
声明:本文来自网友投稿,本站免一切责任,如有侵权,请联系小编删除。
链接:https://www.jin-you.com/news/821.html

需要做网站还是小程序?

欢迎联系我们,我们可以提供企业网站建设、小程序开发、外贸独立站、商城建设等IT外包服务

您身边的【企业建站服务专家】

搜索千万次不如咨询1次

主营项目:各类网站建设,电商套图设计,小程序开发,外贸独立站建设等

立即咨询 400 188 2712
在线客服
嘿,我来帮您!