博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Jquery实现正文部分根据浏览器大小自适应高度
阅读量:5894 次
发布时间:2019-06-19

本文共 586 字,大约阅读时间需要 1 分钟。

hot3.png

 

   我自认为这是个伟大的命题,同样这也是我们在前端开发过程中所期待的一个用户体验项,请不要被我这拗口的标题所迷惑,以下的文字所能解决的问题其实我们都曾遇到过。

   假设有这样一个页面,我们不希望页面右侧出现滚动条,如果开发人员根据当前的屏幕分辨率去考虑的话,这个问题就极其简单了:

   正文部分容器高度=页面部分高度-头部高度-底部高度。

   然而,我现在可以很负责人的告诉你,你是一个不负责任的前端开发人员,鉴定完毕。
   因为你忽略了用户的感受。
   有的用户屏幕分辨率是1024*768的,而有的用户屏幕是1920*1080的,那么页面的兼容性在哪,用户体验在哪?扯淡完毕,进入正题!

   思路:

   首先,我承认这是个动态效果,打开页面时,计算当前浏览器的显示的页面大小,之后省略头部和底部的高度,初始化正文部分的高。如果用户放大或者缩小浏览器的显示区域时,触发resize()事件,重新计算!
   以上是整体思路,重点:初始化正文部分的高、重新计算;牵扯到的变量:浏览器可见部分的大小。

   开发前奏

       一个页面>一个头部>一个正文框架>一个底部

   实现过程

       1、导入JQ库

  

       2、头部写入resize()时间

       3、核心方法ReloadingWindow()

       4、初始化调用ReloadingWindow()

转载于:https://my.oschina.net/lgscofield/blog/471215

你可能感兴趣的文章
linux在文件打包和压缩
查看>>
webpack多页应用架构系列(七):开发环境、生产环境傻傻分不清楚?
查看>>
笨办法学C 练习1:启用编译器
查看>>
树的总结--树的性质(树的深度) leetcode
查看>>
nagios短信报警(飞信fetion20080522004-linrh4)
查看>>
【Android游戏开发之六】在SurfaceView中添加组件!!!!并且相互交互数据!!!!...
查看>>
div加jquery实现iframe标签的功能
查看>>
linux 将大文件分成小文件
查看>>
CCNA- 距离矢量路由协议学习
查看>>
jira 配置 LDAP 访问
查看>>
Canonical发布Ubuntu server 11.10版本
查看>>
企业实践用户邮箱导入/导出(第2部分)
查看>>
我的友情链接
查看>>
【Java记录】try-with-resources的一个坑
查看>>
如何学习Linux命令-初级篇
查看>>
从Oracle Public Yum为Oracle Linux建立本地的Yum源
查看>>
Android开发——09Google I/O之让Android UI性能更高效(1)
查看>>
在 SELECT 查询中使用表表达式
查看>>
(二) php if语句,switch语句,continue语句,return语句,for 、while、do while 循环
查看>>
edx 获取当前request
查看>>