rem適配布局

2022-06-13 23:33:18 字數 757 閱讀 2241

思考?

頁面布局文字能否隨著螢幕大小變化而變化?

流式布局和flex布局主要針對與寬度布局,那高度如何設定?

怎麼樣讓螢幕發生變化的時候元素高度和寬度等比例縮放?

這時就需要用到rem適配布局。

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

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

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

rem單位是跟著html走的,**查詢可以根據不同裝置寬度來修改樣式,所以**查詢+rem 就可以實現不同裝置寬度,實現頁面元素大小的的動態變化

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

all / print / screen     所有裝置 / 印表機和列印預覽 / 電腦螢幕、平板電腦,智慧型手機等

width / max-width / min-width

示例:@media screen and (max-width: 800px) }

不同裝置引入不同的css檔案資源   檔名可以設定為style640..style1500..style1920...

**查詢最好的方法是從小到大。

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 適配布局

當今手機種類繁多 且不說iphone系列,安卓手機的種類已經數不勝數了,所以不可能每一款手機都要寫一套布局樣式,這也是不可能做到的,但是對於越來越精益求精的前端來說 當然要找到乙個合理的解決方案。rem 就是用來自適應布局的。適配要達到的效果,如下圖 簡單的示範一下 兩個div不論在大屏還是小屏上都...