em是一个相对值，是相对于父元素的值。

body{

    font-size:62.5%;/*10/16*100%=62.5%*/

}

h1{

    font-size:2.4em;/*2.4em*10=24px*/

}

p{

    font-size:1.4em;/*1.4em*10=14px*/

}

li{

    font-size:1.4em;/*1.4*?=14px?*/

}

rem -- “font size of the root element”.  rem是相对于根元素<html>.

html{font-size:62.5%;/*10/16*100%=62.5%*/}

body{font-size:1.4rem;/*1.4*10px=14px*/}

li{font-size:1.4rem;/*1.4*1.=14px*/}

假设页面设计稿给我的时候是按照640宽度的标准尺寸给我的(html:10px)，怎么去计算不同宽度下font-size的值？举个例子：380/640=0.6，380是640的0.6倍，所以384宽度的页面的font-size也等于它的0.6倍，这时3984的html的font-size就等于12px，在不同设备的宽度计算方式以此类推。

html {

    font-size : 20px;

}

@media only screen and (min-width: 401px){

    html {

        font-size: 25px !important;

    }

}

@media only screen and (min-width: 428px){

    html {

        font-size: 26.75px !important;

    }

}

@media only screen and (min-width: 481px){

    html {

        font-size: 30px !important;

    }

}

@media only screen and (min-width: 569px){

    html {

        font-size: 35px !important;

    }

}

@media only screen and (min-width: 641px){

    html {

        font-size: 40px !important;

    }

}

em和rem的更多相关文章

  1. 关于px、em和rem的学习笔记！

    刚参加前端工作,字体一般使用px来设置大小,在处理响应式界面时对字体的大小变化处理感觉很吃力,得知对字体的大小有三种大小格式设置方式,便想一探究竟,希望可以有所帮助! px px像素(Pixel),相 ...

  2. css中单位px、pt、em和rem的区别

    国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? px :像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的.(引自CSS ...

  3. px，em，rem

    px:像素是相对于显示器屏幕分辨率而言的相对长度单位.pc端使用px倒也无所谓,可是在移动端,因为手机分辨率种类颇多,不可能一个个去适配,这时px就显得非常无力,所以就要考虑em和rem. em:继承 ...

  4. （转）px、em、rem的区别和使用

    国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem(国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位),那么三者有什么区别,又各自有什么优劣呢? 一.px特点 1. IE ...

  5. 深度讲解VIEWPORT和PX是什么？移动端单位px，em，rem

    刚开始接触移动页面重构,是不是很迷惑应该按照多大的尺寸制作?320.640还是720?按照640的设计稿重构完页面,是不是还需要写其他尺寸来适配不同的屏幕大小?—— 这源于对viewport和px的不 ...

  6. 彻底弄懂响应式设计中的em和rem

    前一阵子在响应式开发中遇到了em和rem的问题,也上网搜过一些文章,篇幅很长,也没有仔细看,今天来总结一下. rem是指:根元素(root element,html)的字体大小, em是指:父元素的字 ...

  7. px和em和rem的区别

    一.px特点: 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firefox能够调整px和em,rem,但是96 ...

  8. css中的px、em、rem 详解

    概念介绍: 1.px (pixel,像素):是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI(Dots Per Inch,每英寸像素数),在扫描打印时 ...

  9. px、em、rem区别介绍

    px.em.rem区别介绍 PX px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的. PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能 ...

  10. 移动端页面使用单位的问题：关于px、百分比、em、rem开发中逐渐转换的问题记录

    开始写前端页面也有了快两年时间,从一开始的懵逼到现在的淡定,但是不能改变我还是一只小菜鸟的事实,平时遇到的一些问题都会记录在文件夹里,现在都整理一下大家一起分享自己平时也翻翻看看~ 不知道大家平时写的 ...

随机推荐

  1. JS限制input输入的为数字并且有小数的时候最多保留两位小数

    JS限制input用户输入的为数字并且有小数的时候最多保留两位小数,代码如下: html部分: <input type="number" onkeypress="r ...

  2. goim 及时消息 集成

    https://github.com/roamdy/goim-oc-sdk goim 及时消息 集成

  3. 选中统计winform

    private void gridControl1_MouseUp(object sender, MouseEventArgs e) { Dictionary<string, decimal&g ...

  4. 【C#】时间戳转换

    今天有时间戳转换的需求,网上找了半天才找到相关代码,经测试有效,特作此笔记和大家分享! 1.时间戳转为C#格式时间 /// <summary> /// 时间戳转为C#格式时间 /// &l ...

  5. centos下安装java8

    http://tecadmin.net/install-java-8-on-centos-rhel-and-fedora/#

  6. java compiler level does not match the version of the installed java project facet

    Java compiler level does not match the version of the installed java project facet错误的解决 因工作的关系,Eclip ...

  7. 在SQL Server 2005中连接Oracle，完成查询、插入操作

    建立指向Oracle的连接假设Oracle数据库的用户名为test,密码为test,在SQL Server数据库所在服务器上建立的指向Oracle数据库的服务命名为hisorcl.1. 在SQL Se ...

  8. gerrit add review标签

    添加verifyed标签 http://blog.csdn.net/terence427/article/details/16840697

  9. linux 时间管理——概念、注意点(一)【转】

    转自:http://www.cnblogs.com/openix/p/3324243.html 参考:1.http://bbs.eyeler.com/thread-69-1-1.html        ...

  10. hadoop-2.6.0-src源码导入Eclipse 转载

    转载地址:http://m.blog.csdn.net/blog/le119126/42009281 一.导入 先修改源码 参考 二.改错里面的第3条 1.cd到 hadoop-2.6.0-src/h ...