专业网站建设_企业品牌营销 · 北京汇仁智杰科技有限公司

Web前端知識

首頁 > 免費 > Web前端知識 >

css中單位px和em,rem的區(qū)別

來源:北京匯仁智杰科技有限公司   時間:2016-06-23   點擊:

  國內(nèi)的設(shè)計師大都喜歡用px,而國外的網(wǎng)站大都喜歡用em和rem,那么三者有什么區(qū)別,又各自有什么優(yōu)劣呢?
  PX特點
  1. IE無法調(diào)整那些使用px作為單位的字體大小;
  2. 國外的大部分網(wǎng)站能夠調(diào)整的原因在于其使用了em或rem作為字體單位;
  3. Firefox能夠調(diào)整px和em,rem,但是96%以上的中國網(wǎng)民使用IE瀏覽器(或內(nèi)核)。
  px像素(Pixel)。相對長度單位。像素px是相對于顯示器屏幕分辨率而言的。(引自CSS2.0手冊)
  em是相對長度單位。相對于當(dāng)前對象內(nèi)文本的字體尺寸。如當(dāng)前對行內(nèi)文本的字體尺寸未被人為設(shè)置,則相對于瀏覽器的默認(rèn)字體尺寸。(引自CSS2.0手冊)
  任意瀏覽器的默認(rèn)字體高都是16px。所有未經(jīng)調(diào)整的瀏覽器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。為了簡化font-size的換算,需要在css中的body選擇器中聲明Font-size=62.5%,這就使em值變?yōu)?16px*62.5%=10px, 這樣12px=1.2em, 10px=1em, 也就是說只需要將你的原來的px數(shù)值除以10,然后換上em作為單位就行了。
  EM特點
  1. em的值并不是固定的;
  2. em會繼承父級元素的字體大小。
  所以我們在寫CSS的時候,需要注意兩點:
  1. body選擇器中聲明Font-size=62.5%;
  2. 將你的原來的px數(shù)值除以10,然后換上em作為單位;
  3. 重新計算那些被放大的字體的em數(shù)值。避免字體大小的重復(fù)聲明。
  也就是避免1.2 * 1.2= 1.44的現(xiàn)象。比如說你在#content中聲明了字體大小為1.2em,那么在聲明p的字體大小時就只能是1em,而不是1.2em, 因為此em非彼em,它因繼承#content的字體高而變?yōu)榱?em=12px。
  rem特點
  rem是CSS3新增的一個相對單位(root em,根em),這個單位引起了廣泛關(guān)注。這個單位與em有什么區(qū)別呢?區(qū)別在于使用rem為元素設(shè)定字體大小時,仍然是相對大小,但相對的只是HTML根元素。這個單位可謂集相對大小和絕對大小的優(yōu)點于一身,通過它既可以做到只修改根元素就成比例地調(diào)整所有字體大小,又可以避免字體大小逐層復(fù)合的連鎖反應(yīng)。目前,除了IE8及更早版本外,所有瀏覽器均已支持rem。對于不支持它的瀏覽器,應(yīng)對方法也很簡單,就是多寫一個絕對單位的聲明。這些瀏覽器會忽略用rem設(shè)定的字體大小。下面就是
  一個例子:
  p {font-size:14px; font-size:.875rem;}
  注意:
  選擇使用什么字體單位主要由你的項目來決定,如果你的用戶群都使用最新版的瀏覽器,那推薦使用rem,如果要考慮兼容性,那就使用px,或者兩者同時使用。

網(wǎng)絡(luò)營銷推廣 . 北京匯仁智杰科技有限公司!

地址:北京市昌平區(qū)回龍觀龍冠大廈5層
咨詢:13370157521
業(yè)務(wù)QQ:373002979
E - mail:sales @ huirenzhijie.com
企業(yè)網(wǎng)站備案:京ICP備15021091號-1

匯仁智杰與眾不同

  • 有網(wǎng)絡(luò)推廣經(jīng)驗
  • 有網(wǎng)站建站隊伍
  • 有大型網(wǎng)站建設(shè)經(jīng)驗
  • 致力于營銷型網(wǎng)站建設(shè)
  • 始終堅持技術(shù)和服務(wù)同樣重要
查看PC版網(wǎng)站
備案號:京ICP備15021091號-1 版權(quán)所有:匯仁智杰

主站蜘蛛池模板: 液压支架配件|液压支架立柱|液压支架千斤顶|液压支架换向阀|液压支架乳化油|液压支架密封件-山东卓力生产厂家 | 铝合金锻造|链轮曲柄-同力铝业股份有限公司 | 市南人才网_市南招聘网_求职找工作平台 | 无锡防火门-防火窗-防火卷帘门-福臣门业科技有限公司 | 形创(CREAFORM)3D扫描仪|三维检测|三维数字化处理|3D设备租赁|3D打印|——北京中显恒业仪器仪表有限公司 | 免费的PPT幻灯片演示制作软件,动画视频及课件制作软件 - Focusky万彩演示大师官网 | 山东万利精密机械制造有限公司-高速金属圆锯机,数控高速圆锯机,高速圆锯机生产厂家 | 装备升级改造I成都星迅通科技有限公司-成都星迅通科技有限公司官方网站 | 压力容器锻件_升高法兰_管板_阀体_接管锻件 - 山西中重重工集团 压力机-压装机-黄油机-黄油泵-[广东品嘉灵]专业定制各种精密压装设备 | 深圳市新纶超净科技有限公司,防静电/洁净室行业系统解决方案提供商 | 暖家乐散热器_天津市暖家乐金属制品有限公司 | 蒸汽发生器-电加热蒸汽发生器、燃油蒸汽发生器、燃气蒸汽发生器设备厂家-诺贝思蒸汽发生器 | 排水PVC管-PVC排污管-给水PVC管-电线PVC管-米阳建材pvc管厂 | 豪顺物流官网-南京物流公司,南京货运公司「全国专线配送」 | 气动法兰软密封蝶阀-电动高温通风蝶阀-气动开关球阀-川沪阀门 | 金酱酒_金酱酒代理加盟招商_OEM贴牌企业定制! – 金酱酒代理加盟!茅台镇较早的酿酒烧坊,年产优质酱香白酒5000余吨,仁怀市十强白酒企业,主营主品:金酱酒、金酱陈香酒、酱香老酒等系列品牌产品 | 减速电机-调速电机-四大系列减速机-减速电机厂家-深圳市鑫希田机电有限公司官网 | 升降炉|推板炉|创卓炉业 | 石牌坊价格_石雕农村门楼图片_石牌楼雕刻制作 _ 长城石雕 | 上海拓展训练_上海拓展培训_上海团建活动_上海团建策划 | 天象文仪办公家具,25年一站式配齐经验厂家-办公家具官网 | 智能化会议系统|多媒体会议系统|无纸化会议系统|会议音箱|高清视频会议终端|智能化会议室|会议系统|视频会议系统-深圳市航视达科技有限公司 | 济宁三石工程机械有限公司-首页-小型起重机、环卫设备、小松配件 | 呼吸家官网|肺功能检测仪生产厂家|国产肺功能仪知名品牌|肺功能检测仪|肺功能测试仪|婴幼儿肺功能仪|弥散残气肺功能仪|肺功能测试系统|广州红象医疗科技有限公司|便携式肺功能仪|大肺功能仪|呼吸康复一体机|儿童肺功能仪|肺活量计|医用简易肺功能仪|呼吸康复系统|肺功能仪|弥散肺功能仪(大肺)|便携式肺功能检测仪|肺康复|呼吸肌力测定肺功能仪|肺功能测定仪|呼吸神经肌肉刺激仪|便携式肺功能 | 中科迈金节能技术(浙江)有限公司 | 通道闸-人行通道闸|通道闸机系统厂家-深圳伊帕克智能科技有限公司 | 首页|广东蒙泰高新纤维股份有限公司|丙纶细旦丝|丙纶异形丝|丙纶FDY网络丝 - 广东蒙泰高新纤维股份有限公司 | 苏州不锈钢_江苏不锈钢_江苏不锈钢板_苏州模具钢_苏州合金钢_苏州特种合金_苏州不锈钢板_304不锈钢棒_苏州塞硒五金制品有限公司 苏州ERP定制|苏州CRM|苏州OA|苏州BPM|进销存管理系统-苏州中尚信息科技有限公司 | 扭矩测试仪_拉力测试仪_扭力扳手测试仪_测试台-上海铸衡电子科技有限公司 | 烧腊培训,广东有实力的烧腊培训[免费试吃],广式烧鸭培训-烧鹅培训-学烧腊选广州嘉政 | 嘉兴中诚环保科技股份有限公司_PVC_润滑剂_抗氧剂_辅助热稳定剂 嘉兴市南湖斋食品股份有限公司_南湖斋 | 江西蔬菜配送,南昌蔬菜配送,南昌食堂承包,江西饭堂承包-江西菜篮子农产品发展有限公司 | 南尔智能科技 南尔 小南管家 智慧中控屏 智能语音面板 - 深圳市南尔智能科技有限公司 | 重大事件回顾:三亚哪里可以打炮?2025年最全实战攻略带你玩转真枪射击 | 芜湖净水设备-纯水设备-无负压供水设备-不锈钢水箱-芜湖市百川给水设备有限责任公司 | 轮式挖掘机厂家_抓铁机_全自动混凝土搅拌车_山重机械【官网】 | 重庆木门_重庆木门十大品牌_重庆套装门_重庆烤漆门_重庆套装门十大品牌_重庆木门一线品牌_重庆川田木门 | 石膏砂浆生产线_特种砂浆生产线_轻质抹灰石膏设备-青岛环港重工科技有限公司 | 加力管钳,液压动力钳,液压转盘-加力管钳,液压动力钳,液压转盘,山东临朐静远石油机械有限公司 | 铝合金百叶窗_西安百叶窗厂家-西安市未央区通达建材物资部 | 商标注册_北京商标注册费用_申请商标注册代理机构_北京商标注册公司- |