mobile webiste 中的css的font-size em及line-height等换算

　　在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中继承

转载于:https://www.cnblogs.com/kidsitcn/p/4789221.html

mobile webiste 中的css的font-size em及line-height等换算相关推荐

tp view html 引用css,TP5.1：将外部资源引入到框架中（css/js/font文件）
为了让我们的框架形式变得更加好看,我们需要加入Bootstrap和Jq文件到框架中 1.通过Bootstrap和jq官网进行相关文件的下载 (1)Bootstrap下载地址:https://v3.bo ...
js获取html font size,JavaScript fontsize方法入门实例（按照指定的尺寸来显示字符串）...
JavaScript fontsize 方法 fontsize 方法返回使用 HTML font 标签中 size 属性定义字体大小的字符串.其语法如下: str_object.fontsize( s ...
CSS的font和font-size
引用原帖收藏于IT老兵驿站. 前言今天遇到一个问题,没有搞明白font和font-size的关系,研究了https://www.w3schools.com/css/css_font.asp这个帖子 ...
html字号的范围,font size大小
font size="+1"里面的数值是什么意思 font size="+1" font size="+2" font size=" ...
[译] JavaScript 中的 CSS：基于组件的样式的未来
本文讲的是[译] JavaScript 中的 CSS:基于组件的样式的未来, 原文地址:CSS in JavaScript: The future of component-based styling ...
Internet Explorer 6 中的 CSS 增强功能
简介 Microsoft® Internet Explorer 6 及更高版本支持一些更早版本 Internet Explorer 并不支持的 CSS 功能.支持的两个附加 CSS 属性为 min-h ...
ionic android绝对定位,Safari中的CSS故障与Ionicons作为背景内容和绝对定位
我创建了我的第一个使用SASS(Compass)的网站,我非常喜欢它,它是一个非常方便的工具.我还添加了Font Awesome,并经常使用它,因为我想优化Retina desiplays,因此使用更 ...
DIV+CSS 之网页切图过程中div+css命名规则
网页切图过程中div+css命名规则内容:content/container 导航:nav 侧栏:sidebar 栏目:column 标志:logo 页面主体:main 广告:banner 热点:h ...
ASP.NET在主题中添加CSS文件
ASP.NET在主题中添加CSS文件在ASP.NET中,可以使用CSS来控制页面上HTML元素和ASP.NET控件的皮肤.如果在主题文件夹中添加了CSS文件,则在页面应用主题时也会自动应用CSS. ...

mobile webiste 中的css的font-size em及line-height等换算

mobile webiste 中的css的font-size em及line-height等换算相关推荐

最新文章

热门文章