项目在前端布局时需要考虑页面兼容性的需求，特别是微信端和侧墙要适应不同机型的尺寸和分辨率，尽量保证元素布局不混乱、大小不扭曲变形。
微信端独有的
微信提供了rpx的相对尺寸进行屏幕宽度的自适应，不论是布局还是设置元素的宽度均十分便捷。但这种方式本质上和下面要说的百分比布局没有本质区别，只不过不需要手动指定从最外层（从<html>开始）到最内层所有嵌套标签的宽高。
比较优雅的方式
我认为的比较优雅的布局，是指仅需要静态设置元素的样式即可完成自适应布局。当页面大小变化时，不需要通过js动态改变元素的样式。最省心的方式就是采用百分比设置元素的定位和大小。
在我们的项目中，大致有如下几项布局需求：
- 所有元素均居中对齐
居中对齐也有很多实现方式，譬如可以指定元素的position、margin等属性值，一种一劳永逸的方式则是使用flex布局。flex作为一种响应式的布局，能随着页面的变化自动调整元素的定位。
selector{
display: flex;
flex-direction: row;
align-items: center; /*交叉轴对齐方式*/
justify-content：center; /*主轴对齐方式*/
}
为父级元素加上以上四行代码可以解决99%的垂直&水平居中对齐问题。
- 页面背景（即最外层组件）正好适应整个页面大小，不希望出现超出页面的部分；
selector{
/*绝对定位*/
/*也可以用fixed，即相对屏幕固定，但不适应微信端下拉刷新页面的功能需求*/
position:absolute;
/*百分比布局*/
width:100%;
height: 100%；
}
- 部分元素宽度/高度变占页面固定比例；
当所有外层元素的宽高均指定好后（这个很重要！！），采用百分比设置宽或高即可。 - 部分元素宽度/高度占满页面剩余空间。
selector{
/*绝对定位*/
position:absolute;
top: 200px;
bottom:0px;
}
/
若之前有元素的高度采用像素值，则其占据页面高度的比例就无法确定，导致后续元素也无法使用百分比布局。但如果需要只是简单的占满剩余空间，根据前面元素的总高度指定top值，再将bottom值设为0即可。
比较不优雅的方式
某些情况下，不可避免的需要用像素值指定宽高，例如需要元素的宽度自适应而长宽比不变，虽然宽度可以用百分比指定，但高度则需要js获取页面高度再通过相应的运算进行指定。
微信端则比较好解决，毕竟整个页面的长宽不会改变，只需要在页面最初加载时获取宽高，之后每次渲染都依据相同的属性值即可。但PC端的页面大小会随时变化，只能通过js定时获取页面宽高并不断地重新渲染各元素解决。
网友评论