纯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伪类选择器详细介绍
Dec 24 HTML / CSS
CSS3 中的@keyframes介绍
Sep 02 HTML / CSS
前端隐藏出边界内容的实现方法
Apr 14 HTML / CSS
css3实现可拖动的魔方3d效果
May 07 HTML / CSS
CSS3 实现雷达扫描图的示例代码
Sep 21 HTML / CSS
HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能
Jan 03 HTML / CSS
HTML5之WebGL 3D概述(上)—WebGL原生开发开启网页3D渲染新时代
Jan 31 HTML / CSS
一款利用html5和css3动画排列人物头像的实例演示
Dec 05 HTML / CSS
Html5中localStorage存储JSON数据并读取JSON数据的实现方法
Feb 13 HTML / CSS
浅谈html5 video 移动端填坑记
Jan 15 HTML / CSS
HTML5拖拽API经典实例详解
Apr 20 HTML / CSS
Html5移动端网页端适配(js+rem)
Feb 03 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
造就帕卡马拉的帕卡斯是怎么被发现的
2021/03/03 咖啡文化
PHP 字符串操作入门教程
2006/12/06 PHP
php 生成静态页面的办法与实现代码详细版
2010/02/15 PHP
PHP语言中global和$GLOBALS[]的分析 之二
2012/02/02 PHP
php字符集转换
2017/01/23 PHP
Yii 访问 Gii(脚手架)时出现 403 错误
2018/06/06 PHP
Javascript Select操作大集合
2009/05/26 Javascript
可以用来调试JavaScript错误的解决方案
2010/08/07 Javascript
Extjs4 GridPanel的主要配置参数详细介绍
2013/04/18 Javascript
js保留两位小数使用toFixed实现
2013/07/29 Javascript
Jquery easyui 下loaing效果示例代码
2013/08/12 Javascript
JS获取html对象的几种方式介绍
2013/12/05 Javascript
jquery垂直公告滚动实现代码
2013/12/08 Javascript
模拟用户点击弹出新页面不会被浏览器拦截
2014/04/08 Javascript
window.open()实现post传递参数
2015/03/12 Javascript
Bootstrap每天必学之工具提示(Tooltip)插件
2016/04/26 Javascript
浅谈javascript中关于日期和时间的基础知识
2016/07/13 Javascript
NodeJS遍历文件生产文件列表功能示例
2017/01/22 NodeJs
vue获取DOM元素并设置属性的两种实现方法
2017/09/30 Javascript
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
2017/10/19 jQuery
详解Vue源码学习之callHook钩子函数
2018/07/25 Javascript
vue使用echarts图表的详细方法
2018/10/22 Javascript
vue项目设置scrollTop不起作用(总结)
2018/12/21 Javascript
JavaScript实现随机点名小程序
2020/10/29 Javascript
js实现简单的轮播图效果
2020/12/13 Javascript
python Django模板的使用方法(图文)
2013/11/04 Python
python抓取网页内容示例分享
2014/02/24 Python
用Python写王者荣耀刷金币脚本
2017/12/21 Python
在Python中画图(基于Jupyter notebook的魔法函数)
2019/10/28 Python
新加坡最受追捧的体验平台:Hapz
2018/01/01 全球购物
如何写一份好的英文求职信
2014/03/19 职场文书
马智宇婚礼主持词
2014/03/22 职场文书
2015年大学班主任工作总结
2015/04/30 职场文书
一篇文章带你了解Python和Java的正则表达式对比
2021/09/15 Python
JavaScript 与 TypeScript之间的联系
2021/11/27 Javascript
Nginx防盗链与服务优化配置的全过程
2022/01/18 Servers