CSS——字体大小最常用的单位
px
(像素): 将像素的值赋予给你的文本。这是一个绝对单位, 它导致了在任何情况下,页面上的文本所计算出来的像素值都是一样的。em
s: 1em 等于我们设计的当前元素的父元素上设置的字体大小 (更加具体的话,比如包含在父元素中的大写字母 M 的宽度) 如果你有大量设置了不同字体大小的嵌套元素,这可能会变得棘手, 但它是可行的,如下图所示。为什么要使用这个麻烦的单位呢? 当你习惯这样做时,那么就会变得很自然,你可以使用em
调整任何东西的大小,不只是文本。你可以有一个单位全部都使用 em 的网站,这样维护起来会很简单。rem
s: 这个单位的效果和em
s 差不多,除了 1rem
等于 HTML 中的根元素的字体大小, (i.e.<html>
) ,而不是父元素。这可以让你更容易计算字体大小,但是遗憾的是,rem
s 不支持 Internet Explorer 8 和以下的版本。
元素的 font-size
属性是从该元素的父元素继承的。所以这一切都是从整个文档的根元素——<html>
开始,浏览器的 font-size
标准设置的值为 16px。在根元素中的任何段落 (或者那些浏览器没有设置默认大小的元素),会有一个最终的大小值:16px。其他元素也许有默认的大小,比如 <h1>
元素有一个 2ems 的默认值,所以它的最终大小值为 32px。当你开始更改嵌套元素的字体大小时,事情会变得棘手。比如,如果你有一个 <article>
元素在你的页面上,然后设置它的 font-size 为 1.5em
s (通过计算,可以得到大小为 24px),然后想让 <article>
元素中的段落获得一个计算值为 20px 的大小,那么你应该使用多少 em。
你需要将 em 的值设置为 20/24, 或者 0.83333333em
s. 这个计算可能比较复杂,所以当你设置的时候,你需要仔细一些。如果可以使用 rems 的话,那实现起来就变得简单不少,避免在可能的情况下设置容器元素的字体大小。
当调整你的文本大小时,将文档(document)的基础 font-size
设置为10px往往是个不错的主意,这样之后的计算会变得简单,所需要的 (r)em 值就是想得到的像素的值除以 10,而不是 16。做完这个之后,你可以简单地调整在你的 HTML 中你想调整的不同类型文本的字体大小。在样式表的指定区域列出所有font-size
的规则集是一个好主意,这样它们就可以很容易被找到。
CSS——字体大小最常用的单位的更多相关文章
- python3.4学习笔记(十八) pycharm 安装使用、注册码、显示行号和字体大小等常用设置
python3.4学习笔记(十八) pycharm 安装使用.注册码.显示行号和字体大小等常用设置Download JetBrains Python IDE :: PyCharmhttp://www. ...
- css字体大小单位
1:px: 这个应该是国内使用较多的单位,意思为像素.因此,其视觉的呈现效果是与分辨率相关的.例如在1024*768分辨率下看12px的字体就比960*640下看到的“小”,其实字体像素未改变,所以觉 ...
- (转)CSS字体大小: em与px、pt、百分比之间的对比
CSS样式最混乱的一个方面是应用程序中文本扩展的font-size属性.在CSS中,你可以用四个不同的单位度量来显示在web浏览器中的文本 大小.这四个单位哪一种最适合Web? 这个问题引起了广泛的争 ...
- CSS字体大小之em,px,百分比
首先要记住网页中常规字体的大小为16px. px是用来设置字体的绝对大小.通常为用于物理值的设置.我们在互联网上看到的常规字体大小为16px.而em是指相对于父元素的大小.1em是父元素的1倍,2em ...
- CSS字体大小: em与px、pt、百分比之间的对比
CSS样式最混乱的一个方面是应用程序中文本扩展的font-size属性.在CSS中,你可以用四个不同的单位度量来显示在web浏览器中的文本大小.这四个单位哪一种最适合Web? 这个问题引起了广泛的 ...
- CSS字体大小设置时的参考(转)
from:http://blog.sina.com.cn/s/blog_51cd580b0100gg6y.html font-size 设置的绝对关键字: 以下几个绝对字体大小的设置是有效的.当然他们 ...
- css字体大小设置em与rem的区别
em 单位em是相对于父元素的,如果父元素没有设置字体大小,那就会追溯到body. 比如 如果我在box_text的父元素box加了一个字体大小 那么body的8px就会被box_text的父元 ...
- Chrome浏览器下CSS字体大小设置小于12px无效问题
当字体大小被设置小于12px时,IE.firefox可以起作用.但chrome中仍然显示为12px大小. 解决方法为: html, body { -webkit-text-size-adjus ...
- 在移动端如何选择字体大小和布局的单位,px或dp?
android开发中,文字大小的单位是sp,非文字的尺寸单位用dp,但是我们在设计稿用的单位是px.这些单位如何换算,是设计师.开发者需要了解的关键. 简单理解的话,px(像素)是我们UI设计师在PS ...
随机推荐
- 检测网站的JS报错
window.onerror = function (errorMessage, scriptURI, lineNumber, columnNumber, errorObj) { var contex ...
- SolidWorks学习笔记9 自顶向下方法
目的:制作一个轴承. 先创建一个零件作为一级控件,(草图)如下,是轴承的横截面. 创建内环. 新建一个零件,然后选择插入=>零件,选择“一级控件”零件 创建卡环,插入零件,选择一级控件 然后再旋 ...
- android简易跑马灯
重点:焦点的选择(返回true使得焦点不被选择) MarqueeText.java package com.example.demo02; import android.content.Context ...
- Mysql——通配符和正则表达式的使用
1.like操作符和百分号通配符 %表示任何字符出现任意次数. 查询出表TABLE中NAME字段中任意位置包含i的行: select * from TABLE where NAME like '%i% ...
- 避免同一个文件被#include多次,可以用以下两种方式
1.#ifndef方式 2.#pragma once方式 方式一: #ifndef _SOMEFILE_H_ #define _SOMEFILE_H_ ... ...//一些声明语句 #end ...
- 剑指offer10:2*1的小矩形横着或者竖着去覆盖2*n的大矩形,总共有多少种方法?
1. 题目描述 我们可以用2*1的小矩形横着或者竖着去覆盖更大的矩形.请问用n个2*1的小矩形无重叠地覆盖一个2*n的大矩形,总共有多少种方法? 2.思路和方法 思路:(下面说到的x*y的矩形,x是宽 ...
- OpenVZ平台 Google BBR加速
前言 一直以来用的都是搬瓦工的VPS,不得不说比国内那些大厂的性价比高得不知道哪里去了. 当做梯子来用的话搬瓦工年付19.9美元的方案就够用了,网上还有一些官方优惠码(折扣6%: BWH1ZBPV ...
- python 2 和 python 3的区别
python2和python3区别 python2:源码不统一,源码(功能)重复,维护困难,除法的时候返回来的是小数点,()浮点数 python3:源码统一,源码不重复,除法的时候返回来的是整 ...
- 算法:二叉树的层次遍历(递归实现+非递归实现,lua)
二叉树知识参考:深入学习二叉树(一) 二叉树基础 递归实现层次遍历算法参考:[面经]用递归方法对二叉树进行层次遍历 && 二叉树深度 上面第一篇基础写得不错,不了解二叉树的值得一看. ...
- 怎样将当前节点从DOM树中移除
1. 获取到当前节点. 2. 获取到当前节点的父节点. 3. 使用 Node.prototype.removeChild() 移除当前节点. <!DOCTYPE html> <htm ...