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. git用.gitignore忽略指定文件

    .gitignore 配置文件用于配置不需要加入版本管理的文件,配置好该文件可以为我们的版本管理带来很大的便利,以下是个人对于配置 .gitignore 的一些心得. 1.配置语法: 以斜杠“/”开头 ...

  2. Python异步通信模块asyncore

    https://docs.python.org/2/library/asyncore.html This module provides the basic infrastructure for wr ...

  3. （三）内存 SDRAM 驱动实验 （杨铸 130 页）（勉强能懂个大概）

    SDRAM 芯片讲解: 地址: 行地址 (A0-A12) 列地址 (A0-A8)    片选信号(BA0 BA1)(L-BANK)(因为SDRAM有 4片) 两片SDRAM 连线唯一区别在 UDQM ...

  4. 论文阅读（Xiang Bai——【CVPR2016】Multi-Oriented Text Detection with Fully Convolutional Networks）

    Xiang Bai--[CVPR2016]Multi-Oriented Text Detection with Fully Convolutional Networks 目录 作者和相关链接 方法概括 ...

  5. 验证控件,解决用于ajax提交前的验证，不是submit提交的验证

    //解决ajax提交前的验证问题,主要用于onclick事件时对某一区域中(可以是form,div,table中的等)控件的验证.(function ($) { var v; //Create a n ...

  6. EBS报表参数间的关联性的设置

    如果想在提交报表请求时根据参数一的值来设置参数二对应的值集,则在参数二的值集设定中的where clause加入:FEFX.参数二的值集名称.例如:参数一名称为inventory_item_id,参数 ...

  7. 更改MyEclipse 之 jsp、js、java、xml文件字体大小设置

    1.打开eclipse->window-->prefercess--->general--->appearance-->color and font ----> B ...

  8. 如何使用查尔斯代理抓取https请求

    首先 查尔斯代理是一个很不错的抓包工具 有适合各种系统的版本 最近http的请求几乎铺天盖地的已经变为了https了  其中的好处有很多  更加安全(http://www.cnblogs.com/lo ...

  9. oracle函数，游标，视图使用总结0.000000000000000000001

    oracle函数或者叫存储过程,在实际的开发过程中对于复杂的业务需求是非常有用的,非常有效率的也是非常好玩儿的一个技术点. 平常在开发过程中对于CRUD功能较多.一般SQL即可应付,大不了就是长一点而 ...

  10. PHP 将下划线命名 转换为 驼峰式命名

    function convertUnderline($str , $ucfirst = true) { $str = ucwords(str_replace('_', ' ', $str)); $st ...