介绍:rem是相对字体单位;根据html根元素大小而定,同样可作为宽高等单位;

适配原理:将px替换成rem,采用rem适配移动web的原理,根据不同屏幕宽度设置html的font-size的大小;

计算公式:1rem=html的font-size(浏览器默认font-sizt:16px);

动态修改font-size方法

   1.@media查询

@media screen and(max-width:300px) and(min-width:200px){

html{

font-sizt:20px;

}

}

这种方式比较麻烦,因为移动端需要是配的手机型号太多;

   2、js设置font-size

           获取视窗:  let  win_width=document.documentElement.clientWidth ||  document.body.clientWidth;

           获取html:     let  htmlDom=document.getElementsByTag("html")[0];

           设置属性:    htmlDom.style.fontSize=win_width/10+"px";

em

是相对长度单位。相对于当前对象内文本的字体尺寸;如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸

em单位有如下特点

1. em的值并不是固定的;

2. em会继承父级元素的字体大小。

em是继承父元素的字体大小,可是当父元素字体大小改变时,又得重新计算了,这不怎么方便,

rem 、em的更多相关文章

  1. 网站响应式布局/网站自适应问题+rem、em、px、pt及网站字体大小设配

    Bootstrap 网格系统: Bootstrap CSS: Bootstrap 组件及插件: 一.什么是响应式布局?       响应式布局是Ethan Marcotte在2010年5月份提出的一个 ...

  2. 浅谈rem、em、px

    1.px:像素(Pixel) px是相对长度单位,他是相对于显示器屏幕分辨率而言的 优点:比较稳定.精确 缺点:在浏览器 中放大或者缩小浏览页面,会出现页面混乱的情况. 如下例子: .buttonPX ...

  3. CSS中rem、em的区别

    引用文档:http://www.divcss5.com/html/h529.shtml:http://blog.csdn.net/qq_35432904/article/details/5180422 ...

  4. rem、em、px的区别

    px 像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的. 特点: 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或re ...

  5. rem、em、px之间的转换

    rem是相对于根元素<html>,这样就意味着,我们只需要在根元素确定一个参考值,这个参考值设置为多少,完全可以根据您自己的需求来定. 我们知道,浏览器默认的字号16px,来看一些px单位 ...

  6. [转]响应式网页设计:rem、em设置网页字体大小自适应

    本文转自:http://www.cnblogs.com/aimyfly/archive/2013/07/19/3200742.html 「rem」是指根元素(root element,html)的字体 ...

  7. rem、em、px、pt及网站字体大小设配

    rem:相对的只是HTML根元素字体尺寸; em:相对于当前对象内文本的字体尺寸(值不是固定且继承父级元素的字体大小); px像素(Pixel):对于显示器屏幕分辨率而言的; pt:point,是印刷 ...

  8. 响应式网页设计:rem、em设置网页字体大小自适应

    「rem」是指根元素(root element,html)的字体大小,好开心的是,从遥远的 IE6 到版本帝 Chrome 他们都约好了,根元素默认的 font-size 都是 16px.这样一个新的 ...

  9. rem、em 、font-size随着屏幕大小的改变而改变

    rem  的根标签是html 以html标签上设置的font-size的值为参考点 如: <div id="app"> <div id="son> ...

随机推荐

  1. 详解循环神经网络(Recurrent Neural Network)

    本文结构: 模型 训练算法 基于 RNN 的语言模型例子 代码实现 1. 模型 和全连接网络的区别 更细致到向量级的连接图 为什么循环神经网络可以往前看任意多个输入值 循环神经网络种类繁多,今天只看最 ...

  2. javascript中构造函数的说明

    1.1 构造函数是一个模板 构造函数,是一种函数,主要用来在创建对象时对 对象 进行初始化(即为对象成员变量赋初始值),并且总是与new运算符一起使用. 1.2 new 运算符 new运算符创建一个新 ...

  3. MySQL 5.6.26 通过frm & ibd 恢复数据过程

    在A服务器上创建数据库yoonroot(yoon)> show create table yoon\G*************************** 1. row *********** ...

  4. UNP学习笔记2——从一个简单的ECHO程序分析TCP客户/服务器之间的通信

    1 概述 编写一个简单的ECHO(回复)程序来分析TCP客户和服务器之间的通信流程,要求如下: 客户从标准输入读入一行文本,并发送给服务器 服务器从网络输入读取这个文本,并回复给客户 客户从网络输入读 ...

  5. 深入剖析 iOS 性能优化

    问题种类 时间复杂度 在集合里数据量小的情况下时间复杂度对于性能的影响看起来微乎其微.但如果某个开发的功能是一个公共功能,无法预料调用者传入数据的量时,这个复杂度的优化显得非常重要了.上图列出了各种情 ...

  6. 为什么叫Unity3d为脚本语言

    初接触Unity,看到大家说的都是工作主要是写脚本语言. 一直纳闷为什么说脚本语言呢,c#可不是脚本语言啊. -- -- 后来释然,说它是脚本语言是因为传统程序都是由代码构成的(像iOS.Androi ...

  7. CDR 2017版本LiveSketch工具是什么,怎么用?

    LiveSketch 工具在提供手绘草图的简便性和速度的同时,结合了智能笔触调整和向量绘图.在您绘制草图时,CorelDRAW 2017会分析您输入笔触的属性.时序和空间接近度,对其进行调整并将其转换 ...

  8. Kattis - How Many Digits?

    How Many Digits? Often times it is sufficient to know the rough size of a number, rather than its ex ...

  9. Java数据库开发

    Nosql数据库使用场景 首先需要确认一个问题,nosql能做什么?在现在的开发领域中nosql可以实现文档存储(BSON.JSON).缓存存储.图像缓存(图像搜索),但是对于nosql的具体应用场景 ...

  10. 三、Git 分支

    使用分支意味着你可以把你的工作从开发主线上分离开来,以免影响开发主线.有人把 Git 的分支模型称为它的`‘必杀技特性’',也正因为这一特性,使得 Git 从众多版本控制系统中脱颖而出. 1.分支简介 ...