标签:表示 注意 文字 code 占用 att ESS lang 设计
在日常工作种,获取浏览器分辨率的实现模式往往在于前端就能得到很好的处理效果,但不可能避免的是,比如需要通过分辨率识别中英文字符长度进行截取校验时,在后台把逻辑书写更加方便省时,故引申了对后台校验分辨率的需求。
一、Java代码获取屏幕分辨率
二、Jquery获取屏幕分辨率,常用方法如下:
通用写法如下,和上面JS写法一致:
网页可见区域宽: document.body.clientWidth
网页可见区域高: document.body.clientHeight
网页可见区域宽: document.body.offsetWidth (包括边线的宽)
网页可见区域高: document.body.offsetHeight (包括边线的高)
网页正文全文宽: document.body.scrollWidth
网页正文全文高: document.body.scrollHeight
网页被卷去的高: document.body.scrollTop
网页被卷去的左: document.body.scrollLeft
网页正文部分上: window.screenTop
网页正文部分左: window.screenLeft
屏幕分辨率的高: window.screen.height
屏幕分辨率的宽: window.screen.width
屏幕可用工作区高度: window.screen.availHeight
获取方法不难,技巧在于多用多记熟能生巧,毕竟对于非H5浏览器而言,处理兼容性应用还是挺频繁的。
顺带讲解一枚关于CSS3处理自适应效果的属性,即CSS3的 calc() 使用:
1、calc()语法非常简单,就像(+)、减(-)、乘(*)、除(/)一样,使用数学表达式来表示;
2、实例 height: calc(expression) 其中"expression"是一个表达式,用来计算长度的表达式;
3、calc()的运算规则,使用的是数学运算规则,注意加减乘除前后必须保留空格,否则语法是不严谨。
使用“+”、“-”、“*” 和 “/”四则运算;
可以使用百分比、px、em、rem等单位;
可以混合使用各种单位进行计算;
表达式中有“+”和“-”时,其前后必须要有空格,如"widht: calc(12%+5em)"这种没有空格的写法是错误的;
表达式中有“*”和“/”时,其前后可以没有空格,但建议留有空格。
4、calc()应用属于css3特有属性,故对当前主流浏览器兼容性均得到较好支持,IE8以下的就不行了,还是老老实实的通过分辨率计算去获取自适应吧。
5、举个实例清晰明了观察以下calc()的应用模式
从上面的实例可以看出,整个页面高度为100%,header高度占用100个像素,那么main主体区域的
自适应高度可以写成 height: calc(100% - 100px)。
即用页面100%减去头部高度100px则等于主体区域高度;注意符号前后要有空格。
该说的知识点都说完了,有什么不懂的地方可以留言咨询,我将第一时间给予各位答复。
如果各位童鞋还有任何建议或比较好的想法,欢迎加入JAVA开发项目讨论群:214404624。
发挥你聪智的大脑,挖掘更新鲜更充满活力的好点子,我们共同探讨技术层面的研究和可实施性。
标签:表示 注意 文字 code 占用 att ESS lang 设计
原文地址:https://www.cnblogs.com/liudianjia/p/12513169.html