一、排版问题

在公众号中,例如这种页面。由于不同手机屏幕长度不一致,导致页面中间部分高度不定,且上下两部分的高度也因机型问题不适宜定死值。因此,中间部分建议使用js获取上下部分的实际站位高度以及屏幕总高度。通过屏幕高减去上下部分的高度来确定中间部分的高度。

微信公众号CSS样式常见问题解析

二、行高问题

由于安卓系统本身对行高解析的缺点,在不同的安卓手机中普遍存在字与同行的小图标不对齐的问题,对于此情况,一般使用两种解决方法。第一种:使用定位。给父元素一个padding-left值,img标签使用absolute定位(左右值根据psd走,top值50%,margin-top值为宽度一半。)。第二种为背景图定位(仅限于公众号)。给父元素一个padding-left值,然后将要定位的图片写在父元素的background属性中。然后控制属性background-position:左右值 50%;进行背景图定位。

三、通过css控制宽高一致(宽的值为百分比)

很多页面尤其是列表页。会有这样的排版。由于使用js操控比使用class进行css操控更消耗性能,所以如果能用css解决,尽量不用js解决。我们可以使用下面的方法解决:

微信公众号CSS样式常见问题解析

效果如图:

微信公众号CSS样式常见问题解析

四、在使用fixed定位时

ios系统会存在一个坑。定位时左右值(left、right)和上下值(top、bottom)这两组值必须各存在一个,不然定位的东西会消失。

相关文章:

  • 2021-12-14
  • 2021-11-19
  • 2021-11-12
  • 2021-12-20
猜你喜欢
  • 2021-11-19
  • 2021-11-20
  • 2022-12-23
  • 2021-09-17
  • 2022-12-23
  • 2022-01-07
  • 2021-05-04
相关资源
相似解决方案