中企网络科技
  • 网站客服13629274615
  • 网站客服
自适应网站设计时关于rem、px、em的区别
作者:中企网络科技 / 更新时间:2021-09-03 / 浏览次数:

由于多终端浏览方式的普及,自适应网站显的尤为重要,但是自适应网站建设的宽度高度和字体大小设置(px、em、rem)确有别于传统网站,今天中企网络科技小编给大家重点介绍一下px、em、rem三者之间的区别:

网站设计


PX

px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
PX特点
1. IE无法调整那些使用px作为单位的字体大小;
2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位;
3. Firefox能够调整px和em,rem,但是96%以上的中国网民使用IE浏览器(或内核)。


EM
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。
EM特点
1. em的值并不是固定的;
2. em会继承父级元素的字体大小。
注意:任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算,需要在css中的body选择器中声明Font-size=62.5%,这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。
所以我们在写CSS的时候,需要注意两点:
1. body选择器中声明Font-size=62.5%;
2. 将你的原来的px数值除以10,然后换上em作为单位;
3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。
也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em,那么在声明p的字体大小时就只能是1em,而不是1.2em, 因为此em非彼em,它因继承#content的字体高而变为了1em=12px。


REM
rem是CSS3新增的一个相对单位(root em,根em),这个单位引起了广泛关注。这个单位与em有什么区别呢?区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。目前,除了IE8及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是一个例子:
p {font-size:14px; font-size:.875rem;}注意: 选择使用什么字体单位主要由你的项目来决定,如果你的用户群都使用最新版的浏览器,那推荐使用rem,如果要考虑兼容性,那就使用px,或者两者同时使用。
px 与 rem 的选择?
对于只需要适配少部分手机设备,且分辨率对页面影响不大的,使用px即可 。
对于需要适配各种移动设备,使用rem,例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。


【中企业务】网站建设、网站设计、服务器空间租售、网站维护、网站代运营、网站托管、网站优化、seo优化、百度推广、自媒体营销、微信公众号、网站定制开发、仿站、小程序开发、app开发等;
如有意向---联系我们
热门栏目
热门标签
热门资讯

热门关键词:     西安网站建设     西安网站维护     西安全网营销     西安网站SEO优化     营销型网站建设     响应式网站建设     外贸网站建设     西安品牌网站建设     西安小程序开发     西安品牌设计     301重定向     锚文本     长尾关键词     meta标签     网页标题如何写     网站快速排名     网站收录     外链发布     云服务器     域名备案     网站关键词     alt标签     网站被K怎么办     robots.txt文件     搜索引擎     网站内链     蜘蛛抓取     网站降权     网站搬家     网站死链     网站改版     404页面设置     h1标签     关键词密度     网页描述     SEO优化案例     网站用户体验     域名被墙     seo快排技术     网站标签     旅游网站解决方案     网站快照     百度索引     网站权重

网站建设

营销网站定制

响应式站制作

商城网站开发

外贸网站建设

网站推广

网站SEO优化

网站运维托管

全网营销推广

品牌形象设计

小程序业务

微信小程序

百度小程序

微信H5商城

抖音小程序

中企观点

网站建设

SEO优化

网站运维

行业新闻

客户案例

营销定制案例

H5响应式案例

品牌设计案例

SEO优化案例

关于我们

关于我们

联系我们

服务流程

人才招聘



微信扫一扫咨询

Copyright © 2011-2021 陕西中企网络科技有限公司  8年建站经验 期待您的咨询 部分素材来源于网络,如有侵犯,联系删除   陕ICP备19019943号-7 - 分站导航 - 网站地图 - 友链交换 - 网站提交

地址:陕西省西安市未央区三桥新街金桥国际2107  咨询QQ:540383622136545581     联系邮箱:yaoaijun@zhooqi.com     手机:13629274615 / 18392455188(同微信) 电话:029-84538663