纯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 相关文章推荐
基于CSS3实现立方体自转效果
Mar 01 HTML / CSS
10分钟理解CSS3 Grid布局
Dec 20 HTML / CSS
CSS3 中filter(滤镜)属性使用详解
Apr 07 HTML / CSS
HTML5 WebGL 实现民航客机飞行监控系统
Jul 25 HTML / CSS
HTML5实现页面切换激活的PageVisibility API使用初探
May 13 HTML / CSS
html5 postMessage解决跨域、跨窗口消息传递方案
Dec 20 HTML / CSS
mui几种页面跳转方式对比总结概括
Aug 18 HTML / CSS
详解WebSocket跨域问题解决
Aug 06 HTML / CSS
Html5页面上如何禁止手机虚拟键盘弹出
Mar 19 HTML / CSS
AmazeUI 面板的实现示例
Aug 17 HTML / CSS
HTML5中input输入框默认提示文字向左向右移动的示例代码
Sep 10 HTML / CSS
HTML静态页面获取url参数和UserAgent的实现
Aug 05 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
YII2框架中actions的作用与使用方法示例
2020/03/13 PHP
php判断数组是否为空的实例方法
2020/05/10 PHP
30个精美的jQuery幻灯片效果插件和教程
2011/08/23 Javascript
使用 JavaScript 进行函数式编程 (一) 翻译
2015/10/02 Javascript
js简单网速测试方法完整实例
2015/12/15 Javascript
Backbone.js框架中简单的View视图编写学习笔记
2016/02/14 Javascript
jQuery中数据缓存$.data的用法及源码完全解析
2016/04/29 Javascript
ajax跨域调用webservice的实现代码
2016/05/09 Javascript
javascript简单进制转换实现方法
2016/11/24 Javascript
详解jQuery事件
2017/01/13 Javascript
深入学习 JavaScript中的函数调用
2017/03/23 Javascript
javascript实现非常简单的小数取整功能示例
2017/06/13 Javascript
详解Angular 自定义结构指令
2017/06/21 Javascript
关于js对textarea换行符的处理方法浅析
2018/08/03 Javascript
Vue项目自动转换 px 为 rem的实现方法
2018/10/29 Javascript
如何在基于vue-cli的项目自定义打包环境
2018/11/10 Javascript
jQuery操作元素的内容和样式完整实例分析
2020/01/10 jQuery
Node.js API详解之 repl模块用法实例分析
2020/05/25 Javascript
JS页面动态绘图工具SVG,Canvas,VML介简介
2020/10/16 Javascript
Python选择排序、冒泡排序、合并排序代码实例
2015/04/10 Python
在python环境下运用kafka对数据进行实时传输的方法
2018/12/27 Python
利用Django提供的ModelForm增删改数据的方法
2019/01/06 Python
Python求均值,方差,标准差的实例
2019/06/29 Python
python GUI库图形界面开发之PyQt5 MDI(多文档窗口)QMidArea详细使用方法与实例
2020/03/05 Python
Python基于smtplib协议实现发送邮件
2020/06/03 Python
如何使用canvas绘制可移动网格的示例代码
2020/12/14 HTML / CSS
屈臣氏马来西亚官网:Watsons马来西亚
2019/06/15 全球购物
C#如何进行LDAP用户校验
2012/11/21 面试题
十佳大学生事迹材料
2014/01/29 职场文书
群众路线个人自我剖析材料
2014/10/07 职场文书
县级领导干部开展党的群众路线教育实践活动工作汇报
2014/10/25 职场文书
2015年纪委工作总结
2015/05/13 职场文书
2015年机关党建工作总结
2015/05/22 职场文书
优胜劣汰,强者为王——读《鲁滨逊漂流记》有感
2019/08/15 职场文书
php去除deprecated的实例方法
2021/11/17 PHP
Python中的pprint模块
2021/11/27 Python