词条信息

admin
admin
超级管理员
最近编辑者 发短消息   

相关词条

热门词条

更多>>
大数据生态圈是什么?
大数据这个概念本身就太大而且太宽,如果一定要严格定义是非常[详细]
PS锐化工具修复模糊照片
  平时我们看到很多文章介绍的都是把清晰的照片模糊处理化,那如[详细]
Xcode使用入门教程
Xcode是一个款强大的IDE开发环境,就像你在写Window[详细]
手机VoLTE是什么意思?
有网友会发现自己的手机上有个“VoLTE”图标或者“HD”[详细]
10月1日起执行个税新税率表!新在哪?减多少?
  千龙网北京9月28日讯(记者 郑雪)2018年8月31日,[详细]
解决网 >>所属分类 >> CSS   

CSS3中px,em,REM使用详解

标签: px em rem

顶[0] 发表评论(0) 编辑词条

在页面中设置字体,我们知道有常见的两种,px 和 em. www.solves.com.cn 电脑百科


www.solves.com.cn 电脑百科

目录

px编辑本段回目录

www.solves.com.cn 电脑百科


www.solves.com.cn 电脑百科

在Web页面制作中,我们一般使用“px”来设置我们的文本,因为他比较稳定和精确。但是这种方法存在一个问题,当用户在浏览器中浏览我们制作的Web页面时,他改变了浏览器的字体大小(虽然一般人不会去改变浏览器字体大小),这时会使用我们的Web页面布局被打破,这时就提出了使用“em”来定义Web页面的字体。

www.solves.com.cn 电脑百科


www.solves.com.cn 电脑百科

em编辑本段回目录

www.solves.com.cn 电脑百科


www.solves.com.cn 电脑百科

一般都是body的font-size为基准

www.solves.com.cn 电脑百科

常用写法:

www.solves.com.cn 电脑百科


www.solves.com.cn 电脑百科

body {

    font-size: 62.5%;

    /*10 ÷ 16 × 100% = 62.5%*/

}

h1 {

    font-size: 2.4em;

    /*2.4em × 10 = 24px */

}

p {

    font-size: 1.4em;

    /*1.4em × 10 = 14px */

}

li {

    font-size: 1.4em;

    /*1.4 × ? = 14px ? */

} 

www.solves.com.cn 电脑百科

为什么“li”的“1.4em”是不是“14px”将是一个问号呢?在使用“em”作单位时,一定需要知道其父元素的设置,因为“em”就是一个相对值,而且是一个相对于父元素的值,

www.solves.com.cn 电脑百科

计算公式:1 ÷ 父元素的font-size × 需要转换的像素值 = em值 www.solves.com.cn 电脑百科

这样的情况下“1.4em”可以是“14px”,也可以是“20px”,或者说是“24px”,总之是一个不确定值,那么解决这样的问题,要么你知道其父元素的值,要么呢在任何子元素中都使用“1em”。

www.solves.com.cn 电脑百科


www.solves.com.cn 电脑百科

rem编辑本段回目录

www.solves.com.cn 电脑百科


www.solves.com.cn 电脑百科

rem:W3C官网描述是“font size of the root element”,即rem是相对于根元素。 www.solves.com.cn 电脑百科

我们只需要在根元素确定一个参考值,在根元素中设置多大的字体,这完全可以根据您自己的需,大家也可以参考下图: www.solves.com.cn 电脑百科

pxtoem

www.solves.com.cn 电脑百科

嫌换算麻烦的同学,也可以去http://pxtoem.com/这个网站去设置 www.solves.com.cn 电脑百科

常用写法: www.solves.com.cn 电脑百科


www.solves.com.cn 电脑百科

html {

    font-size: 62.5%;

    /*10 ÷ 16 × 100% = 62.5%*/

}

body {

    font-size: 1.4rem;

    /*1.4 × 10px = 14px */

}

h1 {

    font-size: 2.4rem;

    /*2.4 × 10px = 24px*/

} 

www.solves.com.cn 电脑百科


www.solves.com.cn 电脑百科

在根元素中定义了一个基本字体大小为62.5%(也就是10px。设置这个值主要方便计算,如果没有设置,将是以“16px”为基准 )。从上面的计算结果,我们使用“rem”就像使用“px”一样的方便,而且同时解决了“px”和“em”两者不同之处。 www.solves.com.cn 电脑百科

注:在Chrome下,默认最下字体为12px,可以设置font-size: 625%,其他以此类推

www.solves.com.cn 电脑百科


www.solves.com.cn 电脑百科

浏览器兼容性

www.solves.com.cn 电脑百科


www.solves.com.cn 电脑百科

IE9以上等支持CSS3的浏览器是肯定可以支持的,如果想要兼容IE低版本,那可以考虑针对IE9以下低版本浏览器,用px来实现。

www.solves.com.cn 电脑百科

 

 

本文地址:解决网 http://www.solves.com.cn/doc-view-4482.html

TAGS:SOLVES , 电脑技术 , 电脑知识 , 网站建设, 电脑技术, 网络营销 , 网站托管 , 硬件技术 , 网络技术 , 软件技术, 维修网点

附件列表


按字母顺序浏览:A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

→我们致力于为广大网民解决所遇到的各种电脑技术问题
 如果您认为本词条还有待完善,请 编辑词条

上一篇rem布局获得分辨率方法
下一篇css3常用属性收集

0
1. 本站部分内容来自互联网,如有任何版权侵犯或其他问题请与我们联系,我们将立即删除或处理。
2. 本站内容仅供参考,如果您需要解决具体问题,建议您咨询相关领域专业人士。
3. 如果您没有找到需要的电脑技术问题词条,您可以到百科问答提问或创建词条,等待高手解答。

关于本词条的提问

查看全部/我要提问>>