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. iOS进行Basic认证与NTLM认证

    一.iOS进行Basic认证 只需要在NSMutableURLRequest的Header中添加认证所需的Username和password. NSMutableURLRequest *webReq ...

  2. 关于dll的一点收获

    蒙贾神指点. 对于kernel32.dll这种系统dll, 每一个进程都会加载一份, 映射到自己的进程空间. 实际上物理内存上还是只有一份dll. 如果对进程自己的dll进行修改, 这时操作系统会触发 ...

  3. UVALive 7148 LRIP（树的分治+STL）（2014 Asia Shanghai Regional Contest）

    题目链接:https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&category=6 ...

  4. Android驱动开发前的准备

    最近看了一些Android驱动开发前需要知道的资料,收获很多,接下来就谈谈我自己的一些心得体会. Android在近几年时间发展迅速,已经成为智能手机操作系统的老大.不过,因为Android原生的代码 ...

  5. Android--自定义加载框

    1,在网上看了下好看的加载框,看了一下,挺好看的,再看了下源码,就是纯paint画出来的,再加上属性动画就搞定了 再来看一下我们的源码 LvGhost.java package com.qianmo. ...

  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. ZwQuerySystemInformation 安全使用心得 Delphi 版

    作为 DELPHI 版本,需要引用 jwaNative, JwaWinType ,他们是 JEDI API 的一部分.JEDI 官网有下载. 先给出 2 个辅助函数 和 一些结构体. type     ...

  8. bootstraptable插件文档的坑

    1.事件onCheck中文档参数为row, $element正确的顺序为$element,row eg: $Table.on('check.bs.table', function ($element, ...

  9. Qt 工程 pro文件

    工作中,感觉pro文件的有些内容真不太懂,现系统性的学习一下.于此备录,分享共勉. 为了更好的理解,先创建一个简单的工程作为实践. [1]创建一个pro文件 1.1 新建proDemo工程.步骤如下: ...

  10. java socket 多线程通讯 使用mina作为服务端

    客户端代码不变,参照 http://www.cnblogs.com/Westfalen/p/6251473.html 服务端代码如下: import java.io.IOException; impo ...