摘要:常見字體單位絕對(duì)單位,頁面按精確像素展示如不設(shè)置,,相對(duì)父元素自適應(yīng)如不設(shè)置,,相對(duì)根元素自適應(yīng)和為相對(duì)布局,一般在設(shè)置這樣比較好換算,即布局常見布局流行布局一般來說拿到的是和的設(shè)計(jì)稿布局寫根據(jù)和傳入的設(shè)計(jì)稿寬度動(dòng)態(tài)改變布局根元素這樣寫
常見字體單位
px
em
rem
1. px絕對(duì)單位,頁面按精確像素展示
2. em如不設(shè)置,1em = 16px, 相對(duì)父元素自適應(yīng)
3. rem如不設(shè)置,1em = 16px, 相對(duì)根元素自適應(yīng)
em和rem為相對(duì)布局,一般在body設(shè)置font-size:62.5%; 這樣比較好換算,即
1.4em = 14px 1.4rem = 14px布局
常見布局
https://www.cnblogs.com/zhuzh...
流行布局
一般來說拿到的是640px和750px的設(shè)計(jì)稿1.rem布局
寫js根據(jù)dpr和傳入的設(shè)計(jì)稿寬度動(dòng)態(tài)改變
2.vw布局根元素這樣寫
html { font-size: 13.3333333333333vw // 100px }
原因是
拿到設(shè)計(jì)稿一般是750px,就是750px = 100vw,那么1px是0.13333333333vw,那么100px就是 13.3333333333333vw了,
當(dāng)然也可以用js計(jì)算,這個(gè)比較方便
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/109837.html
摘要:布局上面四個(gè)方法,各有優(yōu)缺點(diǎn),現(xiàn)在回頭看看微信的,相信大家已經(jīng)有所啟發(fā),實(shí)際上就是系統(tǒng)級(jí)的把頁面按比例分割份,,或者伸縮布局的。也就是說,微信小程序的布局幫大家把布局的設(shè)置根元素字體尺寸這步省了,或者減少了伸縮布局不能開啟的問題。 rpx是微信小程序新推出的一個(gè)單位,按官方的定義,rpx可以根據(jù)屏幕寬度進(jìn)行自適應(yīng),在rpx出現(xiàn)之前,web頁面的自適應(yīng)布局已經(jīng)有了多種解決方案,為什么微信...
摘要:布局上面四個(gè)方法,各有優(yōu)缺點(diǎn),現(xiàn)在回頭看看微信的,相信大家已經(jīng)有所啟發(fā),實(shí)際上就是系統(tǒng)級(jí)的把頁面按比例分割份,,或者伸縮布局的。也就是說,微信小程序的布局幫大家把布局的設(shè)置根元素字體尺寸這步省了,或者減少了伸縮布局不能開啟的問題。 rpx是微信小程序新推出的一個(gè)單位,按官方的定義,rpx可以根據(jù)屏幕寬度進(jìn)行自適應(yīng),在rpx出現(xiàn)之前,web頁面的自適應(yīng)布局已經(jīng)有了多種解決方案,為什么微信...
摘要:布局上面四個(gè)方法,各有優(yōu)缺點(diǎn),現(xiàn)在回頭看看微信的,相信大家已經(jīng)有所啟發(fā),實(shí)際上就是系統(tǒng)級(jí)的把頁面按比例分割份,,或者伸縮布局的。也就是說,微信小程序的布局幫大家把布局的設(shè)置根元素字體尺寸這步省了,或者減少了伸縮布局不能開啟的問題。 rpx是微信小程序新推出的一個(gè)單位,按官方的定義,rpx可以根據(jù)屏幕寬度進(jìn)行自適應(yīng),在rpx出現(xiàn)之前,web頁面的自適應(yīng)布局已經(jīng)有了多種解決方案,為什么微信...
摘要:在我們經(jīng)常用到固定頭部和底部,自適應(yīng)中間部分,或者固定左側(cè),自適應(yīng)右側(cè)等。在網(wǎng)上看了很多方法,一般都是通過絕對(duì)定位完成,具體可以網(wǎng)上去搜,這樣可以完成上中下的布局,但是這次基礎(chǔ)上再做左右布局浮動(dòng)會(huì)出現(xiàn)問題,具體什么問題我沒有深究。 在css我們經(jīng)常用到固定頭部和底部,自適應(yīng)中間部分,或者固定左側(cè),自適應(yīng)右側(cè)等。在網(wǎng)上看了很多方法,一般都是通過絕對(duì)定位完成,position: absol...
閱讀 1862·2021-10-09 09:44
閱讀 3393·2021-09-28 09:35
閱讀 1385·2021-09-01 10:31
閱讀 1673·2019-08-30 15:55
閱讀 2714·2019-08-30 15:54
閱讀 939·2019-08-29 17:07
閱讀 1385·2019-08-29 15:04
閱讀 2012·2019-08-26 13:56