一 視口概念
視口（viewport）是用來約束網(wǎng)頁中最頂級塊元素的，即它決定了網(wǎng)頁的大小，網(wǎng)頁是先在視口上渲染，然后再通過視口放回到瀏覽器窗口上的，網(wǎng)頁的渲染過程如下：
pc端視口的大小和瀏覽器的大小一樣，所以網(wǎng)頁是1：1的放到瀏覽器窗口上，而移動端視口就有點特殊，移動端視口的寬度是比移動端屏幕要寬，寬度尺寸一般是980px或者1024px，網(wǎng)頁是視口上渲染完之后，為了能在移動端屏幕上顯示整個網(wǎng)頁，整個視口會整體縮放到屏幕的寬度，這樣，網(wǎng)頁看上去就整體縮放
具體如何設置視口以及禁止視口頁面縮放可以自行百度
二 css樣式布局總結(jié)
（主要針對移動端以及pc端網(wǎng)頁需要實現(xiàn)等比放大縮小頁面效果）
大概有以下幾種
1、流體布局
流體布局其實就是寬度用百分比，高度用固定值的布局方式，寬度通過百分比來適配不同寬度的屏幕。
為了適配手機端不同尺寸的屏幕，我們在定義元素寬度的時候可以寫百分比，百分比是相對于屏幕的寬度，所有寬度就可以做到自適應，而在高度方向，由于網(wǎng)頁的高度是不定的，所以我們可以把高度寫成固定的值(px),這種布局方式叫做流體布局。
注意兩個概念
1、box-sizing: border-box;
將盒子設置成border-box,這個時候，width和height的尺寸就是盒子的真實尺寸, 盒子加邊框和內(nèi)邊距都不會改變盒子尺寸。
2、width:calc(25% - 2px);
使用calc屬性，將寬度尺寸設置為動態(tài)計算后的尺寸，這樣就可以完成適配。
2、彈性盒模型布局flex
這種布局方式是通過css3新增的一些輔助布局的樣式屬性來制作布局的方式。
3、rem布局
rem是一種相對長度單位，通過這個長度單位可以實現(xiàn)元素寬高等比例縮放，從而完成不同寬度屏幕的適配。
4、響應式布局 （媒體查詢）
通過樣式動態(tài)查詢屏幕的寬度，動態(tài)切換樣式來適配不同寬度屏幕的布局方式。
Bootstrap是最典型的一種
待補充
三 rem布局原理和使用技巧（實現(xiàn)頁面自適應）
實際開發(fā)中，pc端頁面需要實現(xiàn)響應式等比縮放（即自適應），使用rem+彈性布局是比較現(xiàn)實及理想的解決方式
移動端可以使用rem布局，也可以使用px實現(xiàn)（主要用flex），具體看產(chǎn)品是怎么設計要求的
rem 主要是為了解決字體隨屏幕變化，flex上的高度問題，實現(xiàn)高度和寬度等比例縮放
概念解釋
css3規(guī)定：1rem的大小就是根元素<html>的font-size的值。
rem其實是一個單位 ，是個相對單位 root em。rem就是root（根元素的大?。┫鄬τ趆tml元素的字體大小的單位。
區(qū)別em
em指的是父級字體大小，1em是父級字體大小的font-size的值
rem布局的原理
就是根據(jù)一個html根元素來控制，網(wǎng)頁的布局，實現(xiàn)類似于自適應等比例的縮放的布局。
rem優(yōu)勢
通過修改html文字的大小，來改變頁面中元素的大小，實現(xiàn)了頁面的整體控制
rem的作用
通過設置 根元素<html>的font-size的大小，來控制整個html文檔內(nèi)的字體大小、元素寬高、內(nèi)外邊距等，根據(jù)移動設備的寬度大小來實現(xiàn)自適應，不同的設備都展示一致的頁面效果。
簡單用法
html {
font-size: 12px;
}
div {
font-size: 12px;
width: 15rem;
height: 15rem;
background-color: purple;
}
明確html的font-size大小的情況下如何設置rem自動計算
vscode中安裝cssrem插件，通過這個插件可以自動計算rem數(shù)值。
具體設置如下
注意:設置后 vscode軟件需要重啟 否則計算的rem值會出錯
如何確定給根元素多大的rem（重點）
待補充
動態(tài)改變html文字大小(重點)
可以通過js的方式來改變，也可以通過css媒體查詢的方式來改變，
待補充
