前段时间公司让写了两个pc端,一个移动端,在做pc端的时候,适配用的百分比布局,移动端用的插件lib-flexible实现的适配
首先来说简单的移动端适配
移动端适配
yarn add postcss-pxtorem lib-flexible amfe-flexible
我使用的是vue-cli,所以直接在main.js中引入依赖
import 'amfe-flexible/index.js'
然后在postcss.config.js中配置
module.exports = {
plugins: {
'autoprefixer': {
browsers: ['Android >= 4.0', 'iOS >= 7']
},
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['*']
}
}
}
同时,我们一定要加上视口
然后,还要设置不能缩放
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,
user-scalable=no"">
pc端适配
我用的百分比布局,首先我给最大app盒子设置了
#app {
position: absolute;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
}
然后对于所有宽度占满的盒子设置了
.picture-top {
width: 100%;
}
对于内部的盒子就换算他的百分比占比,比如我拿到是1920*1080的设计稿
现有一个布局宽度为1190,我用1190/1920 =0.62
.marketing-model {
width: 62%;
height: 546px;
margin: auto;
position: relative;
top: -155px;
background-color: white;
}
高度我一般是不管的。然后这个我觉得也挺麻烦的,一直要不停的换算,而且最小的盒子是根据他最近的父元素去算的,如果盒子嵌套过多,页面样式较复杂,就很容易弄混。
请教过同事之后,同事她们一般用的都是媒体查询去做适配,市面上的主流屏幕尺寸,她们就会写相应的几套css方案出来,如下:
<body>
<div class="apx">你好</div>
</body>
<style>
@media screen and (max-width: 1920px) {
body {
background-color: rgb(91, 199, 124);
}
.apx {
width: 100px;
height: 100px;
background-color: red;
}
}
@media screen and (max-width:1500px){
body{
background-color: rgb(144, 192, 231);
}
.apx{
width: 100px;
height: 100px;
background-color: pink;
}
}
@media screen and (max-width:500px){
body{
background-color: rgb(235, 161, 93);
}
.apx{
width: 100px;
height: 100px;
background-color: powderblue;
}
}
</style>
分别效果也是不同的
这个会更准确一点的去做适配,同时字体适配也可以使用媒体查询加上rem去实现字体的适配