rem 、em
介绍: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的更多相关文章
- 网站响应式布局/网站自适应问题+rem、em、px、pt及网站字体大小设配
Bootstrap 网格系统: Bootstrap CSS: Bootstrap 组件及插件: 一.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个 ...
- 浅谈rem、em、px
1.px:像素(Pixel) px是相对长度单位,他是相对于显示器屏幕分辨率而言的 优点:比较稳定.精确 缺点:在浏览器 中放大或者缩小浏览页面,会出现页面混乱的情况. 如下例子: .buttonPX ...
- CSS中rem、em的区别
引用文档:http://www.divcss5.com/html/h529.shtml:http://blog.csdn.net/qq_35432904/article/details/5180422 ...
- rem、em、px的区别
px 像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的. 特点: 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或re ...
- rem、em、px之间的转换
rem是相对于根元素<html>,这样就意味着,我们只需要在根元素确定一个参考值,这个参考值设置为多少,完全可以根据您自己的需求来定. 我们知道,浏览器默认的字号16px,来看一些px单位 ...
- [转]响应式网页设计:rem、em设置网页字体大小自适应
本文转自:http://www.cnblogs.com/aimyfly/archive/2013/07/19/3200742.html 「rem」是指根元素(root element,html)的字体 ...
- rem、em、px、pt及网站字体大小设配
rem:相对的只是HTML根元素字体尺寸; em:相对于当前对象内文本的字体尺寸(值不是固定且继承父级元素的字体大小); px像素(Pixel):对于显示器屏幕分辨率而言的; pt:point,是印刷 ...
- 响应式网页设计:rem、em设置网页字体大小自适应
「rem」是指根元素(root element,html)的字体大小,好开心的是,从遥远的 IE6 到版本帝 Chrome 他们都约好了,根元素默认的 font-size 都是 16px.这样一个新的 ...
- rem、em 、font-size随着屏幕大小的改变而改变
rem 的根标签是html 以html标签上设置的font-size的值为参考点 如: <div id="app"> <div id="son> ...
随机推荐
- Tomcat配置自签名https
从JDK中找到keytool.exe,随便复制到一个方便的目录,在命令行中进入这个目录. 第一步:为服务器生成证书 tomcat.keystore,命令中如果是IP方式访问用-ext SAN=ip:1 ...
- <Android Framework 之路>Android5.1 Camera Framework(一)
Android5.0 Camera Framework 简介 CameraService启动 CameraService是在MediaServer启动过程中进行的 main_mediaserver.c ...
- solarwind之network Atlas
1. 连接密码为空,连接到Orion 2. 连接后如下图 3. 直接拖动节点即可进行绘制地图 4. 查看它的相关属性
- java导出html页面
http://blog.csdn.net/zhyh1986/article/details/8727523#t6 http://blog.csdn.net/zuozuofuwaiwai/article ...
- selenim
一.安装selenium Pip install selenium==2.53.1 (稳定版) 下载火狐浏览器35.0.1 http://dl.pconline.com.cn/download ...
- [Codeforces 626F]Group Projects
题目大意: 给定\(n\)个数\(a[1]\sim a[n]\),让你把它分为若干个集合,使每个集合内最大值与最小值的差的总和不超过\(K\).问总方案数. 解题思路: 一道很神的dp题. 首先将数进 ...
- [luogu2579 ZJOI2005] 沼泽鳄鱼(矩阵快速幂)
传送门 题目描述 潘塔纳尔沼泽地号称世界上最大的一块湿地,它地位于巴西中部马托格罗索州的南部地区.每当雨季来临,这里碧波荡漾.生机盎然,引来不少游客. 为了让游玩更有情趣,人们在池塘的中央建设了几座石 ...
- ResNet入门
CNN入门讲解:什么是残差网络Resnet 变种神经网络的典型代表:深度残差网络 深度残差神经网络ResNet 学习笔记 https://blog.csdn.net/loveliuzz/article ...
- STM32 IIC双机通信—— HAL库硬件IIC版
参考传送门 关于IIC的原理这里我就不多说了,网上有很多很好的解析,如果要看我个人对IIC的理解的话,可以点击查看,这里主要讲一下怎样利用STM32CubeMx实现IIC的通讯,经过个人实践,感觉HA ...
- ES6重点知识点总结(2)
ES6重点知识点总结(2) call和apply的作用是什么?区别是什么? call和apply的功能基本相同,都是实现继承或者转换对象指针的作用: 唯一不通的是前者参数是罗列出来的,后者是存到数组中 ...