认识达内从这里开始

认真做教育专心促就业

东莞web培训介绍前端页面的弹性布局

发布：东莞
来源：达内新闻
时间：2021-07-09 10:37

东莞web培训介绍前端页面的弹性布局

本文东莞web前端培训机构小编想和大家一起来说说前端页面之弹性布局(rem/em布局)，希望大家通过学习可以简单的了解一下。

rem/em区别：rem是相对于html元素的font-size大小而言的，而em是相对于其父元素。

使用 em 或 rem 单位进行相对布局，相对%百分比更加灵活，同时可以支持浏览器的字体大小调整和缩放等的正常显示，因为em是相对父级元素的原因没有得到推广。【中国站点制作网页的时候，习惯用CSS强制定义字体大小，保证每个人都看到一致的效果，包括网易、搜狐这些门户网站在内的大部分站点，用的都是绝对单位px(像素)。但是，如果从网站易用性方面考虑，字体大小应该是可变的，一些视力不是那么好的人需要放大字体才能看得清页面内容。然而，占据大部分浏览器市场的IE无法调整那些使用px作为单位的字体大小。国外人士非常重视网站的易用性，相当一部分外国站点已经使用em作为字体单位。

这类布局的特点是，包裹文字的各元素的尺寸采用em/rem做单位，而页面的主要划分区域的尺寸仍使用百分数或px做单位(同「流式布局」或「静态/固定布局」)。早期浏览器不支持整个页面按比例缩放，仅支持网页内文字尺寸的放大，这种情况下。使用em/rem做单位，可以使包裹文字的元素随着文字的缩放而缩放。

浏览器的默认字体高度一般为16px，即1em:16px，但是 1:16 的比例不方便计算，为了使单位em/rem更直观，CSS编写者常常将页面跟节点字体设为62.5%，比如选择用rem控制字体时，先需要设置根节点html的字体大小，因为浏览器默认字体大小16px*62.5%=10px。这样1rem便是10px，方便了计算。

用em/rem定义尺寸的另一个好处是更能适应缩进/以字体单位padding或margin/浏览器设置字体尺寸等情况(因为em/rem相对于字体大小，会同步改变)。例如：p{ text-indent: 2em; }。

使用rem单位的弹性布局在移动端也很受欢迎。

其实在移动端使用所谓的弹性布局，是比较勉强的。移动端弹性布局流行起来的原因归根结底是rem单位对于(根据屏幕尺寸)调整页面的各元素的尺寸、文字大小时比较好用。其实，使用vw、vh等后起之秀的单位，可以实现完美的流式布局(高度和文字大小都可以变得“流式”)，弹性布局就不再必要了。

东莞达内IT培训免费试听课程火热报名中，带你轻松入行，26大课程全国45个城市，129家中心均可就近学习，学完后，达内老师会帮助进行面试辅导，在面试前，就带你跨过可能存在的坑，让你入职更加顺利。

【免责声明】本文系本网编辑部分转载，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题，请在30日内与管理员联系，我们会予以更改或删除相关文章，以保证您的权益!更多内容请添加3216764521学习了解。欢迎关注“达内在线”参与分销，赚更多好礼。

< 上一篇：东莞IT培训人工智能专业如何？未来会饱和吗？

下一篇：东莞计算机培训IT软件开发人员需知的数据库 >