由一次动态改变font-size的大小引申的一系列困惑补录
以下结论如有错误,欢迎指正
在切入正题之前,先了解下window 和document这两个大对象
我们熟知 JavaScript的组成如下图所示:
window对象和document对象分别属于哪个分支下面呢?
发现: 在控制台打印出的document对象和window.document打印出来的对象是一致的
原因是因为: 平常我们以document开头的各种API 实际上都是省略了window
现在对于window和documen有了初步理解之后
现在抛出以下几个属性
window.outerHeight ? window.innerHeight? document.documentElement.clientHeight ? document.body.clientHeight? offsetHight? scrolHeight? 脑袋瞬间123
那么就一个个攻破吧
window.outerHeight & windwo.innerHeight
顾名思义,从window开始,我们知道window属于BOM范围,BOM指的是浏览器对象模型,存储浏览器的各种信息个API,所以
window.outerHeight
即是整个浏览器的外边高度(包含了导航栏,横向滚动条等)
windwo.innerHeight
浏览器除去导航栏,横向滚动条剩下的DOM的视口大小
经检验:
在移动端浏览器中: window.outerHeight = windwo.innerHeight ;
在移动端中 两者且是设备的逻辑像素(也叫做CSS像素)
在PC浏览器中: window.outerHeight ≠ windwo.innerHeight ;
浏览器兼容性: 兼容到IE8
document.documentElement.clientHeight && document.body.clientHeight
从document开始,那么描述的是文档对象模型这个对象的相关属性和API,所以
document.documentElement.clientHeight
文档对象模型中HTML标签的高度
document.body.clientHeight
文档对象模型中body标签的高度
经检验:
在移动端中 document.documentElement.clientHeight = document.body.clientHeight
在PC端中 document.documentElement.clientHeight ≠ document.body.clientHeight
兼容性: 兼容到IE6
offsetHight
通常我们立即offset就是偏移的意思,即页面滚动,从页面开始到滚动到的位置的偏移高度
scollHeight
滚动的高度,包含页面没有显示出来的,页面的整体高度
理解了以上的几点之后,脑袋突然想到移动端设配的REM是通过获取docuemt.documentElement.clientWidth来动态改变html标签的font-size的大小,该边font-size的大小的原因是因为会用到REM来匹配1rem 等于HTML元素的font-size的大小,这时候脑袋又想到REM? EM ? PX?
PX
设备中的最小显示单位,不可改变
EM
以元素外层的父元素的font-size作为参照基准,元素的 1em = 元素的父级元素的font-size的大小
REM
以HTML标签的font-size大小为参照基准,元素的1rem = html变迁的font-size大小
晚点画一张图,表示关系。
由一次动态改变font-size的大小引申的一系列困惑补录的更多相关文章
- Android中动态改变控件的大小的一种方法
在Android中有时候我们需要动态改变控件的大小.有几种办法可以实现 一是在onMeasure中修改尺寸,二是在onLayout中修改位置和尺寸.这个是可以进行位置修改的,onMeasure不行. ...
- 模仿iframe框架,由分隔栏动态改变左右两侧div大小———基于jQuery
<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8&qu ...
- ios 运行时特征,动态改变控件字体大小
需求:ex: 在不同尺寸的iPhone上面显示的字体大小不一样 https://github.com/rentzsch/jrswizzle #import <UIKit/UIKit.h> ...
- LaTex Font Size 字体大小命令
LaTex中字体大小有很多中等级,分别由下列命令控制: \tiny \scriptsize \footnotesize \small \normalsize \large \Large \LARGE ...
- LaTex Font Size 字体大小
目录 命令 效果图 命令 LaTex中字体大小由以下命令控制: \tiny \scriptsize \footnotesize \small \normalsize \large \Large \LA ...
- 动态改变Android控件大小
Button button = (Button) findViewById(R.id.button2);button.setOnClickListener(myOnClickListener); // ...
- 分享非常有用的Java程序 (关键代码)(四)---动态改变数组的大小
原文:分享非常有用的Java程序 (关键代码)(四)---动态改变数组的大小 /** * Reallocates an array with a new size, and copies the co ...
- Winfrom固定Label宽度,根据文本动态改变Label的高度 z
Label,要固定住宽度,然后根据文本的长度来动态改变高度,一开始去网上找解决方案,各种根据字体大小啊,字数啊来动态改变,但是效果却不怎么好.最后灵机一动,想起了偶尔用过一次的FlowLayoutPa ...
- 代码动态改变 NGUI UILabel 的字体
有一次因为 ttf 分成简体和繁体两个..所以就需要动态改变NGUI 中 UILabel 的字体,但是不知道 UILabel 保存字体的字段是哪个 网上搜到..在这里记录一下 using UnityE ...
随机推荐
- 阿里云ecs docker使用(2)
1. 退出docker容器 命令 exit 2.sudo docker ps -l 3. sudo docker images 4. sudo docker commit ba300f05c1a3 c ...
- Java中synchronized
原文地址 synchronized是Java中的关键字,是一种同步锁.它修饰的对象有以下几种:1. 修饰一个代码块,被修饰的代码块称为同步语句块,其作用的范围是大括号{}括起来的代码,作用的对象是调用 ...
- Java8系列之重新认识HashMap(转)
转自美团电瓶技术团队:原文地址 简介 Java为数据结构中的映射定义了一个接口java.util.Map,此接口主要有四个常用的实现类,分别是HashMap.Hashtable.LinkedHashM ...
- linux内核 RCU机制详解【转】
本文转载自:https://blog.csdn.net/xabc3000/article/details/15335131 简介 RCU(Read-Copy Update)是数据同步的一种方式,在当前 ...
- HTML/CSS实现的搜索框
谷歌和百度首页的搜索框都是<input>+<button>模式的,bing的搜索框感觉要好点儿.简言之,就是将提交按钮放到<input>中,其实这是做不到的,只能伪 ...
- TP框架控制器和对应方法创建
控制器和对应方法创建 控制器是MVC模式中的核心,TP默认有一个控制器: Index控制器里面有一个操作方法:Index 我们在访问http://localhost:8080/Thinkphp ...
- springAOP原理以及概念
需求:1.拦截所有业务方法2.判断用户是否有权限,有权限就让他执行业务方法,没有权限就不允许执行.(是否有权限是根据user是否为null作为判断依据) 思考: 我们该如何实现? 思路1: 我们在每个 ...
- win7 jenkins搭建.Net项目自动构建
前提:操作系统win7, 确保需要的.NET Framework已经安装 1. 安装插件 Jenkins--系统管理局--管理插件--可选插件,搜索MSBuild Plugin并安装:重启tomcat ...
- 华为机试题 N阶楼梯的走法,每次走一步或者两步
在Stairs函数中实现该功能: 一个楼梯有N阶,从下往上走,一步可以走一阶,也可以走两阶,有多少种走法? (0<n<=30)<> 例如3阶楼梯有3种走法: 1.1.1 1.2 ...
- linux网络编程 ntohs, ntohl, htons,htonl inet_aton等详解
ntohs =net to host short int 16位 htons=host to net short int 16位 ntohs =net to host long int 32位 hto ...