在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. 腾讯地图添加多个Marker

    //重置地图 init(){ var self = this; this.wSize = { wHeight: window.innerHeight-, wWidth: window.innerWid ...

  2. web.py简易示例

    http://webpy.org/cookbook/index.zh-cn code.py import web urls = ( '/', 'index' ) class index: def GE ...

  3. TensorFlow模型转为caffe模型

    最近由于要将训练好的模型移植到硬件上,因此需要将TensorFlow转为caffe模型. caffe模型需要两个文件,一个是定义网络结构的prototxt,一个是存储了参数的caffemodel文件. ...

  4. [转]C#算法题

    1:不允许使用循环语句.条件语句,在控制台中打印出1-200这200个数. 参考答案:这里我使用的是递归. static void Main(string[] args) { Print(); Con ...

  5. execution(* *..BookManager.save(..))的解读

    execution(* *..BookManager.save(..))的解读: 第一颗* 代表ret-type-pattern 返回值可任意, *..BookManager 代表任意Pacakge里 ...

  6. PHP多维数据排序(不区分大小字母)

    1. PHP中最普通的数组排序方法 sort(); 看个例子: <?php $test = array(); $test[] = 'ABCD'; $test[] = 'aaaa'; $test[ ...

  7. 最小化安装的redhat/centos安装gnome桌面

    因系统版本和语言环境不同,安装包的名字会有所差别 安装方式可以选择直接联网安装,也可以加载dvd镜像源安装,这里针对配置redhat/centos本地dvd的yum源做个记录: 1.复制 redhat ...

  8. hexo+github搭建博客跳坑

    hexo+GitHub搭建博客过程中,hexo安装成功,可以启动和运行,但是访问localhost:4000却无法访问,弄了半天,最后发现是福昕阅读器占用了4000端口 解决办法: 采用命令hexo ...

  9. 此请求的URL的长度超过配置的maxUrlLength值

    aps.net 网站的url长度默认限制为260个字符. 修改web.config即可   <system.web> <httpRuntime maxUrlLength=" ...

  10. 在 Azure 上创建和链接 Azure SQL 数据库

    本快速入门介绍了如何在 Azure 门户中创建并连接 Azure SQL 数据库.在本教程中完成的所有操作均符合 1 元试用条件. 开始之前 如果您还没有 Azure 账户,可以申请 1 元试用账户. ...