在mobile web设计 中，我们常常需要使用em这个字体大小的单位。em到底是多少呢？

em到底应该设置为多少个em呢？通常换算成方法是1em=target fontsize we want/fontsize of containing element  ,比如我们设置html tag的font-size为默认的16px, 为了换算方便，我们把body的font-size设置为10px,也就是说browser的默认font-size为10px，对于body来说，其context就为html的font-size(16px)，因此body{font-size: 62.5%;/*1em=10px作为基线*/}h1希望设置为30px，则h1的em值应该设置为30px/10px=3em

当在一个element上设置flexible margin时，context是元素的container的width

当在一个element上设置flexible padding时，context是元素本身的width!

fluid site: Fluid grid, Relative values(percentages);

对于line-height属性我们也可以设置为em和300%的百分比或者直接为3的数字，这个百分比和数字的区别在于300%要先根据font-size计算后再继承进line-height中，而3这个数字则直接从font-size中继承

mobile webiste 中的css的font-size em及line-height等换算的更多相关文章

  1. TP5.1：将外部资源引入到框架中（css/js/font文件）

    为了让我们的框架形式变得更加好看,我们需要加入Bootstrap和Jq文件到框架中 1.通过Bootstrap和jq官网进行相关文件的下载 (1)Bootstrap下载地址:https://v3.bo ...

  2. 使用二分法查找mobile文件中区号归属地

    #!/usr/bin/env python #coding:utf-8 ''' Created on 2015年12月8日 @author: DL @Description: 使用二分法查找mobil ...

  3. ASP.NET在主题中添加CSS文件

    ASP.NET在主题中添加CSS文件 在ASP.NET中,可以使用CSS来控制页面上HTML元素和ASP.NET控件的皮肤.如果在主题文件夹中添加了CSS文件,则在页面应用主题时也会自动应用CSS. ...

  4. CSS 字体(font)实例

    CSS 字体(font)实例CSS 字体属性定义文本的字体系列.大小.加粗.风格(如斜体)和变形(如小型大写字母).CSS 字体系列在 CSS 中,有两种不同类型的字体系列名称: 通用字体系列 - 拥 ...

  5. CSS系列：在HTML中引入CSS的方法

    HTML与CSS是两个作用不同的语言,它们同时对一个网页产生作用,因此必须将CSS与HTML链接在一起使用.在HTML中,引入CSS的方法主要有4种:行内式.内嵌式.导入式和链接式. 1. 行内式 行 ...

  6. JQuery中操作Css样式的方法

    JQuery中操作Css样式的方法//1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#tw ...

  7. 如何在JAVA中实现一个固定最大size的hashMap

    如何在JAVA中实现一个固定最大size的hashMap 利用LinkedHashMap的removeEldestEntry方法,重载此方法使得这个map可以增长到最大size,之后每插入一条新的记录 ...

  8. 关于JAVA EE项目在WEB-INF目录下的jsp页面如何访问WebRoot中的CSS和JS文件

    找了这么久资料,总算解决了 感谢博客园:http://www.cnblogs.com/xsht/p/5275081.html 感谢百度:http://zhidao.baidu.com/link?url ...

  9. Flex中使用CSS控制页面样式

    Using file: Stylebounding.mxml Stylebounding2.mxml myCSS0329.css 在Flex4中使用CSS控制样式,既可以直接在MXML文件中写样式,也 ...

随机推荐

  1. Vue axios 上传图片

    上传图片接口 // 上传图片 export const uploadBanner = formData => { return axios.request({ url: 'manage/slid ...

  2. LCA（最近公共祖先）

    学习链接:https://baike.baidu.com/item/%E4%BC%B8%E5%B1%95%E6%A0%91/7003945?fr=aladdin 求LCA的方法有很多,在这里就只介绍一 ...

  3. JDBC(2)-使用statment接口实现增删改操作

    1.Statement接口引入 作用:用于执行静态SQL语句并返回它所生成结果的对象. int executeUpdate(String sql) :执行给定SQL语句,该语句可能为insert.up ...

  4. Junit处理异常

    当一个被测类中有异常时,如何处理? 如:一个原始的被测类; public class UserExceptionDemo { public int age; public String name; p ...

  5. Android 开发 命名规范（基础回顾）

    标识符命名法标识符命名法最要有四种: 1 驼峰(Camel)命名法:又称小驼峰命名法,除首单词外,其余所有单词的第一个字母大写. 2 帕斯卡(pascal)命名法:又称大驼峰命名法,所有单词的第一个字 ...

  6. Intel GPA 抓取3d模型

    原文链接在这里 http://dev.cra0kalo.com/?p=213 背景信息 Intel的GPA本身是一款图形分析软件,并没有设计从3D程序里抓取模型资源的功能,但这里作者是通过hook G ...

  7. Windows加密服务架构

    Windows加密是安全体系的重要基础和组成部分.现代CPU的保护模式是系统安全的硬件基石,基于CPU硬件的特权分级,Windows让自身的关键系统代码运行在高处理器特权级的内核模式,各种应用程序则运 ...

  8. Codeforces 639B——Bear and Forgotten Tree 3——————【构造、树】

    Bear and Forgotten Tree 3 time limit per test 2 seconds memory limit per test 256 megabytes input st ...

  9. SpringBoot | 第三十六章：集成多CacheManager

    前言 今天有网友咨询了一个问题:如何在一个工程中使用多种缓存进行差异化缓存,即实现多个cacheManager灵活切换.原来没有遇见这种场景,今天下班抽空试了下,以下就把如何实现的简单记录下. 一点知 ...

  10. String.Compare 方法 (String, Int32, String, Int32, Int32)

    String.Compare 方法 (String, Int32, String, Int32, Int32) 对两个指定的 String 对象的子字符串进行比较,并返回一个指示二者在排序顺序中的相对 ...