在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. LinuxShell脚本基础 6-case...esac的使用和通配符

    1.case...esac的使用 #!/bin/bash echo "请输入编号 选择不同的显示文件和目录方式:" echo "1 - 普通显示" echo & ...

  2. unity远程修改游戏配置

    关于修改游戏配置这点,如果pc还好 但是在移动端,比较麻烦,比如游戏换ip地址了,可能需要重新打包了 那能不能动态修改,这里有个思路 以udp举例 在客户端里面写一个udp服务,在游戏第一界面打开,比 ...

  3. pycurl安装问题

    pycurl安装问题 之前人写的代码中依赖pycurl,所以准备在ubuntu14.04.4 LTS系统上安装一下.发现了不少问题. Could not run curl-config 最开始遇到问题 ...

  4. 基于URL权限拦截的实现

    一.实现原理 1.实现原理   本示例采用SpringMVC的拦截器来实现一个基于URL的权限拦截. 2.权限管理流程 二.数据库搭建 1.用户表(sys_user) (1)表结构 (2)表字段说明 ...

  5. ES6中的类继承和ES5中的继承模式详解

    1.ES5中的继承模式 我们先看ES5中的继承. 既然要实现继承,首先我们得要有一个父类. Animal.prototype.eat = function(food) { console.log(th ...

  6. step1: python & scrapy安装

    #首先安装python,这里安装python所需依赖包yum install zlib-devel bzip2-devel openssl-devel ncurses-devel sqlite-dev ...

  7. TSM简介

    转自:https://www.cnblogs.com/Study-Blog/p/8644376.html Tivoli TSM产品功能详述Tivoli TSM(Tivoli Storage Manag ...

  8. JavaScript对象中的this属性

    this属性表示当前对象,如果在全局作用范围内使用this,则指代当前页面对象window: 如果在函数中使用this,则this指代什么是根据运行时此函数在什么对象上被调用. 我们还可以使用appl ...

  9. 第2天:JavaScript基础(运算符、案例、循环、冒泡以及prompt提示输入框)

    一元运算在前在后的区别 加加 var num1 = 10; //++在后面 先参与运算 再自加1 var sum1 = num1++ +10; console.log("sum1的值:&qu ...

  10. 使用多说评论&加网分享

    多说评论: <div data-thread-key=" class="ds-thread"></div><script>var du ...