03 移動WEB開發 rem布局

2021-09-26 22:42:37 字數 929 閱讀 1422

rem (root em)是乙個相對單位

and|not|only:關鍵字

media feature: **特性,必須用小括號包含

示範:

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

@media screen and (

max-width

:640px)

}

/*當螢幕大於320px,引入1.css檔案*/

"stylesheet" href="1.css" media="screen and (min-width:320px)">

/*當螢幕大於640px,引入2.css檔案*/

"stylesheet" href="2.css" media="screen and (min-width:640px)">

變數,指沒有固定的值,可以改變的量

示範:

@color: pink;/* 定義 */

body

div

less中文**:http://

less

css.cn/

常見的css預處理器:sass、less、stylus

div

div:hover

div p

div p:hover

div

> p

}}

flexible.js + rem (推薦)

/*可以不加.less字尾名*/

@import "less檔名"

移動web開發 rem布局

rem單位 rem root em 是乙個相對單位,類似於em,em是父元素字型大小。不同的是rem的基準是相對於html元素的字型大小。比如,根元素 html 設定font size 12px 非根元素設定width 2rem 則換成px表示就是24px。根html 為 12px html 此時 ...

移動web開發之rem布局

理論基礎 什麼是rem?fontsize of the root elelment 說白了就是字型單位,是指相對於根元素的字型大小的單位。rem的優點 相對於流式布局 響應式布局等布局方式,rem更為靈活,可以根據根不同螢幕尺寸上的根元素來等比例適配。rem的基準值 根元素的字型大小 而網頁的根元素...

移動Web開發 rem布局 less

rem單位 rem root em 是乙個相對單位,是相對於html元素的字型大小 media可以針對不同的螢幕尺寸設定不同的樣式 media mediatype and 1.查詢型別 2.關鍵字 3.特性 4.查詢書寫規則 為了防止混亂,查詢我們要按照從小到大或者從大到小的順序來寫,但是我們最喜歡...