满屏背景（不能出现下右滚动条）及内容随浏览器一定伸缩的实现

Posted 2020-08-23

 

如图所示，要基本兼容所有浏览器，ie要求8以上，同时适应除手机ipad以外的所有屏幕分辨率，比如一体机等，通过走过的弯路，个人总结如下:

1. 不使用背景background，因为其难以控制自适应，使用img，宽width高height都为100%，同时为使其做为背景，使用定位position与z-index，背景图上的内容是一个大的元素包裹，该元素（如div，table）的宽高也为100%，但是其内包裹的元素，按需设置宽高px
2. 页面logo、标题和其他内容，均使用了定位position，上面部分通过top的百分比来控制，下面通过bottom的百分比来控制，使得其在不同分辨率下以及浏览器的伸缩下的位置不出现大变动
3. 对背景图使用min-width（ie8支持），使浏览器收缩到一定分辨率（出现横向滚动条）的时候，按需固定图片的宽度px；
4. 其他注意元素的margin值，会导致高度过大出现滚动条，不用overflow：hidden，会使得在某些分辨率下把底部内容给抹掉了

代码暂略。

个人见解，有更方便的实现方法欢迎邮箱交流代码案例，邮箱：[email protected]