阅读 1007

移动端适配 vw vh

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

本文同时参与 「掘力星计划」  ,赢取创作大礼包,挑战创作激励金

适配方案

rem 适配代码:

<script>
    var html = document.documentElement;
    var widths = html.clientWidth;
    var num = 10;
    html.style.fontSize = widths / num + 'px';
</script>
复制代码

但是呢,并不是所有人都会写JS的,有没有什么方案,我们可以不写JS呢?还是真的有,我们来看下。

新的单位:vwvh

兼容:IE9及以上,IOS 6.1+ ,安卓4.4+

这两个单位都是根据视口屏幕来进行计算的,所以PC的时候,要注意滚动条哦~

我们来看下,下面的图:

image.png

注意哦:不管设备是横屏还是竖屏,vw指的都是水平方向的,vh指的都是垂直方向的

它和百分比不一样,不会受到父级宽度的影响,这样我们通过css就可以获取到当前的视口宽度了,利用获取到的视口宽度 / 100vw

html{
    font-size: 10vw;
}
/* 因为整个屏幕是 100vw ,这里我们分成 10 个格子,一个格子是 10vw 的 font-size */
复制代码

这样的话,因为屏幕的宽度发生变化,html 上的font-size也会动态发生变化。

div{
    width:5rem;
    height:5rem;
}
复制代码

以上和我们原来写JS达到的效果是一样的,当然我们也可以直接用vw的单位,例如:

div{
    width:50vw;
    height:50vw;
}
复制代码

除了上面说到的 vwvh以外,还有 vminvmax

vmin:选取 vwvh 中较小的

vmax:选取 vwvh 中较大的

当然,这个方案也不是十全十美的,因为在计算的过程中也会出现小数点

现在的我们根本没法填的坑

  1. 移动端输入框 被 键盘遮挡
  2. 点击穿透的问题
  3. 滑动冲突(轮播图和滚动条)
  4. 内容禁止缩放无效

移动端好用的插件

  1. better-scroll(js)
  2. animate.css 动画库
  3. swiper 滑屏工具

lib-flexible

一个用于做rem适配的工具,里面的代码,其实和我们写的rem适配是一致的

下载地址:github.com/amfe/lib-fl…

点赞支持、手留余香、与有荣焉,动动你发财的小手哟,感谢各位大佬能留下您的足迹。

11.png

往期精彩推荐

前端常用的几种加密方法

canvas 爬坑路【方法篇】

不懂 seo 优化?一篇文章帮你了解如何去做 seo 优化

canvas 爬坑路【属性篇】

【实战篇】微信小程序开发指南和优化实践

聊一聊移动端适配

前端性能优化实战

聊聊让人头疼的正则表达式

获取文件blob流地址实现下载功能

Vue 虚拟 DOM 搞不懂?这篇文章帮你彻底搞定虚拟 DOM

Git 相关推荐

通俗易懂的 Git 入门

git 实现自动推送

面试相关推荐

前端万字面经——基础篇

前端万字面积——进阶篇

更多精彩详见:个人主页

文章分类
前端
文章标签