你真的会用css3的rem吗?
之前做移动端开发的时候,都是用rem对DOM元素进行大小设置的。每次用的时候都是去网上搜,然后copy到自己的项目中,没有真正理解网友的代码含义。这次终于认真的学习了一下。
提到rem ,我们必须要先来看看px、em
px:是一个虚拟像素,浏览器中一切长度都是以css像素为单位的。由于不同的物理设备的物理像素的大小是不一样的,所以css认为浏览器应该对css中的像素进行调节,使得浏览器中1css像素的大小在不同设备上看上去大小总是差不多。css规范中使用“参考像素”进行换算。1参考像素即为一臂之遥看解析度为96dpi的设备输出时,1点的视角。(dpi:每英寸多少个物理像素),实际是从一臂之遥看解析度为96dpi的设备输出一单位时视线与水平线夹角;
上图表示pc的典型视觉距离是71厘米即28英寸,则1px对应了0.28mm;42寸高清电视的典型视距距离是3.5m,其1px对应1.3mm;由此看见参考像素是一个visual angel,当设备的典型观看距离越远时,参考像素就越大。
还有,css中的px和物理像素可不一样哦。设备的分辨率越高,css中1px代表的物理像素就越多。因为分辨率增大了,但是屏幕尺寸并没有增大,必须让1px代表更多的物理像素,才能让1px的东西在屏幕的大小与低分辨率的设备差不多。所以可以说px是一个固定的长度。
em:相对长度单位。相对于父元素的font-size。
rem: css3新出的相对长度单位,相对于根元素(html)的字体的大小。
rem存在的意义
- px是一个固定死的长度,;
- em是相对父元素的font-size的相对长度单位,如果不小心中间环节出现问题,那么出错的节点的所以后代的大小都会出现问题,所以风险是及高的;
- rem是相对根元素html的font-size的相对长度单位,避免了em像素的父节点的追溯。我们可以根据不同的情况设置html不同的font-size大小。
rem的使用
首先我们要加入这个标签:
<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">
具体意思如下:
initial-scale - 初始的缩放比例 minimum-scale - 允许用户缩放到的最小比例 maximum-scale - 允许用户缩放到的最大比例
然后再设置html的font-size:
// resize 窗口大小发生改变的时候才会触发的,第一次加载时不会触发
var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
// 手机屏幕是否反转orientationchange
window.addEventListener(resizeEvt, setFontSize, false);// IE 谷歌
document.addEventListener('DOMContentLoaded', setFontSize, false);//火狐
function setFontSize(){
var cWidth=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
var basicNum = 200;
var htmlFontSize=basicNum*(cWidth/设计稿宽度);
document.documentElement.style.fontSize=htmlFontSize+'px';
}
一般设计稿的宽度是750,在开发过程中我们以iphone6/7/8为基准,那么html的font-size算出来应该是200*(375/750)=100px;所以若在设计稿中有一个width为200px的box。我们需要设置为他的宽为(200/100)rem;所以这就是我建议basicNum设置为200的原因,因为这样算的话简单。
var htmlFontSize=basicNum*(cWidth/设计稿宽度);
可以看出,屏幕尺寸越宽,根html的font-size越大。由于其他元素都是
以它为依据的所以能够达到自适应。
愿我们有能力不向生活缴械投降---Lin
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- Java 7 种阻塞队列详解
- protocol buffers 序列化数据
- dubbo的Failed to save registry store file问题
- TDSQL 安装部署(多图预警)
- Table has no partition for value 20190507
- Greenplum 对JSON的支持(最新版)
- iOS 音视频接入-音视频基础
- PHP的bz2压缩扩展工具
- PHP的命令行扩展Readline相关函数学习
- Goland中使用Golang命令行工具
- MHA搭建之ssh互信打通脚本
- pt-slave-restart工具
- 二叉树:层序遍历登场!
- 二叉树:前中后序迭代方式的写法就不能统一一下么?
- 二叉树:听说递归能做的,栈也能做!