1. 程式人生 > >微信公眾號CSS樣式常見問題解析

微信公眾號CSS樣式常見問題解析

一、排版問題

在公眾號中,例如這種頁面。由於不同手機螢幕長度不一致,導致頁面中間部分高度不定,且上下兩部分的高度也因機型問題不適宜定死值。因此,中間部分建議使用js獲取上下部分的實際站位高度以及螢幕總高度。通過螢幕高減去上下部分的高度來確定中間部分的高度。

二、行高問題

由於安卓系統本身對行高解析的缺點,在不同的安卓手機中普遍存在字與同行的小圖示不對齊的問題,對於此情況,一般使用兩種解決方法。第一種:使用定位。給父元素一個padding-left值,img標籤使用absolute定位(左右值根據psd走,top值50%,margin-top值為寬度一半。)。第二種為背景圖定位(僅限於公眾號)。給父元素一個padding-left值,然後將要定位的圖片寫在父元素的background屬性中。然後控制屬性background-position:左右值 50%;進行背景圖定位。

三、通過css控制寬高一致(寬的值為百分比)

很多頁面尤其是列表頁。會有這樣的排版。由於使用js操控比使用class進行css操控更消耗效能,所以如果能用css解決,儘量不用js解決。我們可以使用下面的方法解決:

效果如圖:

四、在使用fixed定位時

ios系統會存在一個坑。定位時左右值(left、right)和上下值(top、bottom)這兩組值必須各存在一個,不然定位的東西會消失。