我自认为这是个伟大的命题,同样这也是我们在前端开发过程中所期待的一个用户体验项,请不要被我这拗口的标题所迷惑,以下的文字所能解决的问题其实我们都曾遇到过。
假设有这样一个页面,我们不希望页面右侧出现滚动条,如果开发人员根据当前的屏幕分辨率去考虑的话,这个问题就极其简单了: 正文部分容器高度=页面部分高度-头部高度-底部高度。 然而,我现在可以很负责人的告诉你,你是一个不负责任的前端开发人员,鉴定完毕。 因为你忽略了用户的感受。 有的用户屏幕分辨率是1024*768的,而有的用户屏幕是1920*1080的,那么页面的兼容性在哪,用户体验在哪?扯淡完毕,进入正题! 思路: 首先,我承认这是个动态效果,打开页面时,计算当前浏览器的显示的页面大小,之后省略头部和底部的高度,初始化正文部分的高。如果用户放大或者缩小浏览器的显示区域时,触发resize()事件,重新计算! 以上是整体思路,重点:初始化正文部分的高、重新计算;牵扯到的变量:浏览器可见部分的大小。 开发前奏 一个页面>一个头部>一个正文框架>一个底部实现过程
1、导入JQ库
2、头部写入resize()时间
3、核心方法ReloadingWindow()
4、初始化调用ReloadingWindow()