纯css3使用vw和vh实现自适应的方法


Posted in HTML / CSS onFebruary 09, 2018

响应式布局的实现依靠媒体查询( Media Queries )来实现,选取主流设备宽度尺寸作为断点针对性写额外的样式进行适配,但这样做会比较麻烦,只能在选取的几个主流设备尺寸下呈现完美适配。

即使是通过 rem 单位来实现适配,也是需要内嵌一段脚本去动态计算根元素大小。·

近年来,随着移动端对视口单位的支持越来越成熟、广泛,使得我们可以尝试一种新的办法去真正地适配所有设备尺寸。

认识视口单位( Viewport units )

首先,我们要了解什么是视口。

在业界,极为推崇的一种理论是 Peter-Paul Koch (江湖人称“PPK大神”)提出的关于视口的解释——在桌面端,视口指的是在桌面端,指的是浏览器的可视区域;而在移动端较为复杂,它涉及到三个视口:分别是 Layout Viewport(布局视口)、 Visual Viewport(视觉视口)、Ideal Viewport。

而视口单位中的“视口”,在桌面端,毫无疑问指的就是浏览器的可视区域;但是在移动端,它指的则是三个 Viewport 中的 Layout Viewport 。

纯css3使用vw和vh实现自适应的方法

视口单位中的“视口”

根据CSS3规范,视口单位主要包括以下4个:

  1. vw : 1vw 等于视口宽度的1%
  2. vh : 1vh 等于视口高度的1%
  3. vmin : 选取 vw 和 vh 中最小的那个
  4. vmax : 选取 vw 和 vh 中最大的那个

视口单位区别于%单位,视口单位是依赖于视口的尺寸,根据视口尺寸的百分比来定义的;而%单位则是依赖于元素的祖先元素。

纯css3使用vw和vh实现自适应的方法

用视口单位度量,视口宽度为100vw,高度为100vh(左侧为竖屏情况,右侧为横屏情况)

例如,在桌面端浏览器视口尺寸为650px,那么 1vw = 650 * 1% = 6.5px(这是理论推算的出,如果浏览器不支持0.5px,那么实际渲染结果可能是7px)。

兼容性

其兼容性如下图所示,可以知道:在移动端 ios 8 以上以及 Android 4.4 以上获得支持,并且在微信 x5 内核中也得到完美的全面支持。

纯css3使用vw和vh实现自适应的方法

纯css3使用vw和vh实现自适应的方法

利用视口单位适配页面

对于移动端开发来说,最为重要的一点是如何适配页面,实现多终端的兼容,不同的适配方式各有千秋,也各有缺点。

就主流的响应式布局、弹性布局来说,通过 Media Queries 实现的布局需要配置多个响应断点,而且带来的体验也对用户十分的不友好:布局在响应断点范围内的分辨率下维持不变,而在响应断点切换的瞬间,布局带来断层式的切换变化,如同卡带的唱机般“咔咔咔”地一下又一下。

而通过采用rem单位的动态计算的弹性布局,则是需要在头部内嵌一段脚本来进行监听分辨率的变化来动态改变根元素字体大小,使得 CSS 与 JS 耦合了在一起。

有没有办法能够解决这样的问题呢?

答案是肯定的,通过利用视口单位实现适配的页面,是既能解决响应式断层问题,又能解决脚本依赖的问题的。

做法一:仅使用vw作为CSS单位

在仅使用 vw 单位作为唯一应用的一种 CSS 单位的这种做法下,我们遵守:

1.对于设计稿的尺寸转换为vw单位,我们使用Sass函数编译

//iPhone 6尺寸作为设计稿基准
$vm_base: 375; 
@function vw($px) {
    @return ($px / 375) * 100vw;
}

2.无论是文本还是布局高宽、间距等都使用 vw 作为 CSS 单位

.mod_nav {
    background-color: #fff;
    &_list {
        display: flex;
        padding: vm(15) vm(10) vm(10); // 内间距
        &_item {
            flex: 1;
            text-align: center;
            font-size: vm(10); // 字体大小
            &_logo {
                display: block;
                margin: 0 auto;
                width: vm(40); // 宽度
                height: vm(40); // 高度
                img {
                    display: block;
                    margin: 0 auto;
                    max-width: 100%;
                }
            }
            &_name {
                margin-top: vm(2);
            }
        }
    }
}

3.1物理像素线(也就是普通屏幕下 1px ,高清屏幕下 0.5px 的情况)采用 transform 属性 scale 实现。

//code from http://caibaojian.com/vw-vh.html
.mod_grid {
    position: relative;
    &::after {
        // 实现1物理像素的下边框线
        content: '';
        position: absolute;
        z-index: 1;
        pointer-events: none;
        background-color: #ddd;
        height: 1px;
        left: 0;
        right: 0;
        top: 0;
        @media only screen and (-webkit-min-device-pixel-ratio: 2) {
            -webkit-transform: scaleY(0.5);
            -webkit-transform-origin: 50% 0%;
        }
    }
    ...
}

4.对于需要保持高宽比的图,应改用 padding-top 实现

.mod_banner {
    position: relative;
    padding-top: percentage(100/700); // 使用padding-top
    height: 0;
    overflow: hidden;
    img {
        width: 100%;
        height: auto;
        position: absolute;
        left: 0;
        top: 0; 
    }
}

由此,我们能够实现一个常见布局的页面效果如下:

纯css3使用vw和vh实现自适应的方法

做法二:搭配vw和rem,布局更优化

这样的页面虽然看起来适配得很好,但是你会发现由于它是利用视口单位实现的布局,依赖于视口大小而自动缩放,无论视口过大还是过小,它也随着视口过大或者过小,失去了最大最小宽度的限制。

当然,你可以不在乎这样微小的不友好用户体验,但我们还是尝试下追求修复这样的小瑕疵吧。

于是,联想到不如结合rem单位来实现布局?rem 弹性布局的核心在于动态改变根元素大小,那么我们可以通过:

  1. 给根元素大小设置随着视口变化而变化的 vw 单位,这样就可以实现动态改变其大小。
  2. 限制根元素字体大小的最大最小值,配合 body 加上最大宽度和最小宽度

这样我们就能够实现对布局宽度的最大最小限制。因此,根据以上条件,我们可以得出代码实现如下:

// rem 单位换算:定为 75px 只是方便运算,750px-75px、640-64px、1080px-108px,如此类推
$vm_fontsize: 75; // iPhone 6尺寸的根元素大小基准值
@function rem($px) {
     @return ($px / $vm_fontsize ) * 1rem;
}
// 根元素大小使用 vw 单位
$vm_design: 750;
html {
    font-size: ($vm_fontsize / ($vm_design / 2)) * 100vw; 
    // 同时,通过Media Queries 限制根元素最大最小值
    @media screen and (max-width: 320px) {
        font-size: 64px;
    }
    @media screen and (min-width: 540px) {
        font-size: 108px;
    }
}
// body 也增加最大最小宽度限制,避免默认100%宽度的 block 元素跟随 body 而过大过小
body {
    max-width: 540px;
    min-width: 320px;
}

小结

相对于做法一,个人比较推崇做法二,有以下两点原因:

第一,做法二相对来说用户视觉体验更好,增加了最大最小宽度的限制;

第二,更重要是,如果选择主流的rem弹性布局方式作为项目开发的适配页面方法,那么做法二更适合于后期项目从 rem 单位过渡到 vw 单位。只需要通过改变根元素大小的计算方式,你就可以不需要其他任何的处理,就无缝过渡到另一种CSS单位,更何况vw单位的使用必然会成为一种更好适配方式,目前它只是碍于兼容性的支持而得不到广泛的应用。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
纯CSS实现预加载动画效果
Sep 06 HTML / CSS
css3 中实现炫酷的loading效果
Apr 26 HTML / CSS
纯CSS3发光分享按钮的实现教程
Sep 06 HTML / CSS
CSS3动画效果回调处理详解
Dec 10 HTML / CSS
一款纯css3实现的鼠标悬停动画按钮
Dec 29 HTML / CSS
用CSS3实现无限循环的无缝滚动的实例代码
Jul 04 HTML / CSS
你可能不熟练的十个前端HTML5经典面试题
Jul 03 HTML / CSS
HTML5使用drawImage()方法绘制图像
Jun 23 HTML / CSS
详解Html5 监听拦截Android返回键方法
Apr 18 HTML / CSS
html5的input的required使用中遇到的问题及解决方法
Apr 24 HTML / CSS
Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 (附转换公式)
Mar 18 HTML / CSS
使用CSS实现一个搜索引擎的原理解析
Sep 25 HTML / CSS
如何用css3实现switch组件开关的方法
Feb 09 #HTML / CSS
结合 CSS3 transition transform 实现简单的跑马灯效果的示例
Feb 07 #HTML / CSS
css3 clip实现圆环进度条的示例代码
Feb 07 #HTML / CSS
使用css3做0.5px的细线的示例代码
Jan 18 #HTML / CSS
详解CSS 3 中的 calc() 方法
Jan 12 #HTML / CSS
css3实现冲击波效果的示例代码
Jan 11 #HTML / CSS
css3如何绘制一个圆圆的loading转圈动画
Jan 09 #HTML / CSS
You might like
PHP实现MVC开发得最简单的方法――模型
2007/04/10 PHP
PHP5中的时间相差8小时的解决办法
2008/03/28 PHP
劣质的PHP代码简化
2010/02/08 PHP
PHP实现提取一个图像文件并在浏览器上显示的代码
2012/10/06 PHP
PHP实现的构造sql语句类实例
2016/02/03 PHP
thinkphp3.2实现上传图片的控制器方法
2016/04/28 PHP
PHP实现的XML操作类【XML Library】
2016/12/29 PHP
PHP从零开始打造自己的MVC框架之入口文件实现方法详解
2019/06/03 PHP
jQuery创建自己的插件(自定义插件)的方法
2010/06/10 Javascript
javascript自执行函数之伪命名空间封装法
2010/12/25 Javascript
JavaScript插件化开发教程(六)
2015/02/01 Javascript
canvas仿iwatch时钟效果
2017/03/06 Javascript
在微信小程序中使用vant的方法
2019/06/07 Javascript
javascript设计模式之迭代器模式
2020/01/30 Javascript
通过vue刷新左侧菜单栏操作
2020/08/06 Javascript
微信小程序canvas实现签名功能
2021/01/19 Javascript
python 解析XML python模块xml.dom解析xml实例代码
2014/02/07 Python
利用Python暴力破解zip文件口令的方法详解
2017/12/21 Python
Python异常模块traceback用法实例分析
2019/10/22 Python
jupyter lab文件导出/下载方式
2020/04/22 Python
pycharm 实现本地写代码,服务器运行的操作
2020/06/08 Python
django使用graphql的实例
2020/09/02 Python
Python 如何实现数据库表结构同步
2020/09/29 Python
Ubuntu 20.04安装Pycharm2020.2及锁定到任务栏的问题(小白级操作)
2020/10/29 Python
CSS3 @font-face属性使用指南
2014/12/12 HTML / CSS
HTML5 使用 sessionStorage 进行页面传值的方法
2018/07/02 HTML / CSS
丝绸和人造花卉、植物和树木:Nearly Natural
2018/11/28 全球购物
仓管员岗位职责范文
2013/11/08 职场文书
爱情检讨书大全
2014/01/21 职场文书
酒店管理专业自荐信
2014/05/23 职场文书
群众路线教育实践活动剖析材料
2014/09/30 职场文书
乡镇计划生育工作汇报
2014/10/28 职场文书
公司搬迁通知
2015/04/20 职场文书
新教师教学工作总结
2015/08/14 职场文书
《合作意向书》怎么写?
2019/08/20 职场文书
Python进程间的通信之语法学习
2022/04/11 Python