jQuery mobile 前台设计中的css em的使用。

先贴个网址:http://www.uml.org.cn/html/201207311.asp

大家可以参考一下面这张转换表(body字体为16px时的值)


总结

长篇介绍了一大堆,唯一想告诉大家的是以下几点

1、浏览器的默认字体大小是16px

2、如果元素自身没有设置字体大小,那么元素自身上的所有属性值如“boder、width、height、padding、margin、line-height”等值,我们都可以按下面的公式来计算

1 ÷ 父元素的font-size × 需要转换的像素值 = em值

3、这一种千万要慢慢理解,不然很容易与第二点混了。如果元素设置了字体大小,那么字体大小的转换依旧按第二条公式计算,也就是下面的:

1 ÷ 父元素的font-size × 需要转换的像素值 = em值

那么元素设置了字体大小,此元素的其他属性,如“border、width、height、padding、margin、line-height”计算就需要按照下面的公式来计算:

1 ÷ 元素自身的font-size × 需要转换的像素值 = em值

这样说,不知道大家理解了整明白了没有,如果没有整明白,可以回过头来看上面的一个实例。

   

jQuery mobile 前台设计中的css em的使用。

时间: 2024-11-20 00:02:55

jQuery mobile 前台设计中的css em的使用。的相关文章

(转)jQuery Mobile 移动开发中的日期插件Mobiscroll 2.3 使用说明

(原)http://www.cnblogs.com/hxling/archive/2012/12/12/2814207.html jQuery Mobile 移动开发中的日期插件Mobiscroll 2.3 使用说明 近期在移动方面的开发,使用jQuery Mobile ,移动方面的插件不如Web 方面的插件多,选择的更少,有一些需要自己去封装,但功力尚不足啊. 日期插件JQM也提供了内置的,但样式方面不好看,只好百度.Google啦,找到了两款 jquery-mobile-datebox 和 

jquery mobile使用过程中遇到的一些问题及解决方法

最近在项目在综合考虑了可能维护性和应用本身的复杂性,采用了HTML5 + JQuery Mobile的文案. 记录一下遇到的两个问题. 1)为了在手机上运行的更快,canvas中底图决定调用 putImageData 来复制,但在android 2.3系统上,canvas 的 putImageData 有很严重的锯齿,canvas.translate(0.5, 0.5)也是没有效果.如下图,前面是正常画出的底图,后面是 putImageData 后的底图. 解决办法, if (android 2

jQuery Mobile 移动开发中的日期插件Mobiscroll使用说明

近期在移动方面的开发,使用jQuery Mobile ,移动方面的插件不如Web 方面的插件多,选择的更少,有一些需要自己去封装,但功力尚不足啊. 日期插件JQM也提供了内置的,但样式方面不好看,只好百度.Google啦,找到了两款 jquery-mobile-datebox 和 mobiscroll-2.3 jqueryMobileDatebox 这个在板上的表现不好,性能方面有点卡 mobiscroll 性能方面比前者要好一些,效果更简洁 ,划动更流畅 放在一起对比下 各位看官,你们觉得哪个

jQuery Mobile 手动显示ajax加载器,提示加载中...

在使用jQuery Mobile开发时,有时候我们需要在请求ajax期间,显示加载提示框(例如:一个旋转图片+一个提示:加载中...).这个时候,我们可以手动显示jQuery Mobile的加载器,大致流程如下: 1. 启动加载器,显示“加载中...”: 2. 进行ajax请求,请求完成后更新页面数据,刷新jQuery Mobile控件样式: 3. 关闭加载器. 下面就来讲解jQuery Mobile 1.2.0 和 1.1.0 中手动显示加载器的方法(很简单,几行代码就OK了!). 首先是jQ

学jQuery Mobile后的感想

jQuery Mobile是jQuery 在手机上和平板设备上的版本.jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架.支持全球主流的移动平台.jQuery Mobile开发团队说:能开发这个项目,我们非常兴奋.移动Web太需要一个跨浏览器的框架,让开发人员开发出真正的移动Web网站. 经过了几天的jquery mobile的学习以后,不得不说手机界面的难易程度并不亚于普通页面.现在的我不得不佩服那些专研手机界面的大神门.在

(01)创建第一个jQuery Mobile页面

jQuery Mobile 是一个适配pc端和移动端的前台开放框架,当然很多时候主要用于移动端的开发.怎样搭建一个jQuery Mobile的开发环境呢?其实很简单,我们只需要引入的css.js和images等资源文件即可. 引入这些资源文件有两个方法: 1.从 CDN 中引入 jQuery Mobile 这个方法比较简单,你只需要引入css和js文件即可,不需要引入images文件,它们都已经存放在cdn服务器上了,当然这样不好的地方就是你不可以修改图片或者是js和css文件了. <!--jQ

web app开发——使用jQuery Mobile创建餐厅订餐应用

从零开始创建移动Web应用需要编程者学习专门的移动编程知识技能,还要有比如专门的编码工具(比如专门为iOS系统开发应用的工具),再有就是需要在每一个平台都进行测试部署(如Andr??oid,iOS,BlackBerry,Windows Mobile等). 这样的话,开发移动应用将花费不少,而另一个解决方案是再使用HTML,CSS,Javascript,它们的特点是跨平台和跨设备.此外,目前已 经出现了不少专为移动web应用开发的专门框架,比如jQuery Mobile.jQuery Mobile

两大HTML5框架评测:Kendo UI 和 jQuery Mobile

jQuery Mobile 和 Kendo UI 都是流行的 JavaScript 框架,在开发中我们可以在它们的基础上添砖加瓦制作所有现代移动WEB应用.这两个框架都是基于使用率顶尖的 JavaScript 库 jQuery 所构建的.比较 Kendo UI 和 jQuery Mobile 有些类似于比较同一枚硬币的两面.众所周知,jQuery Mobile 实际上并不需要太多的介绍,因为它是最常用的HTML5框架之一. Kendo UI 具有相似的动机和类似的发展速度.与 jQuery Mo

jquery Mobile应用第2课《构建跨平台APP:jQuery Mobile移动应用实战》连载二(简单的QWER键盘)

在jQuery Mobile的布局中,控件大多都是单独占据页面中的一行,按钮自然也不例外,但是仍然有一些方法能够让多个按钮组成一行,比如说在范例6-5中就利用按钮分组的方法使4个按钮并列在一行中,如图6-24和图6-25所示. 图6-24 实现按钮分组的方法 图6-25 分组的按钮 而在上一节中也许有读者已经注意到,头部栏中的按钮并没有占据一整行,也没有与多个按钮一起成组存在,那么在页面的其他部分是否也可以让按钮以这样的形式出现呢? [范例6-9 简单的QWER键盘] 01 <!DOCTYPE