记录移动端适配的几种方案(flexiblejs,vw)

第一种就是用了很久淘宝团队开发的flexible.js，

原理通过识别网页宽度，在html上加dpr及字号（源码所设置值/10），在移动端设置rem进行自适应。

如设置最大宽度640（设计稿），在网页宽度为640时，flexible.js将html字号设置为64px，即1rem=64px,页面缩小，1rem所等于的像素即缩小。（这是dpr=1时，当dpr=2时，网页被缩小二倍，html字号*2，1rem=64*2px，但是所展示的内容不变）
dpr=2时，1设备独立像素长宽各占2物理像素。但是字体需单独进行适配，原因是flexiblejs 的团队觉得从体验上来讲，字号不应该因为屏幕大小而变化，而且大多数字体文件都带一些点阵（16或24px），都是偶数，同样不希望字体出现单数尺寸，所以要用px进行适配。

写法如下
.class{
font-size:30px;
}
[data-dpr="2"] .class{
font-size: 60px;
}
[data-dpr="3"] .class{
font-size: 90px;
}
（图片也要切三份呦）

还有一串js可能大家也见过，原理同上，但是没有考虑字体，都是用rem进行适配，挺简单的就不解释了，代码如下。

 1 (function (doc, win) {
 2     var docEl = doc.documentElement,
 3         resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
 4         recalc = function () {
 5             var clientWidth = docEl.clientWidth;
 6             if (!clientWidth) return;
 7             if(clientWidth<=720){
 8                 docEl.style.fontSize = 100 * (clientWidth /720) + 'px';
 9             }else{
10                 docEl.style.fontSize = 100+'px'
11                     }
12                 };
13  
14             if (!doc.addEventListener) return;
15             win.addEventListener(resizeEvt, recalc, false);
16             doc.addEventListener('DOMContentLoaded', recalc, false);
17 })(document, window);

直接放到网页里就ok。

第三种也是大漠前辈总结的vw适配，其实rem适配初衷也是为了使用vw，现在flexiblejs是时候退役了，下面开始（vue框架写的，别的自行解决啦）

1首先vue-cli构建项目

2安装PostCSS插件

npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano --S 

安装成功的话，package.json会看到新安装的信息

"dependencies": {
　　"cssnano": "^3.10.0", 
　　"postcss-aspect-ratio-mini": "0.0.2", 
　　"postcss-cssnext": "^3.1.0",
　　"postcss-px-to-viewport": "0.0.3", 
　　"postcss-viewport-units": "^0.1.3", 
　　"postcss-write-svg": "^3.0.1", 
　　"vue": "^2.5.2", 
　　"vue-router": "^3.0.1" 
},

然后配置.postcssrc.js，通常vue-cli构建的就在根目录下。

module.exports = { 
    "plugins": { 
        "postcss-import": {}, 
        "postcss-url": {}, 
        "postcss-aspect-ratio-mini": {}, 
        "postcss-write-svg": { utf8: false }, 
        "postcss-cssnext": {}, 
        "postcss-px-to-viewport": { 
            viewportWidth: 750, // (Number) The width of the viewport.
            viewportHeight: 1334, // (Number) The height of the viewport. 
            unitPrecision: 3, // (Number) The decimal numbers to allow the REM units to grow to. 
            viewportUnit: 'vw', // (String) Expected units. 
            selectorBlackList: ['.ignore', '.hairlines'], // (Array) The selectors to ignore and leave as px. 
            minPixelValue: 1, // (Number) Set the minimum pixel value to replace. 
            mediaQuery: false // (Boolean) Allow px to be converted in media queries. 
        }, 
        "postcss-viewport-units":{}, 
        "cssnano": { preset: "advanced", autoprefixer: false, "postcss-zindex": false } 
    } 
}

目前出视觉设计稿，我们都是使用750px宽度的，那么100vw = 750px，即1vw = 7.5px。那么我们可以根据设计图上的px值直接转换成对应的vw值。在实际撸码过程，不需要进行任何的计算，直接在代码中写px，比如：

.carimg{
    width:370px;
    height: 280px;
}

编译出的css

.carimg, .carimgdiv {
    width: 49.333vw;
    height: 37.333vw;
    content: "viewport-units-buggyfill; width: 49.333vw; height: 37.333vw";
}

大概就是这么多，想详细了解vw适配的话请去下边的链接

https://www.w3cplus.com/mobile/vw-layout-in-vue.html

转载于:https://www.cnblogs.com/locim/p/8822418.html