我们先运行下项目，效果如下：
image.png
没什么问题，但是当我们双击页面的时候页面会放大缩小。我们该怎么处理呢。
很简单，我们在index.html页面处理一下。
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maxmun-scale=1.0,user-scalable=no">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
在index.html中,viewprot那个标签内,我们把屏幕的最大和最小缩小范围都设置成1，并且禁止用户页面双击页面。
接下来我们处理文字适配问题，之前我们在开发移动项目中，字体的大小是写死的，不同机型，屏幕大小不同，页面字体的大小是一样，这就导致，手机上展示的h5页面，字体正常，然而到了pad上，字体就会变的很小，网上有许多方法，我们选择最简单的方法，用vm进行布局，我们打入一个组件。postcss-px-to-viewport，打开终端 运行 yarn add postcss-px-to-viewport。运行即可。
下面我们要对postcss-px-to-viewport进行配置:
1.新建 postcss.config.js 文件
2.配置适配项。
plugins: {
autoprefixer: {},
'postcss-px-to-viewport': {
unitToConvert: 'px', // 要转换的单位
viewportUnit: 'vw', // 转换后的单位
viewportWidth: 375 // 适口宽度
}
}
}
如果美工提供宽度为750的宽度的页面，需对应的把viewportWidth改变为750.这样我们改变页面的大小，字体也会适配了。
网友评论