1、使用 px2rem-loader (vue3.0以下脚手架构建的项目)
(1)安装 lib-flexible 和 px2rem-loader
npm i lib-flexible --s
npm i px2rem-loader --d
(2)在main.js文件中引入lib-flexible,即设置自动调整页面比例
import 'lib-flexible'
(3)还要在index.html中把这样的语句删除,否则将根据已有的meta标签来设置缩放比例
(4) 在build —> util.js文件中,添加px2remLoader配置
// utils.js
const cssLoader = {
loader: 'css-loader',
options: {
sourceMap: options.sourceMap
}
}
const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 75 //设计稿的宽度/10
}
}
还要在loaders里面加入px2remLoader
function generateLoaders (loader, loaderOptions) {
const loaders = options.usePostCSS ? [cssLoader, postcssLoader,px2remLoader] : [cssLoader,px2remLoader]
// ……
}
(5)在index.vue文件中使用px单位的时候,就能自动转换为rem了,并且调整屏幕大小的时候,也能自动缩放比例
注意:不需要转化的,如1px比较小,不需要转化成rem,可以在样式后面加 /no/
.hello{
width: 375px;
height: 100px;
border:1px solid #ccc; /*no*/
}
2、动态设置字体,在scss文件中通过函数将rem转换为px
(1)在index.html中动态设置字体大小
<script>
// 取得屏幕宽度
var devicewidth = document.documentElement.clientWidth || document.body.clientWidth
// 动态设置 html font-size 值
document.getElementsByTagName('html')[0].style.fontSize = devicewidth / 10 + 'px';
</script>
(2)在scss文件中定义函数
@function wh($px) {
// rem基准值
$rem: 75px; //设计稿的宽度/10
@return ($px/$rem) + rem;
}
(3)使用
width : wh(750px); //在浏览器打开,就可以转换为10rem了
(4)如果是webapp,要适配电脑和ipad等大屏幕,还要结合css3的@media 查询,针对不同的屏幕尺寸设置不同的样式
@media only screen and (min-width: 1024px){
html,body{
font-size:50px !important;
max-width:750px;
margin: 0 auto;
}
}
@media (min-device-width :768px)and (max-device-width : 1024px) {
html, body {
font-size: 70px !important;
max-width: 750px;
margin: 0 auto;
}
}
@media (min-device-width :720px)and (max-device-width : 768px){
html, body {
font-size: 50px !important;
margin: 0 auto;
}
}
@media (min-device-width :480px)and (max-device-width : 720px){
html, body {
font-size: 45px !important;
margin: 0 auto;
}
}