rem通常和@media媒體查詢一起使用，因為不同設備的寬度不一樣所以根字號也不一樣，所以用媒體查詢分別設置每個視口寬度下的根字號 max-width：定義輸出設備中視口的最大可見區域寬度? ?即寬度小于768px里面的值才會生效 min-width：定義輸出設備中視口的最小可見區域寬度??即寬度大于768px里面的值才會生效 小于768 超小屏幕 max-width=768px 大于768 小屏幕 min-width=768px 大于992 中型屏幕 min-width=992px 大于1290 大屏幕 min-width=1200p: ``` @media(min-with:320px){ html{font-size:12px;} } @media(min-with:480px){ html{font-size:12px;} } @media(min-with:768px){ html{font-size:14px;} } @media(min-with:1200px){ html{font-size:16px;} } html .div{ with:7.5rem; height:2.5rem; } ``` 1rem=html設置的font-size的px大小 我們怎么確定每個尺寸下根字號的大小呢？ 目前rem布局方案中，將網頁分成10等分，html標簽的字號為視口寬度的1/10  上面還不夠，設計師給你一個手機網頁的設計圖,這個設計圖一定是定寬的。（設計師一般是根據375視口來設計的） 比如這個設計圖是600px寬度, logo 120px, nav彈性的, btn 120px 此時有經驗的前端開發工程師,一定不會用px當做單位,會進行計算。 比如html標簽的font-size:16px;那么120/16= 7.5rem ,所以logo的width就是7.5rem. 每次出的新手機視口寬度都不一樣，我們不可能每次出一個視口不一樣的手機，然后在css代碼里加上這個視口寬度的媒體查詢吧？這幾吧沒完沒了！ 我們可以引入一個[flexible.js](https://github.com/amfe/lib-flexible)來自動動態設置媒體查詢的根字號font-size 每次我們要的到rem的值都需要手動計算，而css不支持，less預編譯處理器可解決此問題，以375視口來設計來舉例如with:(68/375.rem)