vue 如何实现rem响应式布局

1,设计稿的宽度为1920,在网上找了计算方式,总觉的不太对,大神请帮忙看下有没有问题。
2,项目是pc端的,要适配移动端。我这个写出来后,移动端就变的特别小。
而且pc端在缩放的时候都会挤到一起。
3,在pc端和移动端需要判断吗?在网上找了好的都是移动端显示好小的,大神们请帮帮我吧
4,计算方式是,设计高100px,写1rem

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$Title$</title>
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <style  lang="less">
    .centre{
    //border: 1px solid red;
      /* width: 200px;
       height: 125px;*/
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
    }
    .header {
      width: 10.66rem;
      height: .5rem;
      font-size: .16rem;
      line-height: .5rem;
      border: 0.01rem solid #9b9b9b;
      box-sizing: border-box;
    .color {
      width: 0.05rem;
      height: .5rem;
      float: left;
      display: inline-block;
      background: #00CA89;
    }
    .topic {
      color: #303133;
      float: left;
      margin-left: .2rem;

    }
    .time {
      color: #FF9011;
      float: right;
      margin-right: .2rem;
    }
    .Total {
      color: #9E9E9E;
      float: right;
      margin-right: .2rem;
    }
    }

    .section {
      width: 10.66rem;
      height: 5.6rem;
      border: 0.01rem solid #9b9b9b;
      box-sizing: border-box;
    }
  </style>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<script>
  ~function () {
    let computed = function () {
      //=>DES-W:设计稿宽度 DEV-W:设备的宽度
      //设计稿宽度:1920
      let desW = 1920;
      let devW = document.documentElement.clientWidth;
  document.documentElement.style.fontSize = devW / desW * 100 + 'px';
    };
    computed();
    window.addEventListener('resize', computed, false);
  }();

</script>
<body>
<div id='app'>
  <div class="centre">
    <header class="header">
      <span class="color"></span>
      <div class="topic">
        <slot name="topic">Unit 1 My name’s Gina.综合与测试</slot>
      </div>
      <div class="time">
        <span>
            <slot name="time">22</slot>
        </span>
        <span class="Total">
            <slot name="Total" class>/40</slot>
        </span>
      </div>
    </header>
    <section class="section">
    </section>
  </div>
</div>
<script src=""></script>
<script>
  let vm = new Vue({
    el: '#app',
    data: {
      msg: "hhhhhhhh"

    }

  })

</script>
</body>
</html>

回答:

不知道你的rem是怎么换算出来的哈…但是如果你觉得比例是对的只是觉得小…可以把下面那个100改大点…
document.documentElement.style.fontSize = devW / desW * 100 + 'px';

回答:

这也是一种布局方式,但是这不是响应式,顶多算自适应布局,不过这里有个坑需要注意,一般情况下网页内显示的最小字体大小为12px,但是高度和行高随意,你的.header内的高度和行高造成了挤成一堆的感觉

回答:

一套1920的设计稿要适配移动? 适配? 不是要能手势缩放?
如果是缩放,那不需要计算,有 meta那个设置就够了
如果是适配,那么你和你们的设计师都没有明白什么是适配了。移动端尺寸标准都没有明白
720/750/1080(iphone plus 1242) ,至于1920的宽度拿去适显示在750或者1080的机器上,自然是会被缩小了,或是布局异常了

回答:

移动端需要设计一套UI吧,然后判断client来自PC还是mobile,调用不同的方式来适配

回答:

理论上PC和移动端的布局会有差别,需要分别写二套样式来适配。rem的自适应一般只是针对移动端各种尺寸大小分辨率大小做适合的显示适配。

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注