摘要：一定要強(qiáng)制自己用命令行，強(qiáng)制自己學(xué)英語，強(qiáng)制自己看文檔。只有這三條都做了，才有可能成為前端水平的程序員。設(shè)計(jì)師的設(shè)計(jì)稿寬度需要統(tǒng)一那么相應(yīng)得，這時(shí)會將自動變成寬度為的情況下這樣就無需在手動換算的值了。

動態(tài) REM是手機(jī)專用,是如何適配所有手機(jī)的方案,不是響應(yīng)式方案,
例如 : taobao.com 是專門的PC端
m.taobao.com 是專門的手機(jī)端,如果用電腦短訪問網(wǎng)頁布局就很奇怪
就像用手機(jī)訪問pc端沒有自適應(yīng)的網(wǎng)站一樣

當(dāng)別人問會不會移動端開發(fā),說會就行了,因?yàn)槲視藙討B(tài)REM!手機(jī)專用

em:一個(gè)m的寬度.如果面試官問,就說是一個(gè)漢字的寬度.這個(gè)單位是相對于font-size的

rem:root em,根元素的font-size.即的font-size.rem是相對于html的font-size的

vh:視口高度,總共100vh
vw:視口寬度,總共100cw
MDN-length

網(wǎng)頁的默認(rèn)font-size是16px.
chrome瀏覽器默認(rèn)設(shè)置能顯示的最小字體是12px,也就是說如果給css樣式小于12px,那么還會顯示12px.這需要手動設(shè)置才行.但瀏覽器用戶一般都不會去設(shè)置這個(gè).所以讓字體不要小于12像素,否則chrome瀏覽器沒法顯示

而firefox和safir瀏覽器就沒有這個(gè)限制

對于漢字來說,寬高一樣,所以font-size高度就是1個(gè)em的值(M這個(gè)字寬高基本一致,且寬度就是一個(gè)漢子的寬度.所以叫em)
區(qū)別:
em:自己的font-size的值
rem:根元素的font-size

做響應(yīng)式之前需要四個(gè)設(shè)計(jì)圖(沒圖不做.因?yàn)樵O(shè)計(jì)不是前端該做的事,沒有完整最終確定的的設(shè)計(jì)圖之前,不要寫代碼.):
一個(gè)是窄屏,一個(gè)是寬屏,一個(gè)是ipad,一個(gè)是手機(jī)端的

不同的屏幕得到不同的樣子算式響應(yīng)式.

這篇博客不討論響應(yīng)式.只看手機(jī)端怎么做.

pc端只需要選一個(gè)布局,然后定寬就可以了,

但是手機(jī)端,手機(jī)太多.

各種寬度像素都有很多.沒有辦法做響應(yīng)式,
解決方法:

使用百分比:例如,寬度5%,40%,讓它始終自適應(yīng).

整體縮放:做一個(gè)圖,然后遇到寬度不一樣的情況就整體縮放

百分比布局缺點(diǎn):寬度容易確定,因?yàn)榭梢院透溉萜髯鞅容^,是相對于父容器的.但是高度很難確定,比如高度寫成20%,沒有寫過,想做一個(gè)寬高1:2的div,沒法做,有很強(qiáng)的不確定性.高度沒有辦法跟寬度做任何的配合

如果想寫出下面的設(shè)計(jì)

假設(shè)固定寬度為320px,固定寬高后出現(xiàn)的問題:

即如果手機(jī)寬度變化,那么就不會適應(yīng)屏幕變化

如果居中,兩側(cè)就會變大,固定寬度只能讓別的寬度的手機(jī)看到320px寬度的樣子

想要的效果是所有元素按比例放大

單位應(yīng)該相對于寬度,才能很好地還原設(shè)計(jì)稿
px,em都不行,vw可以,但是vw兼容性太差
所以退而求其次

rem依賴的是的font-size,使用js使的font-size依賴pagewidth,那么rem就間接地依賴于頁面的pagewidth

所以引入REM方案

在標(biāo)簽里加上如下代碼,讓1rem等于頁面寬度

使用上面代碼,使長度單位相對于頁面寬度定義,從而適應(yīng)任何不同屏幕尺寸的手機(jī)

不管屏幕寬度如何變化,布局總是完美適應(yīng)屏幕

rem小于1不方便寫
將pageWidth/100,于是就將款入分為100rem,剛才的0.4rem就可以寫成40rem.這樣用起來像vw.但是有一個(gè)問題

谷歌瀏覽器字體設(shè)置不能小于12px,所以除以100后,html標(biāo)簽的font-size變成了12px.
解決方法:之縮小10倍即可,10rem為頁面總寬度

rem和其他長度單位混用

因?yàn)閎order這種小的單位,讓它固定就可以,不需要縮放,因?yàn)?px縮放,border還顯示1px.如果5px縮放,不顯示2.5px,值顯示2px,px不會變成小數(shù).
font-size也不必縮放,將所有屏幕的手機(jī)font-size設(shè)置成一樣大小,顯示不影響美觀

px需要算,很麻煩。假如設(shè)計(jì)師給的設(shè)計(jì)稿是只有640px的寬度的一個(gè)設(shè)計(jì)稿，里面有一個(gè)div是256px×128px，那么寬度的rem就是256/64010rem，高度的rem就是128/64010rem，全部換成rem之后，所有的手機(jī)頁面才能自動縮放。 這樣的缺點(diǎn)顯而易見，難道自己要一點(diǎn)點(diǎn)算rem的值？

有沒有什么辦法可以將px轉(zhuǎn)換為rem并交給程序來做？有，sass。

一定要強(qiáng)制自己用命令行，強(qiáng)制自己學(xué)英語，強(qiáng)制自己看文檔。
只有這三條都做了，才有可能成為前端水平20%的程序員。
現(xiàn)在前端很多工具沒有窗口界面，我已經(jīng)裝了linu虛擬機(jī)，安裝軟件等工具包只需要一條命令，很方便。

使用npm安裝（linux環(huán)境）
因?yàn)閲鴥?nèi)特殊的網(wǎng)絡(luò)環(huán)境，不能直接安裝，所以需要先設(shè)置國內(nèi)的鏡像，設(shè)置淘寶源
npm config set registry https://registry.npm.taobao.org/
touch ~/.bashrc
設(shè)置之后還沒用，因?yàn)閚ode-sass會下載亞馬遜上的一個(gè)資源，所以要設(shè)置一下，從淘寶上下載資源，不要去國外下載
echo "export SASS_BINARY_SITE="https://npm.taobao.org/mirrors/node-sass"" >> ~/.bashrc
source ~/.bashrc

全局安裝
npm i -g node-sass
如果使用windows，那么一定會報(bào)錯(cuò)，我也不知道為什么，所以推薦從現(xiàn)在開始，編程使用linux或者mac，安裝工具就一句命令行的事情。如果放不下windows，就在Windows上裝虛擬機(jī)，在安裝深度linux，deepin或ubantu都可以。

安裝好之后，接下來做個(gè)示例：
mkdir ~/Desktop/scss-demo
cd ~/Desktop/scss-demo
mkdir scss css
touch scss/style.scss
start scss/style.scss
在scss文件夾里創(chuàng)建style.scss接下來：

node-sass -wr scss -o css
使用上面的命令監(jiān)聽scss文件夾。開始實(shí)驗(yàn)：

這時(shí)候編輯 scss 文件就會自動得到 css 文件

例如，在style.scss里寫

html{
  color:red;
  p{
  color:blue;
 }
}

在css里沒有這樣的語法
這時(shí)觀察css文件

自動轉(zhuǎn)化成符合正確語法的css語句
所以，
在 scss 文件里添加：

@function px( $px ){
  @return $px/$designWidth*10 + rem;
}

$designWidth : 640; // 640 是設(shè)計(jì)稿的寬度，你要根據(jù)設(shè)計(jì)稿的寬度填寫。設(shè)計(jì)師的設(shè)計(jì)稿寬度需要統(tǒng)一

.child{
  width: px(320);
  height: px(160);
  margin: px(40) px(40);
  border: 1px solid red;
  float: left;
  font-size: 1.2em;
}

那么相應(yīng)得，css這時(shí)會將px自動變成em（寬度為640px的情況下）

.child {
  width: 5rem;
  height: 2.5rem;
  margin: 0.625rem 0.625rem;
  border: 1px solid red;
  float: left;
  font-size: 1.2em; }

這樣就無需在手動換算rem的值了。