请选择时期:
怀孕准备 怀孕 分娩 宝宝0-1岁 宝宝1-3岁 宝宝3-6岁

em是什么意思 ems是什么意思

来源: 最后更新:24-04-17 09:02:59

导读:em是什么意思(女生聊天总发em)。本站来告诉相关信息,希望对您有所帮助。国内的设计师大都喜欢用px,而国外网站喜欢em和rem,三者之间有什么区别?px:实际就是像素,用px设置字体大小比较精准和稳

em是什么意思(女生聊天总发em)。本站来告诉相关信息,希望对您有所帮助。

国内的设计师大都喜欢用px,而国外网站喜欢em和rem,三者之间有什么区别?

px:实际就是像素,用px设置字体大小比较精准和稳定。

px特点:

px是绝对单位。

浏览器页面缩放时,px并不能跟随变化,所以无法调整使用px作为单位的字体大小。国外的大部分网站能够调整原因在于使用rem或em作为字体单位。Firefox能够调整px和rem和em,但是大部分的国产浏览器使用IE内核。

em:就是以父级作为基准来缩放字体大小。

em特点:

Em是相对单位。Em的值并不固定,受到父级字体大小的影响。

rem:以于根元素作为基准来缩放字体大小的。

rem特点:

rem是相对单位,受到根元素字体大小影响。修改根元素就可以成比例地调整所有。避免字体大小逐层复合的连锁反应。

Em和rem单位区别:

单位基于:em 基于使用他们的元素的字体大小 。rem基于 html 元素的字体大小。继承 :em可能受任何继承的父元素字体大小影响。 rem可以从浏览器字体设置中继承字体大小。使用情况: 使用em单位应根据组件的字体大小而不是根元素的字体大小。不使用em单位,并且需要根据浏览器的字体大小设置缩放的情况下使用rem。 而使用rem单位,除非你确定你需要 em 单位,包括对字体大小。

绘制页面的时候具体使用什么单位主要由项目来决定,如果不考虑低版本浏览器兼容问题,那就使用rem,如果兼容低版本IE就使用px,或者两者同时使用。

Px设置字体大小时存在问题:对浏览器进行缩放时,页面布局会乱,这时就需要使用rem或em来定义字体大小。

制作手机自适应网页,由于手机宽度大小众多,制作一个响应式网页,手机宽度越大字体越大,就像一张图片一样进行缩放。给大家分享一个rem的插件:

(function(doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange': 'resize', recalc = function() {  var clientWidth = docEl.clientWidth;  if (!clientWidth) return;  if (clientWidth >= 560) {   clientWidth = 560;  } docEl.style.fontSize = 100 * (clientWidth / 750) + 'px'; }; if (!doc.addEventListener) return; recalc(); win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false);})(document, window);

标签: [db:关键词]  

免责声明:本文系转载,版权归原作者所有;旨在传递信息,其原创性以及文中陈述文字和内容未经本站证实。

本文地址:http://www.jxyuer.com/news/jiaodian/454393.html

声明: 本站文章均来自互联网,不代表本站观点 如有异议 请与本站联系 联系邮箱:jxyuer#foxmail.com (请把#替换成@)

关于我们 | 广告服务 | 网站合作 | 免责声明 | 联系我们| 网站地图

© 2022-2024 江西育儿网 all rights reserved. 沪ICP备2023005727号-3