介绍: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. c#将http调用返回额json中的有关中文的unicode转换为中文

    c#将http调用返回额json中的有关中文的unicode转换为中文 中文转Unicode:HttpUtility.UrlEncodeUnicode(string str);转换后中文格式:&quo ...

  2. pgpool中定义的数据库节点及pgpool支持的复制模式

    /* * The first DB node id appears in pgpool.conf or the first "live" DB * node otherwise.  ...

  3. 【原创】java的反射机制

    什么是java的反射?java在运行期间可以动态的加载.解析和使用一些在编译阶段并不确定的类型,这一机制被称作反射.它可以加载只有运行时才能确定的数据类型,解析类的内部结构,获取其基本信息,如方法.属 ...

  4. C++小程序(1)——文件整理工具

    网上下载的漫画是jpg或png之类的图片文件,用系统自带的图片管理器看不方便,想要能把图片想网页一样浏览的功能,找了很多图片管理器也没有带这个功能,于是就自己编写了一个小程序实现. 思想就是在图片目录 ...

  5. Generic programming-泛型编程

    Generic programming is a style of computer programming in which algorithms are written in terms of t ...

  6. 脑图工具MindNode"附属节点"是什么意思 图解

    新手会发现在主节点上无论是按Tab子节点还是按Enter附属节点,都是向右延伸,感觉像没区别? 其实不然,从第二个节点开始,你再按 Tab 或者 Enter 就知道区别了. 废话少说,直接上图. 我觉 ...

  7. Java模拟数据量过大时批量处理数据的两种实现方法

    方法一: 代码如下: import java.util.ArrayList; import java.util.List; /** * 模拟批量处理数据(一) * 当数据量过大过多导致超时等问题可以将 ...

  8. Oracle查询优化之减少统计的数据量

    统计各部门人数很简单,通过部门分组即可,要统计部门以下下级部门的人数也简单,通过递归.要统计所有有下级部门的部门人数(包含下级)页比较简单, 先查询出有下级的部门,在对每个部门进行递归查询,如下: ) ...

  9. Ibatis在运行期得到可执行到sql

    环境:oracle-11g ,ibatis-2.0 ,java-1.7 最近因为有个需要是在程序中得到ibatis到sql字符串,即通过以下的ibatis配置得到sql语句 <select id ...

  10. kvm三个kernel相关的调优

    今天在杭州参加淘宝嘉年华技术沙龙,主题是虚拟化和云计算,三个讲演: 淘宝网子团分享淘宝kvm技术的使用 华为的杨晓伟介绍虚拟化技术 阿里云郑永升介绍弹性云计算技术 其中KVM 调优,三点值得关注的: ...