如图所示,要基本兼容所有浏览器,ie要求8以上,同时适应除手机ipad以外的所有屏幕分辨率,比如一体机等,通过走过的弯路,个人总结如下:
- 不使用背景background,因为其难以控制自适应,使用img,宽width高height都为100%,同时为使其做为背景,使用定位position与z-index,背景图上的内容是一个大的元素包裹,该元素(如div,table)的宽高也为100%,但是其内包裹的元素,按需设置宽高px
- 页面logo、标题和其他内容,均使用了定位position,上面部分通过top的百分比来控制,下面通过bottom的百分比来控制,使得其在不同分辨率下以及浏览器的伸缩下的位置不出现大变动
- 对背景图使用min-width(ie8支持),使浏览器收缩到一定分辨率(出现横向滚动条)的时候,按需固定图片的宽度px;
- 其他注意元素的margin值,会导致高度过大出现滚动条,不用overflow:hidden,会使得在某些分辨率下把底部内容给抹掉了
代码暂略。
个人见解,有更方便的实现方法欢迎邮箱交流代码案例,邮箱:[email protected]
时间: 2024-10-09 22:28:55