前端基礎知識

時間 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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。