rem是乙個單位，首先有乙個概念上的認知，例如：
html
div
//此時這個div的寬高就是5x20=100px
em是先根據它自身的字型大小來計算，例如：
html
div
如果它自身沒有定義字型大小，那它就會根據父元素的字型大小來計算，如果父元素也沒有，就繼續一層一層往上找。
rem可以讓乙個頁面在不同的移動裝置上都可以正常顯示，它的本質是等比例縮放。
因為不同裝置的螢幕不同，從750px-320px不等，如果不進行等比縮放的話就會有留白等各種問題。
這裡的計算方式有兩種
1、手動設定不同螢幕寬度下的html字型大小
2、通過js來動態改變
這裡先看一下第一種：
我們以750px的手機螢幕為例，先將螢幕的寬度劃分為15等份，750/15=50px，這個作為在極端情況下螢幕的字型大小，也就是
@media screen and (min-width:750px)
}
可以發現在不同的螢幕寬度下，字型大小和螢幕寬度的比例是一樣的
當前主流的螢幕有
320px
360px
375px
384px
400px
414px
480px
510px
600px
620px
640px
720px
750px
這麼多種，所以要分別設定他們的字型大小，這時候就需要用到less預處理語言和**查詢
1.結構
@media mediatype and|not|only (media features)
2.mediatype（**的種類，移動端是希望在不同的手機螢幕大小上面設定不同的樣式，所以是screen）
- all 所有種類
- print 印表機
- screen 螢幕 （現階段主要使用）
3.與或非
現階段也只用到and，表示在螢幕上 並且 滿足條件時
4.media features
- width
- max-width--小於等於
- min-width--大於等於
1.定義變數@color
: red;
div
2.選擇器的巢狀html結構如下：
class
="box"
>
class
="wrap"
>
href
="#"
>
a>
div>
div>
.box .wrap a
.box
}}
3. 計算@media screen and (
min-width
: 414px)
}
這樣就不需要再去拿計算器算了
4.混入@media screen and (
min-width
: 320px) }
@media screen and (
min-width
: 360px) }
@media screen and (
min-width
: 375px) }
@media screen and (
min-width
: 384px) }
@media screen and (
min-width
: 400px) }
@media screen and (
min-width
: 414px) }
@media screen and (
min-width
: 480px) }
@media screen and (
min-width
: 510px) }
@media screen and (
min-width
: 600px) }
@media screen and (
min-width
: 620px) }
@media screen and (
min-width
: 640px) }
@media screen and (
min-width
: 720px) }
@media screen and (
min-width
: 750px)
}
因為html的font-size都是通過螢幕畫素值/15得到的，所以我們可以定義乙個變數
@basefont
: 15;
.media (
@width)
}}
.media (320px)
;.media (360px)
;.media (375px)
;.media (384px)
;.media (400px)
;.media (414px)
;.media (480px)
;.media (510px)
;.media (600px)
;.media (620px)
;.media (640px)
;.media (720px)
;.media (750px)
;
關於rem布局
我們知道，當使用rem布局，並配合js動態按照比例設定html標籤上的rem值時，整個頁面是按照螢幕的寬度來整體縮放的。對於高度不限制的頁面 也就是超出一屏頁面可以滾動 這種方案沒有任何問題，簡單暴力。但是對於一些需要布滿一整屏的頁面 比如現在流行的上下 左右滑動的那種 由於乙個頁面的元素必須在乙個...
移動布局rem
content width device width,minimum scale 1.0,maximum scale 1.0,user scalable no name viewport html 為什麼設定為37.5px？你也可以設定為其它的值。但為了易於換算和記憶，我們預設為每種螢幕設定他的基礎...
rem布局解析
移動端的螢幕大小各異,尤其是安卓機,千奇百怪,各種尺寸的機型都有,而且有1倍屏,2倍屏，3倍屏之分，作為精益求精的前端，我們希望找到一種完美適配各種機型的方案。rem是現在主流的移動端自適應布局方案，本文主要介紹了rem布局的原理和通用方案 首先說一下，我們想要達到的自適應效果是什麼。很簡單 元素 ...