迷迷糊糊pc端适配----求大佬指点

最新推荐文章于 2023-02-13 10:21:47 发布

爱吃一块五花肉

最新推荐文章于 2023-02-13 10:21:47 发布

阅读量393

点赞数 1

本文链接：https://blog.csdn.net/yyanglirong/article/details/105806015

版权

前段时间公司让写了两个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去实现字体的适配

爱吃一块五花肉

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
迷迷糊糊pc端适配----求大佬指点

前段时间公司让写了两个pc端，一个移动端，在做pc端的时候，适配用的百分比布局，移动端用的插件lib-flexible实现的适配首先来说简单的移动端适配移动端适配yarn add postcss-pxtorem lib-flexible amfe-flexible我使用的是vue-cli，所以直接在main.js中引入依赖import 'amfe-flexible/index.js'...
复制链接

扫一扫