remcss原生適配方案

2021-10-10 08:00:53 字數 553 閱讀 1201

less檔案 引入less檔案 方法:

宣告:@import "被引入檔名稱.less"

;定義:

ui設計圖尺寸:@my_ui

ui設計圖份數:@fs

設計圖位元組大小:@size

公式:@size : @my_ui / @fs

例如:螢幕尺寸:400px ui設計圖尺寸寬度640px 分10份

html頁面:

<

/div>

css頁面:

@ui_my:

640px;

@fs:10;

@size: @ui_my / @fs;

@media (width:

400px)

} div

此時html根位元組就調整為40px

寬度在400px螢幕顯示的div模組大小 為100*40

/64=62.5px

62.5px / html根位元組 =

1.5625rem (ui設計圖在400px螢幕單個元素的數值)

HTML 適配方案

標準適配方案 meta vp tab 快捷方式 示例 內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容 內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容 內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容 ...

16 9適配方案

1 移動端自適應布局 按我的理念來看,移動端自適應布局中,最常用的應該算是rem為單位的基準點布局了吧。而在rem的布局中,其實最重要的點是,如何來計算這個html的font size的大小。還有一些不是需要那麼細緻的處理,也可以直接使用css的media屬性,根據元素的寬度進行設定html元素的f...

rem 適配方案

首先我們要明白,為什麼要用rem單位呢,常用的px不好嗎?原因是如果我們用px作為長度大小單位的話,就無法根據螢幕大小變化實時改變頁面元素的大小,反之,rem就可以做到實時適配。其次,我們也要清楚以rem為單位的元素大小是根據css html根標籤下的文字大小 fontsize 來改變的。在實際開發...