在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. quickly calc pow(i, n) since i in [1~n]

    #include <bits/stdc++.h> using namespace std; #define inf (0x3f3f3f3f) typedef long long int L ...

  2. Asp.net MVC中repository和service的区别

    在Asp.net MVC controller的底层,常常有提到repository和service layer, 好像都是逻辑相关的层,那么它们到底是什么区别呢? 简单的说: repository就 ...

  3. Javascript面向对象编程(转)

    http://blog.csdn.net/lmj623565791/article/details/29210679 其实,从这个面向对象编程的例子来看,思路还是很清晰的. 第一步: 构造函数,用于初 ...

  4. Jmeter断言实例—响应断言

    断言有很多种,最最最常用的一种就是响应断言,目前我用的最多是这一种,下面列举一个运用响应断言的实例 对相应的请求添加断言 **Main sample and sub-samples:断言应用于主采样器 ...

  5. selenium+Python(文件下载)

    webdriver允许我们设置默认的文件下载路径,也就是说,文件会自动下载并保存到设置的目录中 下面以Firefox浏览器为例: from selenium import webdriver from ...

  6. 【javascript】jq之display:none与visible:hidden

    今天学习到jquery的hide()部分时,突然有一个想法,jquery中的隐藏/显示部分的实现是给目标元素附加一个"display: none"属性,那么如果在类似于下面的布局中 ...

  7. WPF中的快捷键(累积中)

    1. 显示可选属性, ctrl + J 如上图,当不知道Background的可选择时,可以输入 ctrl + J,系统就会显示所有可选属性

  8. <数据挖掘导论>读书笔记5关联分析的基本概念和算法

    关联规则的强度可以用support度和confidence(置信)度来度量 关联规则发现  给定事务的集合T,关联规则发现是指找出支持度大于等于minsup并且置信度大于等于minconf的所有规则, ...

  9. Cocos2dx v3.9项目位置和基本操作

    MainScene.lua 在Mydemo\src\app\views下 官方示例 cocos2d-win32.sln在cocos2d-x-3.9\build下 生成项目 -l指定语言,-d指定路径 ...

  10. org.springframework.web.util.NestedServletException: Request processing failed; nested exception is org.springframework.beans.BeanInstantiationException: Failed to instantiate [org.jboss.resteasy.plug

    之前做的项目是resteasy的上传,代码没有问题,断点都不进来呢. 我以为可以直接移植到SpringMVC,但是SpringMVC不支持MultipartFormDataInput , 用Multi ...