自適應問題的處理

2021-08-29 02:50:59 字數 519 閱讀 9726

之前用的自適應都是用rem或者em。最近覺得另一種方法不錯,分享一下最近用vh和vw的用法。

vh官方給的解釋是:    相對於視口的高度,視口被均分為100單位的vh。

vh官方給的解釋是:    相對於視口的寬度。視口被均分為100單位的vw。

補充說明一下,用vh和vw寫css需要運用calc()進行運算。

下面開始正式demo。

body,html

.div

以上就是自適應的寫法,上面的寫法針對的是設計稿是5760*2160的解析度,如果設計師給的設計稿是1920*1080的話寫法就是以下:

.big_circle
這個自適應布局只適用於css的布局。

最後說一下原理,首先視窗都是分成100分的,100/1920就是1920的每個畫素等於多少個vw,設計稿給的132畫素,只需進行一下運算 cacl(100/1920*132vw)即可。

xib自適應的問題

1.預設的話,如果你的介面上包含scrollview tableview等全屏控制項話,介面是不用改的,因為中間部分會自動拉伸。2.如果不包含全屏控制項的話,除xib的size設定成retina 3.5 full screen外,還要再新增乙個專門針對 iphone5 的xib。新建乙個xib檔案,...

vue Echarts 自適應問題

上篇講了echarts餅圖的具體使用方法 下面說下做專案過程中遇到的圖的自適應問題 1.適應瀏覽器視窗 上篇的具體 中有哦 window.onresize mychart.resize 自適應瀏覽器視窗的大小2.最近的專案中,由於頁面上有側邊欄,側邊欄進行收縮時,餅圖不能自適應,windows自帶的...

unity UGUI自適應問題

初入程式深似海呀!在做專案ui時必須經歷的乙個問題就是ui自適應問題,啥也不懂的時候,難以避免的就是稍微一調整螢幕解析度,ui就變了,就變了!這就很難受。那麼下面來稍微了解一下ui自適應。官方文件 ui scale mode 確定如何縮放畫布中的ui元素。當我們直接在scene中建立乙個canvas...