dom自適應大小與排版的一些研究

2021-07-04 10:53:13 字數 417 閱讀 3703

今天在研究怎麼不用media queries去寫幾套css,直接用vw,vh這些自適應單位去自適應一些絕對定位的dom

剛開始入手時遇到的幾個問題:

1.是正圓,螢幕高寬比率不同,用%之類的獲取父級高寬的自適應單位,就不能達到正圓效果

2.如果高寬統一用vw作單位,能達到正圓,但在排版時,垂直布局top用vh,dom的高度用vw就預計不到高度,影響下面元素的位置

於是,把正圓的高與寬都設為40vh,往下面的dom就可以用top:vh繼續排列了

(bofangpanbox為外面綠圈容器)

#bofangpanbox

#bofangpan

cocos螢幕自適應的一些概念

螢幕自適應因情況不同,方法不同,這裡記錄幾個概念,懂了這幾個概念,cocos螢幕自適應問題應該容易解決。螢幕的的實際尺寸大小使用getframesize 獲取,代表螢幕大小,遊戲開發過程中,座標與螢幕實際尺寸並不對應,而是對應於設計辨率,這樣針對不同的螢幕,程式根據適配模式 固定寬,固定高,無邊框 ...

關於網頁自適應的一些注意事項

如果要使用 media screen and max width xpx 或 media screen and max height xpx 則需要在網頁頭中增加 width device width 寬度等於當前裝置的寬度 width為瀏覽器顯示頁面的有效寬度,不是解析度的寬度,因一般瀏覽器左右兩...

Dom的一些操作

dom 的意思是 文字 物件 模型.寫幾個常用的dom 方便以後查詢 document.getelementbyid id 這個的出鏡率非常的高 有華山那麼高.document.getelementsbytagname name 封裝的時候是必用的 obj.previoussibling 已知節點的...