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

Web前端知識(shí)

首頁(yè) > 免費(fèi) > Web前端知識(shí) >

CSS單位em和px的區(qū)別

來(lái)源:北京匯仁智杰科技有限公司   時(shí)間:2015-11-11   點(diǎn)擊:

  這里引用的是Jorux的“95%的中國(guó)網(wǎng)站需要重寫(xiě)CSS”的文章,題目有點(diǎn)嚇人,但是確實(shí)是現(xiàn)在國(guó)內(nèi)網(wǎng)頁(yè)制作方面的一些缺陷。我一直也搞不清楚px與em之間的關(guān)系和特點(diǎn),看過(guò)以后確實(shí)收獲很大。平時(shí)都是用px來(lái)定義字體,所以無(wú)法用瀏覽器字體放大的功能,而國(guó)外大多數(shù)網(wǎng)站都可以在IE下使用。因?yàn)椋?/p>

  1、IE無(wú)法調(diào)整那些使用px作為單位的字體大??;

  2、國(guó)外的大部分網(wǎng)站能夠調(diào)整的原因在于其使用了em作為字體單位;

  3、Firefox能夠調(diào)整px和em,但是96%以上的中國(guó)網(wǎng)民使用IE瀏覽器(或內(nèi)核)。

  px像素(Pixel)。相對(duì)長(zhǎng)度單位。像素px是相對(duì)于顯示器屏幕分辨率而言的。(引自CSS2.0手冊(cè))

  em是相對(duì)長(zhǎng)度單位。相對(duì)于當(dāng)前對(duì)象內(nèi)文本的字體尺寸。如當(dāng)前對(duì)行內(nèi)文本的字體尺寸未被人為設(shè)置,則相對(duì)于瀏覽器的默認(rèn)字體尺寸。(引自CSS2.0手冊(cè))

  任意瀏覽器的默認(rèn)字體高都是16px。所有未經(jīng)調(diào)整的瀏覽器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。為了簡(jiǎn)化font-size的換算,需要在css中的body選擇器中聲明Font-size=62.5%,這就使em值變?yōu)?16px*62.5%=10px, 這樣12px=1.2em, 10px=1em, 也就是說(shuō)只需要將你的原來(lái)的px數(shù)值除以10,然后換上em作為單位就行了。

  em有如下特點(diǎn):

  1、em的值并不是固定的;

  2、em會(huì)繼承父級(jí)元素的字體大小。

  所以我們?cè)趯?xiě)CSS的時(shí)候,需要注意兩點(diǎn):

  1、body選擇器中聲明Font-size=62.5%;

  2、將你的原來(lái)的px數(shù)值除以10,然后換上em作為單位;

  3、重新計(jì)算那些被放大的字體的em數(shù)值。避免字體大小的重復(fù)聲明。

  也就是避免1.2 * 1.2= 1.44的現(xiàn)象。比如說(shuō)你在#content中聲明了字體大小為1.2em,那么在聲明p的字體大小時(shí)就只能是1em,而不是1.2em, 因?yàn)榇薳m非彼em,它因繼承#content的字體高而變?yōu)榱?em=12px。

  但是12px漢字例外,就是由以上方法得到的12px(1.2em)大小的漢字在IE中并不等于直接用12px定義的字體大小,而是稍大一點(diǎn)。這個(gè)問(wèn)題 Jorux已經(jīng)解決,只需在body選擇器中把62.5%換成63%就能正常顯示了。原因可能是IE處理漢字時(shí),對(duì)于浮點(diǎn)的取值精確度有限。不知道有沒(méi)有其他的解釋。

網(wǎng)絡(luò)營(yíng)銷(xiāo)推廣?。”本﹨R仁智杰科技有限公司!

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

匯仁智杰與眾不同

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

主站蜘蛛池模板: 全网营销_网络推广外包_全网营销代运营公司-湖南微望互动 | 威学一百-专注国际学校择校备考-DSE-A-level-雅思-托福-OSSD-港澳台联考-AP-IGCSE-IB-AMC-多邻国-PTE-SAT-SSAT-小语种(如日语,韩语,德语,法语,西班牙语,意大利语,俄语,泰语)等考试培训,为出国留学学生提供个性化定制性学习方案,线下实体面授+线上网络课程, 提供一对一,小班课等多种班型 | 排水PVC管-PVC排污管-给水PVC管-电线PVC管-米阳建材pvc管厂 | 四川迪瑞机电设备有限公司-容积式换热器|半容积式换热器|容积式换热机组|半容积式水加热器|换热器在线除垢防垢器|迪瑞机电 | 锯骨机-砍排机-全自动锯骨机-商用砍排机-切丁机 - 广州市九盈机械设备有限公司 | 自建房外墙砖|地砖|墙砖,农村|别墅瓷砖-佛山燊陶丰 | 张家港起重搬运吊装,工厂设备搬运服务-张家港易源起重搬运有限公司 | 四方光电(武汉)仪器有限公司_四方仪器首页-烟气分析仪|尾气分析仪|煤气分析仪|沼气分析仪|天然气分析仪|超声波流量计|在线气体分析系统|红外气体传感器 | 江南专汽公司首页-消防车厂家,水罐/泡沫消防车价格(热销品牌) | 惠声电子、广州市惠声电子科技有限公司、VBS、VBS惠声电子、VBS公共广播生产厂家、VBS广播功放生产厂家、VBS会议系统设备批发、VBSIP网络对讲系统厂家、VBS会议系统厂家、VBS智能中控厂家、VBS专业扩声厂家 | 欧洲_西班牙进口_燃木真火壁炉集成服务商_燃木壁炉官方网站.hergom | 通信系统-通信人在线| 山东国新起重机械有限公司,国新起重,起重设备,起重机械,山东起重机厂家,行车,龙门吊 | 瑞安网站建设_网站制作_做网站找瑞安联创网络:专业网页制作、手机网站、SEO百度网站关键字优化 软文营销推广-新闻稿发布-软文撰写-百科词条编辑-品牌全案策划推广网络营销传播-喜尚传媒 | 箱包定制_广州箱包厂_双肩电脑背包_双肩旅行包_拉杆箱包_商务公文包_包包批发,深圳爱自由,礼品箱包定制,电话:400-0061-690 | 线宽测试仪丨光调制分析仪丨调制器 卓越光子-专注于光电解决方案 | 网站建设|外贸网站建设|做网站公司-济南超越互联-推荐 | 永磁耦合_重载永磁软起_能量回馈式调速器_磁力耦合器_江苏磁谷科技股份有限公司官方网站 | 郑州四棉纺织有限公司-现代化纺织企业 | 潍坊网络推广,临沂360推广,东营360推广,枣庄360推广,潍坊网站建设,潍坊网络公司,潍坊360搜索,潍坊APP开发,潍坊360推广,潍坊360代理,潍坊点睛网络科技有限公司 | 塑胶篮球场施工|塑胶网球场施工|幼儿园塑胶施工|石家庄亚强体育公司 | 指挥调度|调度系统|应急指挥调度|应急指挥|可视化调度|多媒体指挥调度|融合通信|综合调度|应急指挥系统|IP调度系统-北京瑞光极远数码科技有限公司 | 煤炭烘干机|煤泥烘干机|矿泥烘干机|酒糟烘干机|果渣烘干机-东鼎干燥官方网站 | 私人家庭影院装修_别墅家庭影院设计_家庭影院价格方案-广州家庭影院定制公司 | 精密铸造,精密铸件,不锈钢铸造,不锈钢铸件-常州鸿雁行机械科技有限公司 | 真人外教一对一_在线英语培训_成人英语培训【春喜外语学习官网】 | 腾云网-智慧网络营销服务提供商| 绿夏技术导航 - 收录精选资源及优质站点网址! | 上海惠涵实业有限公司-德国进口风机,德国Elektror依莱克罗风机 上海画册设计-上海宣传册设计-产品手册设计-企业画册设计公司 | 轻触开关,拨动开关,德艺隆(DEALON)精密工业股份有限公司 | 连云港物流,连云港物流公司就选连云港华美物流有限公司 | 柔性测斜仪|滑动式测斜仪-华思(广州)测控科技有限公司 | 丝杆升降机-蜗轮丝杆升降机-电动推杆-德州市金宇机械有限公司 | 昆明子弟食品有限公司| 义乌供需网-义乌外发加工来料加工,义乌采购信息供求对接平台(yiwugongxu.com) | 苏州ERP定制|苏州CRM|苏州OA|苏州BPM|进销存管理系统-苏州中尚信息科技有限公司 | 河北撒旺肥业有限公司| 自动烘干线,工业烘箱生产厂家-湖南耐美特智能装备有限公司官方网站 | 西安防静电地板_防静电地板厂家_防静电地板价格_OA网络地板_写字楼架空地板_机房墙板安装-红梅防静电地板厂家直销 | 食品油炸机_葱酥油炸机_蒜酥油炸机-山东世联机械厂家 | 山西亿企邦财税服务有限公司|