前端基础知识

时间 2019-11-06

标签前端基础知识繁體版

原文原文链接

document.body.clientWidth 和 document.documentElement.clientWidth

document, window, location, history 是浏览的内置对象
body指的是body这个标签
documentElement指的是HTML标签
clientWidth指的是content的宽度 + padding的宽度
因此用document.body.clienWidth去获取屏幕的宽度是不许的

移动端的实现方案rem

什么是rem

这个单位表明根元素的 font-size 大小（<html> 元素的font-size）。
当用在根元素的font-size上面时，它表明了它的初始值
——MDNcss

/* 做用于根元素，相对于原始大小（16px），因此html的font-size为32px*/
html {font-size: 2rem}
/* 做用于非根元素，相对于根元素字体大小，因此为64px */
p {font-size: 2rem}
复制代码

移动端的设计思想

移动设备适配的效果是让不一样设备尺寸看到的效果，也就是看到的比例是相同的就行了，用代码来写也就是：html

16px                     16px
___________  /  比例  =  ____________   /  比例
 大屏幕宽度                小屏幕宽度
 
 比例 = 屏幕宽度 / 开发者将屏幕分红的份数
 也就是说，16px / 比例，就是16px转换后对应的rem，我把它叫作Xrem，由此得：
    Xrem            Xrem
___________  =  ____________ 
 大屏幕宽度       小屏幕宽度
复制代码

这个比例就是1rem，那么16px等于多少rem也就知道了，等于： 16px/1rem => 16px/(屏幕宽度/份数) => （16*份数/屏幕宽度）rem
由此能够导出，rem的换算公式： Ypx = （Y * 份数 / 屏幕宽度）rem浏览器

如何利用rem实现移动端的适配？

rem + js 去实现移动端的适配
js部分作了两步
1. HTML加载完成后，根据屏幕的宽度去计算出rem，也就是HTML的fontSize的大小
2. 监听窗口的变化，窗口变化便从新设置rem的大小

rem方案存在的问题

noscript问题，字体问题（浏览器最小支持12px），解决屏幕过宽问题（视觉感觉很差，好比PC端的显示屏）bash

参考文章

MDN-css层叠样式length

rem的布局和理解

什么是ES？JavaScript?

ES和JavaScript名字的由来

JavaScript是有Netscape公司创造出来的语言，刚开始叫LiveScript（生动的脚本），想借助Java的成功，以便在业界站住脚步，因此更名叫JavaScript。

ES是ECMAScript的缩写

Netscape 公司提交了 JavaScript 到 ECMA International(European Computer Manufacturers Association International——国际欧盟计算机制造商协会)，因而便有了，ECMAScript这个标准。

ES的版本

ES1：1997 年 6 月
ES2：1998 年 6 月
ES3：1999 年 12月
ES4：未经过
ES5：2009 年 12月
ES6 / ES2015：2015 年 6 月
- 你能够看到， ES6 和 ES2015 其实是同一个东西。起先被推广的名字是 ES6 。然而组委会要求 ECMAScript 必须作到每一年作一次更新。由此，这个版本被改名为 ES 2015，且每一年都须要更新，并命名为当前年的后缀。
ES2016(ES7)：2016 年 6 月
ES2017(ES8)：2017 年 6 月
.......也就是说如今已经有了ES10(ES2019)

参考文章

W3C-JavaScript的历史

微博-什么是ES