css js rem 自適應布局

2021-09-27 07:18:31 字數 842 閱讀 2370

因為手機的解析度各不相同,在移動端的適配就是乙個值得討論的問題。

關於rem布局的基本使用

rem 是 根元素的字型大小

其他元素可以根據這個大小進行布局

然後只需要根據獲取當前螢幕的寬度,修改rem 就可實現自適應布局

舉例說明

設計稿750 根元素字型大小為100px

要適配到 375的解析度

其實只要算出 375下 乙個畫素需要折合750下多少畫素就行了

750 / 375 = 2

也就是說 在 375下,一畫素需要折合750兩個畫素

1px /rem375 = 2px / rem750

rem375 = 1px * rem750/2px = 50

再換一種計算方式

因為在不同的尺寸下要實現相同的布局

那麼很明顯這些元素在不同的尺寸下所佔比例相同

即當前元素比當前rem 是相等的

把當前元素視為乙個寬百分之百的元素來看

750/100 = 375/ x

x = 375 * 100 /750

750下的顯示狀態

375下的顯示狀態

width 當前的尺寸

designwidth 設計稿寬度

自適應布局

請你說一說你知道的所有web布局方式?1.浮動 float left right 2.inline block display inline block 行內塊級 3.flexible box 彈性盒子 display flex 4.grid display grid 5.絕對 相對布局 posit...

CSS布局 自適應布局

網易雲課堂學習筆記二 自適應布局 1.float absolute margin left right2.float overflow left right 產生bfc3.table left,right 預設均分 left margin失效 4.flex left right 由 定寬 自適應 類...

右邊自適應 左右布局 css左右自適應布局

如果有這麼乙個表單需求,前面是乙個名稱,中間是乙個表單,右側是乙個按鈕或者乙個字串。需要自適應布局,名稱為固定長度,右側也是固定,中間部分自適應整個width。先來看看html標籤1 6 年齡歲 首先,我想到的有這麼幾種display,乙個是inline block。於是css就變成這樣1.name...