移动端适配的实现
这次文章主要是已实现为主，原理已经有许多大佬的博文了
移动端开发标签
<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-flexiblevw适配（百分比适配）
配置后直接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`
}
}
}本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
