UI设计CSS网页基本单位知多少？奇酷学院告诉你

UI设计CSS网页基本单位知多少？奇酷学院告诉你

　　想要成为一名合格的前端工程师，会写网站页面绝对不能少，而如果想要网站页面写得出彩，你必须要知道一些网页页面常用的基本单位。

　　在传统的项目建设开发中，我们常常会用到px、%、em这几个单位，因为它能适用于大部分的项目建设开发，而且拥有比较良好的兼容性。但素，你造吗？从CSS3开始，查看浏览器对逻辑单位的支持又提高提升到了另外一个境界，提升增加了rem、vw、vh、vm等一些新的长度单位，我们可以用这些新的单位建设开发出比较良好的自适应响应式网站页面，以此可以覆盖多种不同分辨率的设备，包括包含手机端移动设备等。

　　那么，接下来我们分别来分析下，这些常用到的单位分别是什么。

　　1．px

　　px就是pixel的缩写，像素，相对长度单位，像素是相对于显示器屏幕分辨率而言。例如常常听到的电脑像素是1024x768的，表示的是水平方向是1024个像素点，垂直方向是768个像素点。再例如，px就可以认为是一张image图片最小的一个点，一张位图就是千千万万的这样的点构成的。

　　2.em

　　相对长度单位，参考对象是父元素的font-size，具有继承的特点，如果当前行内文本信息的字体尺寸未被配置设置，查看浏览器使用默认字体尺寸（16px），整个网站页面内1em也不是一个固定的值。

　　3.%

　　一般宽泛的讲是相对于父元素，但是并不是绝对的。

　　1）、对于普通元素就是我们理解的相对于父元素

　　2）、对于position: absolute;的元素是相对于已主题定位的父元素

　　3）、对于position: fixed;的元素是相对于ViewPort（可视窗口）

　　4.rem

　　rem是css3的新单位，相对于根元素html（网页页面）的font-size，不会像em那样，依赖于父元素的字体大小，而造成混乱。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只调整修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有查看浏览器均已支持rem。对于不支持它的查看浏览器，应对方式方法也很简单，就是多写一个绝对单位的声明。这些查看浏览器会忽略用rem设定的字体大小。

　　例如：

　　p{font-size:14px;

转载自：UI设计CSS网页基本单位知多少？奇酷学院告诉你

网站建设服务

悉知科技是一个有着12年经验的网站建设开发公司，品牌建站/外贸网站建设/谷歌营销推广/品牌营销策划，这些我们都能帮您搞定！

在线咨询

网站建设制作方案是什么 ? 报价多少钱 ?

获取建站报价