關於布局以及rem的小結

2021-09-11 13:45:31 字數 4096 閱讀 2946

動態計算html的font-size,核心是切換不同移動裝置通過js獲取裝置寬度,然後按比例計算html的font-size的值,動態變化。

var d = document.documentelement;//獲取html元素

var cw = d.clientwidth || 750;

d.style.fontsize = (20 * (cw / 375)) > 40 ? 40 + 'px' : (20 * (cw / 375)) + 'px';

複製**

設計稿橫向解析度為375(iphone6),計畫20px為1rem;

布局的時候,各元素的css尺寸= 20 * (裝置寬度/設計稿豎向解析度)。 完整**:

window.addeventlistener(('orientationchange'

in window ? 'orientationchange' : 'resize'),

(function

() c();

return c;

})(), false);

複製**

"one">

"two">

複製**

這裡需要注意下父元素必須有指定的width和height。

"one">

"two">

複製**

這裡需要注意下父元素必須有指定的width和height。父元素display:flex;子元素align-sekf:center;

"one">

"two">

複製**

對於父元素和子元素的寬度都確定的情況,適合通過display:table-cell和margin-left實現css水平居中。 使用時,父元素display:table-cell,子元素給剩餘寬度一半的margin-left。

"one">

"two">

複製**

對於父元素和子元素的寬度都確定的情況,使用時,父元素position:absolute,子元素給剩餘寬度一半的margin-left。

"one">

"two" style="color: white">我是子元素

複製**

這種方法可以確保子元素寬度不確定的情況下,也能實現css水平居中。需要注意的是,需要配合「margin: 0 auto; text-align: center」使用。

"one">

"two" style="color: white">

複製**

display:inline-block能改父元素內的子元素的表達樣式,同樣需要配合「margin: 0 auto; text-align: center」使用。

"one">

"two" style="color: white">

複製**

需要注意的是父元素要有固定的width和height。

"one">

"hide">

"two">

複製**

我們可以通過增加乙個隱藏節點,然後使其float:left,這樣子元素就會被隱藏節點推著水平居中。 這種增加隱藏節點方法也適用於css垂直居中,原理一樣,但是不用float。

"cell">

"content">content goes here

複製**

這裡關於vertical-align囉嗦兩句:vertical-align屬性只對擁有valign特性的html元素起作用,例如**元素中的td,th等等,而像div,span這樣的元素是不行的。valign屬性規定單元格中內容的垂直排列方式,語法:td valign="value"

"floater">

"content">content here

複製**

需要注意的是 ie(ie8 beta)中無效 無足夠空間時,content 被截斷,但是不會有滾動條出現

"content"> content here

複製**

需要注意的是只對文字有效,塊級元素無效。多行時,斷詞比較糟糕。

"box">

"child">我是測試div

複製**

這個方法相容性不錯,但是有乙個小缺點:必須提前知道被居中塊級元素的尺寸,否則無法準確實現垂直居中。

"box">

"child">

我是一串很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長的文字

複製**

"box">

"child">我也是個測試div

複製**

margin的取值也可以是百分比,這時這個值規定了該元素基於父元素尺寸的百分比,可以根據實際的使用場景來決定是用具體的數值還是用百分比。

"box">

"child">呆呆今天退役了(。﹏。)

複製**

把要垂直居中的元素相對于父元素絕對定位,top和bottom設為相等的值,我這裡設成了0,當然你也可以設為99999px或者-99999px無論什麼,只要兩者相等就行,這一步做完之後再將要居中元素的margin設為auto,這樣便可以實現垂直居中了。被居中元素的寬高也可以不設定,但不設定的話就必須是這種自身就包含尺寸的元素,否則無法實現。

"box">

"child">今天西安的霾嚴重的嚇人,剛看了一眼pm2.5是422

複製**

這種實現方式非常簡單,就是給父元素設定相等的上下內邊距,則子元素自然是垂直居中的,當然這時候父元素是不能設定高度的,要讓它自動被填充起來,除非設定了乙個正好等於上內邊距+子元素高度+下內邊距的值,否則無法精確的垂直居中。

"box">

"base">

"child">今天寫了第一篇部落格,希望可以堅持寫下去!

複製**

首先設定乙個高度等於父元素高度一半的第三方基準元素,那麼此時該基準元素的底邊線自然就是父元素縱向上的中分線,做完這些之後再給要垂直居中的元素設定乙個margin-top,值的大小是它自身高度的一半取負,則實現垂直居中。

"box">

霧霾天氣,太久沒有打球了

複製**

"box">

"child">

程式設計師怎麼才能保護好眼睛?

複製**

"box">

"child">

答案當然是多用綠色的背景哈哈

複製**

"box">複製**

關於rem布局

我們知道,當使用rem布局,並配合js動態按照比例設定html標籤上的rem值時,整個頁面是按照螢幕的寬度來整體縮放的。對於高度不限制的頁面 也就是超出一屏頁面可以滾動 這種方案沒有任何問題,簡單暴力。但是對於一些需要布滿一整屏的頁面 比如現在流行的上下 左右滑動的那種 由於乙個頁面的元素必須在乙個...

關於rem布局摘錄

一般情況下使用em或者rem的時候,會寫個樣式 html,body html,這樣設定方便了em rem與px相互轉換,因為瀏覽器預設字型大小16px,所以em的初始值為1em 16px。當設定了body時,1em則 16px 62.5 10px。但是由於谷歌不相容,所以我個人習慣使用 html。目...

關於rem布局的理解

將頁面的 設計稿等比例的進行縮放 首先是計算視覺稿到頁面的比例 假設這個比例是a a 視覺稿的寬度 頁面的寬度 document.documentelement.clientwidth 根據這個比率去計算 螢幕上應該顯示的寬度 假設這個值是 b b 量取的寬度 a 現在我們獲取了元素在螢幕上顯示的乙...