css移动端页面单位,视窗单位在移动端上的使用技巧
视窗单位一直都存在争议,部分原因是因为移动端浏览器对如何实现视窗单位有着自己的看法,这样就让本来简单的事情变得更加复杂化。
一个典型的示例是:vw的计算是否要包含浏览器的滚动条?那么网站的导航或页面控件呢?这些应该算在计算中吗?还有一些设备本身的物理属性(比如iPhone X的刘海)是不容忽视的。
首先,了解一下背景
有关于如何计算视窗单位的规范描述的相当模糊。对于移动设备,我们通常关心的是高度,所以让我们具体来看一下视窗单位中的vh:
vh unit:Equal to 1% of the height of the initial containing block.
直译过来,大致的意思是“vh等于初始包含块高度的1%”。
所以,在处是设备和特定的浏览器的区别方面,没有明确的指导。
vh最初是由浏览器的当前视窗计算的。如果你打开浏览器开始加载一个网站,1vh等于你屏幕高度的1%(减去浏览器界面)。
1vh = window.innerHeight。
但是!如果你开始滚动,那就另当别论了。一旦你通过了一个浏览器界面,比如地址栏,vh值就会更新,结果就是内容的跳跃。
iOS的Safari浏览器是最早更新其实现的移动端浏览器之一,它选择根据屏幕的最大高度为vh的计算值(为vh定义一个固定值)。这样,一旦地址栏离开视窗,用户在页面上也不会看到内容的闪跳。Chrome的移动端浏览器大约在一年前也相应的做了这样的调整。
虽然使用固定值很好,但这也意味着如果地址栏在视窗中,就不能有一个全屏高度的元素。元素的底部将被裁剪。
正如上图所示,当地址栏在视窗中时(左图),元素的底部被裁剪,但我们想要的是元素底部不被裁剪(右图)。
CSS自定义属性:调整大小的技巧
我突然想到,CSS自定义属性和几行JavaScript代码可能是获得所需的一致和正确大小的完美解决方案。
在JavaScript中,你始终可以使用全局变量window.innerHeight获得当前视窗的值。这个值考虑了浏览器的界面,并在其可见性(visibility)发生变化时进行了更新。诀窍就是将视窗(viewport)值存储在CSS自定义属性(CSS变量)中,并将其应用于元素,而不是vh单位。
假设我们在例子中设置一个CSS自定义属性:--vh。这意味着我们将在CSS像下面这样使用这个自定义属性:
.my-element {
height: 100vh; /* 为不支持自定义属性的浏览器做降级处理 */
height: calc(var(--vh, 1vh) * 100);
}
好了,这就搞定了,就是这么的简单。现在让我们使用JavaScript来获得视窗的内部高度(window.innerHeight):
// 首先获取视窗高度,再乘以1%得到vh单位的值
let vh = window.innerHeight * 0.01;
// 把--vh的值设置到文档的根元素中
document.documentElement.style.setProperty('--vh', `${vh}px`);
因此,我们告诉JavaScript获取视窗的高度,然后占这个值的1%,所以我们就可以将值指定为视窗高度单位值。然后使用JavaScript在:root中创建CSS自定义属性--vh。
因此,我们现在就可以像使用其他单位一样使用--vh作为高度值,然后乘以100就能得到我们想要的高度值。
亲自体验一下,调整视窗的高度,在根元素html中可以看到--vh值是动态变化的:
还有一个小细节
虽然我们的工作看上去已经完成了,但是对于追求细节的同学而言,可能已经发现了,当视窗的高度改变时,不会自动更新元素的大小。那么我们接着在上面的示例上进行调整。
我们可以监听window的resize事件来更新--vh的值。如果用户旋转设备屏幕,比如从横向到纵向,或者导航移动到滚动视窗之外,这样就非常方便。
// 监听resize事件
window.addEventListener('resize', () => {
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
});
更新--vh的值将会触发页面重绘,用户可能会感觉页面在跳动。因此,我并不是说这个技巧应该用于每个项目,或者替换vh单位的所有用法,但是只有当你需要你的用户拥有一个确切的视窗单位值时才使用。
此外,你可能希望resize事件实现debounce方法,以避免在用户调整浏览器窗口大小时触发许多事件。通过本文,你可以了解更多相关信息:通过示例解释Debouncing和Throtting。
你现在可以调整视窗大小查看上面的示例,并注意CSS自定义属性--vh值的变化:
虽然我最近在一个项目中使用了这种技术,它确实很有用,但是在替换浏览器的默认行为时,你应该要三思而后行。(例如,这会在::focus一起出现)。另外,现在的浏览器更新速度非常快,所以要小心,今天的解决方案明天可能就行不通了。
同时,我希望这篇文章对你有所帮助。
css移动端页面单位,视窗单位在移动端上的使用技巧相关推荐
- html百分比单位,视窗单位 vs 百分比单位
在我的关于CSS字体大小的文章中,我写了关于(相对的)新的视窗单位.这些单位vw,vh,vmin,和vmax都是基于浏览器视窗(Viewport)的大小的.因为它们的实际大小是根据视窗(Viewpor ...
- html 设置移动端页面滚动,a.html · 焚心/移动端页面上下滚动加多页面上拉加载功能及mescroll插件的使用 - Gitee.com...
我的 我的 交易记录 可兑换签纸贺 兑换历史 活动名称:{{item.title}} 有效期至:{{item.time}} 合计可用额: {{item.price}}元 去兑换 交易记录: 兑换10. ...
- php制作移动端页面,继续制作php中文网移动端首页,并fang制作携程网移动端首页。2019-09-10...
以下是php中文网移动端首页的代码 实例 html> php中文网手机端-首页 HTML/CSS JavaScript 服务端 数据库 移动端 手册 工具 直播 推荐课程 CI框架30分钟极速入 ...
- php代码判断pc端和移动端页面跳转,js判断PC端与移动端跳转
在网上看到很多这样类似的代码,但是有的很复杂,或者有的没有判断完全,上次经理去见完客户回来讲,使用苹果浏览打开pc端(pc已经做了识别跳转)会自动跳转到移动端的网页去,后来经测试才发现 documen ...
- 移动端页面适配———多方案解析
移动互联网快速发展的今天,手机的种类和尺寸越来越多,作为前端的小伙伴们可能会越来越头疼,但又不得不去适配一款又一款的新机型.对于移动端适配,不同的公司.不同的团队有不同的解决方案.我在项目中也用了一部 ...
- 移动端h5框架自适应_Html5移动端页面自适应百分比布局
按百分比布局,精度肯定不会有rem精确 Document * { padding: 0; margin: 0; } .one { width: 20%; height: 100px; float: l ...
- 淘宝触屏版适配代码,趴下来以后写移动端页面的时候可以参考下
顺便说几个属性: 1.window.devicePixelRatio 它的官方的定义为:设备物理像素和设备独立像素的比例,也就是 devicePixelRatio = 物理像素 / 独立像素.css ...
- 图上上传页面设计_无线端页面设计“三大雷区”
无线视觉规范 手机端页面的设计有许多的规范,大到涉及整个页面的排版呈现方式,小到一个icon的尺寸大小,这都关系到视觉页面的美观程度以及用户体验设计.所以应该积极主动去分析深入了解并研究出可行的解决方 ...
- 【移动端网页布局】移动端网页布局基础概念 ⑧ ( 移动端页面布局方案 | 单独制作的移动端页面 - 主流 | 响应式页面兼容移动端 - 开发难度较大 )
文章目录 一.移动端页面布局方案 1.单独制作的移动端页面 2.响应式页面兼容移动端 一.移动端页面布局方案 移动端页面方案 : 单独制作的移动端页面 : 主流开发方案 , PC 端 与 移动端 访问 ...
- 移动端页面单位的选择(px em rem)
移动端页面单位的选择(px em rem) 绝对单位: px 相对单位: rem em em具有继承性 继承自直接父类 所以说在移动端很少用 浏览器默认的字体大小 16px 那么 1em= ...
最新文章
- ABP理论学习之数据传输对象(DTO)
- windows :Tomcat免安装版环境变量配置 + jdk配置
- 【随记】hexo文章加密
- 73.JVM内存基础结构,参数分类,推荐的配置项,参数混用问题,常用工具,常用命令
- Redis Cluster集群架构实现
- 在maven项目中打开jsp_零基础在intellij中打开一个项目复制粘贴内容即可运行的java拼图...
- 任意门怎么用团发_衣柜门选用什么材料好?小编在这里告诉你
- 小猴子蓝裤黄袄的局域网聊天
- 好用的pdf预览插件
- 东大OJ-Prim算法
- 地脚螺钉直径系列_干数控这么久,现在才分清楚螺栓、螺钉、螺柱的区别
- cannot read property 'options' of underfined
- 编程计算并输出1 - n之间的所有数的平方和立方。其中n值由用户从键盘输入
- 在IE浏览器里打开谷歌
- Android 查看内存使用工具 (procstats)
- Praat将连续录制的声音文件切成小单位文件
- diag()函数功能
- 《无极限之危情速递》观后感
- AttributeError: Layer my_model has no inbound nodes.
- 转让测绘资质,转让天津测绘资质
热门文章
- 从AssetBundle中获取图片,给Image 组件替换Sprite
- java 数据透视表 组件_Apache POI如何将工作簿样式应用于所有数据透视表 . 我如何排除床单?...
- 以xml格式发送外部系统交易错误_在知行EDI系统中实施SNIP验证
- idea如何操控git分支
- 正在连接至zimperium服务器,ZIMPERIUM Mobile IPS (zIPS)
- 生产级mysql双写_生产级Mysql物理全量备份-Xtrabackup
- 飘刃 0.1.1 发布,速度碾压 Vue-CLI 的轻量级 Vue 项目构建工具
- stl list中erase和remove区别
- 自定义docker nginx镜像无容器日志输出
- 高斯—若尔当(约当)消元法解异或方程组+bitset优化模板