移動WEB開發之rem適配布局

2021-10-05 18:51:56 字數 1153 閱讀 5683

rem單位

rem(root em)是乙個相對單位,類似於em,em是父元素字型大小。

不同的是rem的基準是相對於html元素的字型大小。

比如,根元素(html)設定font-size=12px;非根元素設定width:2rem;則換成px表示就是24px;

2.1 **查詢

**查詢(media query)是css3新語法。

2.1 語法規範

@media mediatype and|not|only (media feature)

1.mediatype查詢型別

將不同的終端裝置劃分成不同的型別,稱為**型別

值解釋說明

all用於所有裝置

print

用於印表機和列印預覽

screen

用於電腦螢幕,平板電腦,智慧型手機等

2.關鍵字

關鍵字將**型別或多個**特性連線到一起做為**查詢的條件

3.**特性

每種**型別都具有各自不同的特性,根據不同**型別的**特性設定不同的展示風格。我們暫且了解三個。

注:要加小括號包含

解釋說明

width

定義輸出裝置中頁面可見區域的寬度

min-width

定義輸出裝置中頁面最小可見區域的寬度

max-width

定義輸出裝置中頁面最大可見區域的寬度

2.3 **查詢+rem實現元素動態大小變化

rem單位是跟著html來走的,有了rem頁面元素可以設定不同大小 尺寸

**查詢可以根據不同裝置寬度來修改樣式

**查詢+rem就可以實現不同裝置寬度,實現頁面元素大小的動態變化

2.4 引入資源

當樣式比較繁多的時候,我們可以針對不同的**使用不同stylesheets(樣式表)

原理:就是直接在link中判斷裝置的尺寸,然後引用不同的css檔案

1.語法規範

"stylesheet" media=

"mediatype and|not|only (media feature)" href=

"mystylesheet.css"

>

rem適配布局

rem適配布局 rem基礎 rem是乙個單位 rem root em 是乙個相對單位,類似於em,em是父元素字型大小 不同的是rem的基準是相對於html元素的字型大小 比如,根元素 html 設定font size 12px 非根元素設定width 2rem 則換成px表示就是24px 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元...