乐趣区

关于javascript:移动端适配实现为主

jiezi

这次文章次要是已实现为主，原理曾经有许多大佬的博文了

挪动端开发标签

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

rem 原理

通过设置 html 的 fontSzie 来实现动静 rem，其实就是将页面百分比化
比方：

<html font-size="50px">
    <div class="box" width="1.25rem"></div>
</html>

html 为 50px; 能够失去 1rem 为 50px（html 被分为 100rem）

那么：box 的 1.25rem 宽度就能够失去为(50*1.25)px

@media 实现 html 的 fontSize 设置
@charset "UTF-8";

@mixin queryWidth($min, $max) {
 @if $min == -1 {@media screen and (max-width: $max+px) {
     html {font-size: ( ($max+1) / 375 ) * 100px;
     }
   }
 } @else if $max == -1 {@media screen and (min-width: $min+px) {
     html {font-size: ( $min / 375) * 100px;
     }
   }
 } @else {@media screen and (min-width: $min+px) and (max-width: $max+px) {
     html {font-size: ( $min / 375) * 100px;
     }
   }
 }
}

@include queryWidth(-1, 319);    // for iphone 4
@include queryWidth(320, 359);   // for iphone 5
@include queryWidth(360, 374);
@include queryWidth(375, 383);   // for iphone 6
@include queryWidth(384, 399);
@include queryWidth(400, 413);
@include queryWidth(414, -1);    // for iphone 6 plus
纯 css 实现 html 的 fontSize 设置

挪动端应用 rem 布局须要通过 JS 设置不同屏幕宽高比的 font-size，联合 vw 单位和 calc() 可脱离 JS 的管制

/* 基于 UI width=750px DPR= 2 的页面 */
html {font-size: calc(100vw / 7.5);
}
jq 实现 html 的 fontSize 设置（保留大屏幕为 100px）
$(window).resize(infinite);
             
infinite();
function infinite() {var htmlWidth = $('html').width();
    if (htmlWidth >750) {$("html").css({"font-size" : "100px"});
    } else {$("html").css({"font-size" :  100 / 750 * htmlWidth + "px"});
    }
}

#body 标签
width: 7.5rem;
阿里 flexible 实现 html 的 fontSize 设置
npm i -S amfe-flexible

vw 适配（百分比适配）

配置后间接 css 写 px 就会主动解析为 vw 了

# 装置 postcss-px-to-viewport：npm install postcss-px-to-viewport --save

# postcss.config.js 配置：module.exports = {
  plugins: {autoprefixer: {},
    "postcss-px-to-viewport": {
        viewportWidth: 375,   // 视窗的宽度，对应的是咱们设计稿的宽度，Iphone6 的个别是 375（xx/375*100vw）viewportHeight: 667, // 视窗的高度，Iphone6 的个别是 667
        unitPrecision: 3,     // 指定 `px` 转换为视窗单位值的小数位数（很多时候无奈整除）viewportUnit: "vw",   // 指定须要转换成的视窗单位，倡议应用 vw
        selectorBlackList: ['.ignore', '.hairlines'],// 指定不转换为视窗单位的类，能够自定义，能够有限增加, 倡议定义一至两个通用的类名
        minPixelValue: 1,     // 小于或等于 `1px` 不转换为视窗单位，你也能够设置为你想要的值
        mediaQuery: false     // 容许在媒体查问中转换 `px`
    }
  }
}

相干博文

https://www.cnblogs.com/azhai…

退出移动版