自適應布局

CoorChice 發布于2019-08-30 10:59 / 1328人閱讀

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

常見字體單位

rem

1. px

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

2. em

如不設置，1em = 16px，相對父元素自適應

3. rem

如不設置，1em = 16px，相對根元素自適應

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

1.4em = 14px 

1.4rem = 14px

布局

常見布局

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

流行布局

一般來說拿到的是640px和750px的設計稿

1.rem布局

寫js根據dpr和傳入的設計稿寬度動態改變

2.vw布局

根元素這樣寫

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

原因是

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

GPU云服務器云服務器自適應文本自適應文字自適應自適應沉底

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114695.html

margin詳解

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

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

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

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

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

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

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

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

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

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