自適應(yīng)布局

CoorChice 發(fā)布于2019-08-30 10:59 / 1335人閱讀

摘要：常見字體單位絕對單位，頁面按精確像素展示如不設(shè)置，，相對父元素自適應(yīng)如不設(shè)置，，相對根元素自適應(yīng)和為相對布局，一般在設(shè)置這樣比較好換算，即布局常見布局流行布局一般來說拿到的是和的設(shè)計稿布局寫根據(jù)和傳入的設(shè)計稿寬度動態(tài)改變布局根元素這樣寫

常見字體單位

rem

1. px

絕對單位，頁面按精確像素展示

2. em

如不設(shè)置，1em = 16px，相對父元素自適應(yīng)

3. rem

如不設(shè)置，1em = 16px，相對根元素自適應(yīng)

em和rem為相對布局，一般在body設(shè)置font-size:62.5%; 這樣比較好換算，即

1.4em = 14px 

1.4rem = 14px

布局

常見布局

https://www.cnblogs.com/zhuzh...

流行布局

一般來說拿到的是640px和750px的設(shè)計稿

1.rem布局

寫js根據(jù)dpr和傳入的設(shè)計稿寬度動態(tài)改變

2.vw布局

根元素這樣寫

html {
    font-size: 13.3333333333333vw // 100px
}

原因是

拿到設(shè)計稿一般是750px，就是750px = 100vw，那么1px是0.13333333333vw，那么100px就是 13.3333333333333vw了，
當(dāng)然也可以用js計算，這個比較方便

云服務(wù)器 GPU云服務(wù)器自適應(yīng) 文本自適應(yīng) 文字自適應(yīng) 自適應(yīng)沉底

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/114695.html

相關(guān)文章

margin詳解

摘要：二的賦值普通元素的百分比都是相對于容器的寬度計算。絕對定位元素的百分比，絕對定位元素的百分比是相對于第一個定位祖先元素的寬度計算應(yīng)用寬高自適應(yīng)矩形傳送門之所以會是，是因為垂直方向上發(fā)生重疊。一. margin對尺寸的影響 1.可視尺寸 a.適用于沒有設(shè)定width/height的普通block水平元素float元素、absolute/fixed元素、inline元素、table-ce...

darry 2019-08-29 11:06 評論0 收藏0
微信小程序新單位rpx與自適應(yīng)布局

摘要：布局上面四個方法，各有優(yōu)缺點，現(xiàn)在回頭看看微信的，相信大家已經(jīng)有所啟發(fā)，實際上就是系統(tǒng)級的把頁面按比例分割份，，或者伸縮布局的。也就是說，微信小程序的布局幫大家把布局的設(shè)置根元素字體尺寸這步省了，或者減少了伸縮布局不能開啟的問題。 rpx是微信小程序新推出的一個單位，按官方的定義，rpx可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)，在rpx出現(xiàn)之前，web頁面的自適應(yīng)布局已經(jīng)有了多種解決方案，為什么微信...

LeviDing 2019-08-29 11:27 評論0 收藏0
微信小程序新單位rpx與自適應(yīng)布局

摘要：布局上面四個方法，各有優(yōu)缺點，現(xiàn)在回頭看看微信的，相信大家已經(jīng)有所啟發(fā)，實際上就是系統(tǒng)級的把頁面按比例分割份，，或者伸縮布局的。也就是說，微信小程序的布局幫大家把布局的設(shè)置根元素字體尺寸這步省了，或者減少了伸縮布局不能開啟的問題。 rpx是微信小程序新推出的一個單位，按官方的定義，rpx可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)，在rpx出現(xiàn)之前，web頁面的自適應(yīng)布局已經(jīng)有了多種解決方案，為什么微信...

thursday 2019-08-20 11:42 評論0 收藏0
微信小程序新單位rpx與自適應(yīng)布局

摘要：布局上面四個方法，各有優(yōu)缺點，現(xiàn)在回頭看看微信的，相信大家已經(jīng)有所啟發(fā)，實際上就是系統(tǒng)級的把頁面按比例分割份，，或者伸縮布局的。也就是說，微信小程序的布局幫大家把布局的設(shè)置根元素字體尺寸這步省了，或者減少了伸縮布局不能開啟的問題。 rpx是微信小程序新推出的一個單位，按官方的定義，rpx可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)，在rpx出現(xiàn)之前，web頁面的自適應(yīng)布局已經(jīng)有了多種解決方案，為什么微信...

Java_oldboy 2019-08-01 15:50 評論0 收藏0
css上中下布局自適應(yīng)中間，左右布局自適應(yīng)左側(cè)display: table

摘要：在我們經(jīng)常用到固定頭部和底部，自適應(yīng)中間部分，或者固定左側(cè)，自適應(yīng)右側(cè)等。在網(wǎng)上看了很多方法，一般都是通過絕對定位完成，具體可以網(wǎng)上去搜，這樣可以完成上中下的布局，但是這次基礎(chǔ)上再做左右布局浮動會出現(xiàn)問題，具體什么問題我沒有深究。在css我們經(jīng)常用到固定頭部和底部，自適應(yīng)中間部分，或者固定左側(cè)，自適應(yīng)右側(cè)等。在網(wǎng)上看了很多方法，一般都是通過絕對定位完成，position: absol...

Baaaan 2019-08-30 13:00 評論0 收藏0