H5移动端页面适配解决方案vw

前言

目前的移动端页面适配解决方案中，以前比较主流的是使用淘宝的Flexible，虽然已经比较成熟的方案，但是还存在一些问题，所有又出现了现在比较流行的vw适配方案。了解vw需要了解几个参数：

1vw等于视口宽度的1%。

2.vh：1vh等于视口高度的1%。

3.vmin：选取vw和vh中最小的那个。

4.vmax：选取vw和vh中最大的那个。

在桌面端，视口指的是在桌面端，指的是浏览器的可视区域；而在移动端，它涉及3个视口：Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal Viewport（理想视口）。

视口单位中的“视口”，桌面端指的是浏览器的可视区域；移动端指的就是Viewport中的Layout Viewport。

使用这个方案有一点千万别忘了，记得在加入：

使用gulp是为了把px单位自动编译成vw

一.安装gulp

1. 全局安装 gulp：

$ npm install --global gulp

2. 作为项目的开发依赖（devDependencies）安装：

$ npm install --save-dev gulp

二.新增gulpfile.js

在项目根目录下创建一个名为 gulpfile.js 的文件：

里面书写以下代码：

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var pxtoviewport = require('postcss-px-to-viewport');

gulp.task('css', function() {
    //配置的参数
    var processors = [
        pxtoviewport({
            unitToConvert: 'px',
            viewportWidth: 750,        //视窗的宽度，对应的是我们设计稿的宽度，一般是750
            viewportHeight: 568,      // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
            unitPrecision: 5,        // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
            viewportUnit: 'vw',     // 指定需要转换成的视窗单位，建议使用vw
            fontViewportUnit: 'vw',// vmin is more suitable.
            selectorBlackList: [],
            minPixelValue: 1,     // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
            mediaQuery: false.   // 允许在媒体查询中转换`px`
        })
    ]; 
    return gulp.src(['build/*.css'])                          //原始css路径
        .pipe(postcss(processors))                            //这是自动编译px为vw单位
        .pipe(
            postcss([
                require('postcss-write-svg')({ /* options */ })//为了编译1px线使用的
            ])
        ).pipe(
            gulp.dest('css/css')                                //编译后的路径
        );
});


//监听文件变化，自动编译
gulp.task('default', ['css']);
var watcher = gulp.watch('build/*.css', ['default']);
watcher.on('change', function(ev) {
    console.log("File:" + ev.path + " was " + ev.type + " ,running tasks...");
});

三.输入

在文件写入css代码

/*vw布局*/

div {
    border-radius: 4px;
    transition: all 0.8s;
    width: 750px;
    height: 100px;
    border: 10px solid #ddd;
    font-size: 15px;
    padding-bottom: 5px;
    padding-left: 18px;
    padding-right: 10px;
}


下面的实现1px方案自己编译出来的还是很粗的线，还请知道的大神指教。

/*1px border-image方案*/

/*
 * 解决移动端1px线变粗的方法（postcss-write-svg插件编译svg为base64），
 * 使用svg绘制1px对应颜色边框的矩形
 * 
*/
@svg 1px-border {
  width: 4px;
  height: 4px;
  @rect {
    fill: transparent; 
    width: 100%; 
    height: 100%; 
    stroke-width: 25%; 
    stroke: var(--color, black);
  }
}


#real-1px {
  margin: 10px;
  height: 20px;
}

#real-1px {
  border: 1px solid;
  border-image: svg(1px-border param(--color red)) 1 stretch;
}



/*1px background-image方案*/
@svg square {
    @rect {
        fill: var(--color, black);
        width: 100%;
        height: 100%;
    }
}

#example {
    background: white svg(square param(--color #000));
}

/*
 *目前只测试出使用伪类加transform弄出了真正的1px线
 * 
 */
.hairlines:after {
    content: '';
    position: absolute;
    left: 0;
    background: #000;
    width: 100%;
    height: 1px;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}

四. 运行 gulp：
$ gulp css

运行gulp就会输出以下代码

五.输出

/*vw布局*/

div {
    border-radius: 0.53333vw;
    transition: all 0.8s;
    width: 100vw;
    height: 13.33333vw;
    border: 1.33333vw solid #ddd;
    font-size: 2vw;
    padding-bottom: 0.66667vw;
    padding-left: 2.4vw;
    padding-right: 1.33333vw;
}



/*1px border-image方案*/

/*
 * 解决移动端1px线变粗的方法（postcss-write-svg插件编译svg为base64），
 * 使用svg绘制1px对应颜色边框的矩形
 * 
*/


#real-1px {
  margin: 1.33333vw;
  height: 2.66667vw;
}

#real-1px {
  border: 1px solid;
  border-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='0.53333vw' height='0.53333vw'%3E%3Crect fill='transparent' width='100%25' height='100%25' stroke-width='25%25' stroke='red'/%3E%3C/svg%3E") 1 stretch;
}



/*1px background-image方案*/

#example {
    background: white url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect fill='%23000' width='100%25' height='100%25'/%3E%3C/svg%3E");
}

六.最重要的降级处理

使用 Viewport Units Buggyfill 插件
在html文件head标签添加引用

在Index.html文件body标签后添加以下代码

七.存在的问题：

使用vw有一些细节之处还是存在一定的缺陷的。比如当容器使用vw单位，margin采用px单位时，很容易造成整体宽度超过100vw，从而影响布局效果。对于这个问题，我们可以将margin换成padding，并且配合box-sizing解决。只不过这不是最佳方案，随着将来浏览器或者应用自身的Webview对calc()函数的支持之后，碰到vw和px混合使用的时候，可以结合calc()使用。

还有px转换成vw单位，多少还会存在一定的像素差，毕竟很多时候无法完全整除。

使用vw可能也在存在无法设置最大最小的问题，目前比较好的办法是采用rem和vw的组合使用可以解决这个问题。

参考博客：https://www.w3cplus.com/css/vw-for-layout.html