REM響應式布局

因為能相容，手機、平板、pc終端既省錢又省力；

有很多**的解決辦法是，為不同的裝置提供不同的mobile版本，或者iphone/ipad版本。這樣效果***，但是比較麻煩，同時要維護好幾個版本；

於是，「」「一次設計，普遍適用」，根據螢幕寬度，自動調整布局（layout）

第一步： meta:vp標籤

<

meta 
name
="viewport"
content
="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
>

上面**的意思是。

viewport是網頁預設的寬度高度

content="width=device-width 網頁寬度預設螢幕寬度 user-scalable=no,（禁止縮放） initial-scale=1.0,（原始縮放比例） maximum-scale=1.0, minimum-scale=1.0"（最大最小縮放比例）

第二部：不使用絕對寬度

由於網頁會根據螢幕寬度調整布局，所以不能使用絕對寬度，也不能使用具有絕對寬度的元素。（重點）

第三部：相對大小字型

使用rem,em對字型進行設定;

rem相對根元素中的fontsize

html

p

em,相對上級元素

html

h1

p

怎麼選擇em,rem？？？

如果這個元素有其他屬性與自身字型有關聯，使用em,剩餘使用rem

例子

html.tit.tith1.tith2.tith3

<

h1 class
="tit tith1"
>我是h1
h1>
<
h2 class
="tit tith2"
>我是h2
h2>
<
h2 class
="tit tith3"
>我是h3
h2>

所有這個元素中與em相關的尺寸全部改變;

rem則任何尺寸都不進行改變

html.tit.tith1.tith2.tith3

第四部：流動布局

.main .leftbar

裝不下會自動跑到下面去，絕對定位的使用一定要小心；

第五部：css載入media

//上面的**意思是，如果螢幕寬度小於400畫素（max-device-width: 400px），就載入tinyscreen.css檔案。
//如果螢幕寬度在400畫素到600畫素之間，則載入smallscreen.css檔案。

第六部：**查詢media

@media screen and (max-device-width: 400px) #sidebar }

//如果螢幕寬度小於400畫素，則column塊取消浮動（float:none）、寬度自動調節

第七部：響應式

img //老版本ie使用

img

不過，有條件的話，最好還是根據不同大小的螢幕，載入不同解析度的。太累了，沒條件；

轉紫阮一峰響應式布局

rem響應式布局

監聽瀏覽器，針對不同解析度計算font size function doc,win if doc.addeventlistener return win.addeventlistener resizeevt,recalc,false doc.addeventlistener domcontentlo...

如何利用rem做響應式布局

第一步 由於一些解析度不同等的一些原因，要做到能夠適配，開始要加這個一句話 詳情的參考 第二步 在css中寫這麼一些clss類，實現根據螢幕的大小設定字型大小，為什麼設定字型，由於rem這個計算單位需要參考html的font size值來進行計算，由於計算得到的結果不同，大小也自然不同！html m...

資料大屏響應式布局rem

資料大屏響應式布局，主要用到rem，涉及乙個rem.js檔案，需要安裝乙個依賴 postcss px2rem 此外還用到vw vh 百分比相對單位來設定布局寬度。1 什麼是rem？摘自菜鳥教程 rem是css3新增的乙個相對單位 root em，根em 這個單位與em有什麼區別呢？區別在於使用rem...