文档章节

css字体

赤月三号
 赤月三号
发布于 2016/06/13 09:58
字数 813
阅读 28
收藏 2

一.首先介绍一下px

px就是css中最基本的长度单位了,用px做单位基本上没什么问题,可以做到让页面按套路精确的展现!

可但是!但可是!如果全篇用px布局会暗藏一个蛋疼的问题,就是当用户和Ctrl滚页面的时候(说白了就是ctrl+,ctrl-),你会发现页面结构产生了不可预知的错乱,因此有砖家倡导使用em替代px。。。。。

二.接下来介绍一下em

如果你从上到下阅读此文,你应该已经知道了em出现的原因,下面说说em的特性,简单的讲px是绝对单位,1px就是1px,2px就是2px,以此类推,而em是相对单位,em相对的基准点就是浏览器的字体大小,浏览器默认字体大小是16px,也就是1em默认等于16px,如果你想给某个文字设定为14px,就这样写 font-size:0.875em; 公式是14/16=0.875em,如果想要15px,那么就是15/16=0.938em, 例如margin:0.938em; 依次类推,样式表都用em来写的话,就可以解决ctrl+,ctrl-时

这时候有人和我一样就会抱怨了,我的数学是体育老师教的,除以16我怎么可能算明白,那好办你可以在根节点上重定义基准字号 html {font-size:62.5%} ,此时页面基准字号就是 16px * 62.5% = 10px , 那么此时 1em = 10px,那么此时14px = 1.4em,15px=1.5em,依次类推,就算你数学是要饭的教的应该也会算了吧-。-!

可但是!但可是!问题又来了,em准确的说是相对于父节点的字号来计算的,如果自身定义了字号那么就相对自身字号来计算,举例如下:

html { font-size: 100%; }.box-0 {    height: 1em; /* 此时height等于16px */}.box-1 {     font-size: 0.625em; /* 此时基准字号以变更为16*0.625=10px */     height: 1em; /* 此时实际height等于10px */}

看明白了吧,在整个页面内1em并不是一个固定不变的值,1em不停的变换,再加上数学是体育老师教的,这不是自作孽吗。。。没关系,css3为我们引入一个新的单位就是rem可以解决这个问题

三.最后介绍一下主角rem

rem和em一样也是一个相对单位,为了方便理解,我们就理解rem为root em,顾名思义rem只相对跟节点计算,这就是说只要在根节点设定好参考值,那么全篇的1rem都相等,计算方式同em,默认1rem=16px; 同理你可以设定html { font-size:62.5% } 那么1rem就等于10px,以此类推。。。

声明一下:rem是css3属性,没错!这就是说屌丝ie678不支持rem属性,只有chrome、firefox等高富帅支持!那么我们就在ie678中用px做兼容处理,例如:

.box {    font-size: 14px; /* 用来兼容ie678 */    font-size: 0.875em; }

 0101后花园使用的WordPress 3.5.1所引用的style.css正是使用的这种方式。

由于作者的语文也是体育老师教的,所以有言语不通之处敬请见谅,还请指正!3Q!

造成的页面错乱问题,常用em

© 著作权归作者所有

共有 人打赏支持
赤月三号
粉丝 18
博文 118
码字总数 60960
作品 0
昌平
前端工程师
私信 提问
页面字体闪一下?这两个标准能帮到你

本文作者来自 360 奇舞团的前端开发工程师何文力,同时也是 W3C CSS 工作组的成员 现象 当我们在浏览一些使用自定义字体的网站,或在开发中使用 设置自定义字体时,时常会看到一个现象:页面...

NimitzDEV
08/28
0
0
党宛玉周结

`上一周主要对css进行了学习,学习了如何创建链接,并且知道了css定义了五种通用字体Serif 字体,Sans-serif 字体,Monospace 字体,Cursive 字体,Fantasy 字体,学习了如何对字体进行大小和...

水澹澹兮欲雨曦
2015/11/17
1
1
div css页面如何提高用户体验 和 chrome浏览器CSS字体大小小于12px不起作用解决方法

提高用户体验度可以增加流量、增加用户在你网页停留时间、提高成交转化率等。 提高用户体验度首先是需要设计适合用户体验的网页美工图。有了合适的美工图,在后续的CSS切图布局时候才能按照网...

名字已被取
2016/03/08
155
0
【翻译】如何创建Ext JS暗黑主题之二

原文:How to Create a Dark Ext JS Theme– Part 2 我已经展示了如何去开发一个精致的暗黑主题,看起来就像Spotify。在本文的第一部分,了解了Fashion、Sencha Inspector、主题和变量。在第...

tianxiaode2008
2015/07/22
0
0
CSS: 引用字体文件,以及字体图标的使用

css文件(fonts.css)中引用字体文件: @font-face { font-family: 'bbBUS'; src: url('texticon.eot'); /IE9/ src: url('texticon.eot?#iefix') format('embedded-opentype'), url('textico......

issac宝华
2016/05/13
486
0

没有更多内容

加载失败,请刷新页面

加载更多

Confluence 6 修改导航显示选项

选择 子页面(Child pages)来在边栏中查看当前页面的子页面。 选择 页面树(Page tree)来查看整个空间的页面树,扩展当前的页面。 你也可以选择是否完全隐藏导航显示选项或者添加你希望可见...

honeymose
22分钟前
0
0
Ubuntu18.04 安装MySQL

1.安装MySQL sudo apt-get install mysql-server 2.配置MySQL sudo mysql_secure_installation 3.设置MySQL非root用户 设置原因:配置过程为系统root权限,在构建MySQL连接时出现错误:ERROR...

AI_SKI
今天
3
0
3.6 rc脚本(start方法) 3.7 rc脚本(stop和status方法) 3.8 rc脚本(以daemon方式启动)

3.6-3.7 rc脚本(start、stop和status方法) #!/usr/bin/env python# -*- coding: utf-8 -*-# [@Version](https://my.oschina.net/u/931210) : python 2.7# [@Time](https://my.oschina.......

隐匿的蚂蚁
今天
3
0
Cnn学习相关博客

CNN卷积神经网络原理讲解+图片识别应用(附源码) 笨方法学习CNN图像识别系列 深度学习图像识别项目(中):Keras和卷积神经网络(CNN) 卷积神经网络模型部署到移动设备 使用CNN神经网络进行...

-九天-
昨天
5
0
flutter 底部输入框 聊天输入框 Flexible

想在页面底部放个输入框,结果键盘一直遮住了,原来是布局问题 Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("评论"), ...

大灰狼wow
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部