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

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

當(dāng)別人問(wèn)會(huì)不會(huì)移動(dòng)端開(kāi)發(fā),說(shuō)會(huì)就行了,因?yàn)槲視?huì)了動(dòng)態(tài)REM!手機(jī)專用

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

所以引入REM方案

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

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

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

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

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

rem和其他長(zhǎng)度單位混用

因?yàn)閎order這種小的單位,讓它固定就可以,不需要縮放,因?yàn)?px縮放,border還顯示1px.如果5px縮放,不顯示2.5px,值顯示2px,px不會(huì)變成小數(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ī)頁(yè)面才能自動(dòng)縮放。 這樣的缺點(diǎn)顯而易見(jiàn)，難道自己要一點(diǎn)點(diǎn)算rem的值？

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

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

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

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

安裝好之后，接下來(lái)做個(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接下來(lái)：

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

這時(shí)候編輯 scss 文件就會(huì)自動(dòng)得到 css 文件

例如，在style.scss里寫(xiě)

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

在css里沒(méi)有這樣的語(yǔ)法
這時(shí)觀察css文件

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

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

$designWidth : 640; // 640 是設(shè)計(jì)稿的寬度，你要根據(jù)設(shè)計(jì)稿的寬度填寫(xiě)。設(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í)會(huì)將px自動(dòng)變成em（寬度為640px的情況下）

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

這樣就無(wú)需在手動(dòng)換算rem的值了。