纯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新属性transition-property transform box-shadow实例学习
Jun 06 HTML / CSS
任意一块网页内容实现“活”的背景(目前火狐浏览器专有)
May 07 HTML / CSS
利用Bootstrap实现漂亮简洁的CSS3价格表实例源码
Mar 02 HTML / CSS
CSS3实现缺角矩形,折角矩形以及缺角边框
Dec 20 HTML / CSS
css3媒体查询中device-width和width的区别详解
Mar 27 HTML / CSS
CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码详解
Jun 01 HTML / CSS
CSS 3.0文字悬停跳动特效代码
Oct 26 HTML / CSS
极简的HTML5模版
Jul 09 HTML / CSS
基于HTML5的齿轮动画特效
Feb 29 HTML / CSS
html5手机端页面可以向右滑动导致样式受影响的问题
Jun 20 HTML / CSS
详解如何在登录过期后跳出Ifram框架
Sep 10 HTML / CSS
使用css样式设计一个简单的html登陆界面的实现
Mar 30 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 curl CURLOPT_RETURNTRANSFER参数的作用使用实例
2015/02/07 PHP
ThinkPHP5 的简单搭建和使用详解
2018/11/15 PHP
js实现运行代码需要刷新的解决方法
2007/08/18 Javascript
Jquery 设置标题的自动翻转
2009/10/03 Javascript
常用的几段javascript代码分享
2014/03/25 Javascript
javascript判断变量是否有值的方法
2015/04/20 Javascript
Bootstrap3学习笔记(二)之排版
2016/05/20 Javascript
ui组件之input多选下拉实现方法(带有搜索功能)
2016/07/14 Javascript
图片上传之FileAPI与NodeJs
2017/01/24 NodeJs
jQuery为DOM动态追加事件的方法
2017/02/16 Javascript
利用node.js制作命令行工具方法教程(一)
2017/06/22 Javascript
JavaScript的六种继承方式(推荐)
2017/06/26 Javascript
laydate 显示结束时间不小于开始时间的实例
2017/08/11 Javascript
JavaScript中的return布尔值的用法和原理解析
2017/08/14 Javascript
vue router自动判断左右翻页转场动画效果
2017/10/10 Javascript
nodejs+mongodb+vue前后台配置ueditor的示例代码
2018/01/02 NodeJs
JavaScript中变量、指针和引用功能与操作示例
2018/08/04 Javascript
Vuepress 搭建带评论功能的静态博客的实现
2019/02/17 Javascript
ES2020 新特性(种草)
2020/01/12 Javascript
Python简单I/O操作示例
2019/03/18 Python
python多线程并发实例及其优化
2019/06/27 Python
python+opencv实现车牌定位功能(实例代码)
2019/12/24 Python
Matplotlib使用Cursor实现UI定位的示例代码
2020/03/12 Python
Data URI scheme详解和使用实例及图片base64编码实现方法
2014/05/08 HTML / CSS
Haglöfs瑞典官方网站:haglofs火柴棍,欧洲顶级户外品牌
2018/10/18 全球购物
英国礼品和生活方式品牌:Treat Republic
2020/11/21 全球购物
教师岗位职责
2013/11/17 职场文书
出纳担保书范文
2014/04/02 职场文书
学生会竞选演讲稿怎么写
2014/08/26 职场文书
工作汇报开头与结尾怎么写
2014/11/08 职场文书
道路交通事故人身损害赔偿协议书
2014/11/19 职场文书
2015年民主评议党员工作总结
2015/05/19 职场文书
未婚证明格式
2015/06/15 职场文书
从事会计工作年限证明
2015/06/23 职场文书
2015年国庆放假通知范文
2015/08/18 职场文书
MYSQL(电话号码,身份证)数据脱敏的实现
2021/05/28 MySQL