NEWS

建站资讯

专业网站制作:如何运用px和em、rem?

新闻资讯编辑:【三行广州网站建设www.3gonet.com】 发布时间2020.3.28.浏览数:504
专业网站制作:如何运用px和em、rem? , 广州网站建设www.3gonet.com三行网络 为您详细介绍 - 请往下阅读》

专业网站制作:如何运用px和em、rem?


网站建设并非工业设计。也并非设计师,所以早期Dreamweaver的时代,大家习惯用于px作为字体单位,像素px是相对于显示器屏幕分辨率而言的。但是慢慢的移动端的来临,发现传统的pc端设置的字体完全不够用,太大了!为什么会产生这种情况呢?翻阅了资料才知道px是一种像素点,比如我们看的屏幕是有一个一个像素点组成的。每个设备的像素点又是不同的。开发者都要满足每个像素点字体展示的问题。

em的诞生解决网站建设过程中字体随着设备(像素)变化造成的影响、但是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作为单位就行了。

我们可以发现px和em都解决不了自适应字体的问题。随着css3诞生的新元素rem,彻底让开发者兴奋。相对于html根元素文本的字体尺寸,与中间层字体尺寸无关。也就是说 1rem=1*html元素的font-size。rem就相当于是一个全局缩放因子,改变它一个就可以缩放所有以它为单位的元素,只要将它与屏幕分辨率关联起来,就可以完成屏幕自适应展现。

所以选择什么样的字体单位为我们呈现的时候,这是相对而言的,浏览器通常是默认px为单位,如果只是制作pc端网站的话,px就可以满足了,rem是移动端来临的利器。操作也简单。大家可以多多尝试下这些字体单位。


本文由广州网站建设公司-三行网络原创,转载请保留版权( 广州网站建设www.3gonet.com三行网络——专注于企业网站建设、响应式营销型网站定制,欢迎来电咨询!热线:020-85628720、15915767698

标签: 专业网站制作:如何运用px和em、rem?

上一篇:企业网站如何在百度上获得排名?    下一篇:能源化工科技企业网站建设:网站制作多少钱?

专业网站制作:如何运用px和em、rem?

微网站Webapp 三行网络专业订制开发微信网站制作,让微信公众账号实现微菜单、微活动、微会员、微商城等功能,打造炫丽的企业微网站!公众平台搭配"微网站",犹如虎添翼!在保留公众平台所有优势的前提下,提升展示形象,更好的与客户互动。