rem適配布局
rem基礎
rem是乙個單位
rem（root em）是乙個相對單位，類似於em，em是父元素字型大小
不同的是rem的基準是相對於html元素的字型大小
比如，根元素（html）設定font-size=12px；非根元素設定width:2rem;則換成px表示就是24px；
rem的優點就是可以通過檢測**查詢來修改html裡面的文字大小來改變元素的大小
**查詢
**查詢（media query）是css3新語法。
1.使用@media查詢，可以針對不同的**型別定義不同的樣式
2.@media可以針對不同的螢幕尺寸設定不同的樣式
3.當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面
4.目前針對很多蘋果手機、android手機，平板等裝置都用得到多**查詢
語法規範
@media mediatype and not|only (media feature)
1.用@media開頭 注意@符號
2.mediatype**型別
將不同的終端裝置劃分成不同的型別，稱為**型別
all 用於所有裝置
print 用於印表機和列印預覽
screen 用於電腦螢幕，平板電腦，只能手機等
3.關鍵字and not only
關鍵字將**型別或多個**特性鏈結到一起作為**查詢的條件
1.and：可以將多個**特性連線到一起，相當於「且」的意思
2.not:排除某個**型別，相當於「非」的意思，可以省略
3.only：指定某個特定的**型別，可以省略
4.media feature **特性必須有小括號包含
**特性：每種**特性都具體各自不同的特性，根據不同**型別的**特性設定不同的戰士風格。我們暫且了解三個。
注意他們要加小括號包含
width 定義輸出裝置中頁面可見區域的寬度
min-width 定義輸出裝置中頁面最小可見區域寬度
max-width 定義輸出裝置中頁面最大可見區域寬度
引入資源
當樣式比較繁多的時候，我們可以針對不同的**使用不同stylesheets
願意來，就直接在link中判斷裝置的尺寸，然後引用不同的css檔案。
我們**查詢最好的方法是從小到大
rem適配方案
我們是配的目標是什麼
怎麼去達到這個額目標的
在實際的開發當中使用
讓一些不能等比自適應的元素，達到當裝置尺寸發生改變的時候，等比例適配當前裝置
使用**查詢更具不同裝置按比例設定html的字型大小，然後頁面元素使用rem做尺寸單位，當html字型大小變化元素尺寸也會發生變化，從而達到等比縮放的適配。
rem實際開發適配方案
按照設計稿於裝置寬度的比例，動態計算並設定html根標籤的font-size大小；**查詢
css中，設計稿元素的寬、高、相對位置等取值，按照同等比例換算為rem為單位的值。
技術1：less **查詢 rem
rem適配布局
rem root em 是乙個相對單位，類似em，em是相對于父元素的字型大小 不同的是rem的基準是相對於html元素的字型大小 rem的優勢 父元素文字大小可能不一致，但是整個頁面只有乙個html，可以很好來控制整個頁面的元 素大小 查詢 media query 是css3新語法 media m...
rem適配布局
思考？頁面布局文字能否隨著螢幕大小變化而變化？流式布局和flex布局主要針對與寬度布局，那高度如何設定？怎麼樣讓螢幕發生變化的時候元素高度和寬度等比例縮放？這時就需要用到rem適配布局。rem root em 是乙個相對單位，類似於em,em是相對于父元素的字型大小。而rem的基準是相對於html元...
詳解rem 適配布局
當今手機種類繁多 且不說iphone系列，安卓手機的種類已經數不勝數了，所以不可能每一款手機都要寫一套布局樣式，這也是不可能做到的，但是對於越來越精益求精的前端來說 當然要找到乙個合理的解決方案。rem 就是用來自適應布局的。適配要達到的效果，如下圖 簡單的示範一下 兩個div不論在大屏還是小屏上都...