前端工程师拿到一张设计稿如何在vue项目中布局

eks
915 阅读5分钟

前言

  • 很多时候我们拿到一张设计稿后不知道如何下手，使用px、百分比、vw还是用em、rem等来作为布局单位呢（此文以vw为例）；
  • 很多年前流行媒体查询来根据不同屏幕来做不同的适配，自从flex布局逐渐流行之后，新的网站大多数人都很少再去使用css的媒体查询了；
  • 那么我们应该怎么去做好适配？
    • 接下来看看下面这张图； 设计稿
    • 这张图宽1360，高768，在我们拿到这张图的时候应该都会想到外层就用两个div吧
    <body>
<div class="layout">
    <div class="banner">
    </div>
    <div class="lists">
    </div>
</div>
</body>
    • 此时问题来了：
      1. 给了一张设计稿，在lists列表中每项（item）的宽度该怎么设置？
      2. 如果宽度自适应，屏幕达到最小宽度后出现横向滚动条还是依次从4-1掉下来排列？
      3. 如果是做大屏显示（dashboard）允许出现竖向滚动条吗？
      4. 如果不允许出现竖向滚动条，高度应该设置多少？该怎么设置？

基于这些问题，晚生给设计师和前端工程师分别提个问题：

  • 前端：拿到这张设计稿，我应该怎么做，应该考虑什么，需要（交互）设计师提供什么？
  • UX：我在做设计的时候应该给前端工程师提供几种尺寸图？我对这张设计稿有其他什么要求吗（交付方面）？

一、宽度自适应 + 可出现竖向滚动条 + 高度固定

  • 示例1

    • html
    <div id="app" class="layout">
    <div class="banner">
        <section class="banner-list">0</section>
    </div>
    <div class="lists">
        <section class="item item1">1</section>
        <section class="item item2">2</section>
        <section class="item item3">3</section>
        <section class="item item4">4</section>
    </div>
</div>
    • css - 我们使用flex弹性盒子布局，关键点设置item的flex为auto，当宽度不够时，从4到1会依次换行
    * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    background-color: #f1f1f1;
}
.layout {
    padding: 28px;
    width: 100%;
}
.banner-list {
    padding: 30px;
    background-color: #6b3ddf;
    width: 100%;
    height: 320px;
    font-size: 20px;
    color: #fff;
    text-align: right;
}

.lists {
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    flex-flow: wrap;
    width: 100%;
}
.item {
    flex: auto;
    padding: 30px;
    height: 300px;
    font-size: 20px;
    color: #fff;
    text-align: right;
}
.item1 {
    background-color: #dd5ee2;
}
.item2 {
    background-color: #9c5ee2;
}
.item3 {
    background-color: #5e96e2;
}
.item4 {
    background-color: #5e64e2;
}
    • 预览效果

  • 示例二 设计稿

    • html
    <body>
<div id="app" class="layout">
    <div class="banner">
        <section class="banner-list">0</section>
    </div>
    <div class="lists">
        <section class="item item1">1</section>
        <section class="item item2">2</section>
        <section class="item item3">3</section>
    </div>
</div>
</body>
    • css - list1和list2各占25的宽，list3占50的宽
    .item {
      padding: 30px;
      min-width: 150px;
      height: 300px;
      font-size: 20px;
      color: #fff;
      text-align: right;
  }
  .item1 {
      flex: 1;
      background-color: #dd5ee2;
  }
  .item2 {
      flex: 1;
      background-color: #9c5ee2;
  }
  .item3 {
      flex: 2;
      background-color: #5e96e2;
  }
    • 预览效果

以上两种设计稿，如果UX没有特别要求咱们开发就可以这样做

如果lists不允许换行，可以去掉flex-flow: wrap;

二、dashboard

注意：通常在这种情况下，咱们的宽高都是撑满屏幕的

  • 下面以第二张设计稿为例

    • html
    <body>
<div id="app" class="layout">
    <div class="banner">
        <section class="banner-list">0</section>
    </div>
    <div class="lists">
        <section class="item item1">
          <article class="circle">756/1690</article>
          <article class="des">
              <span class="title">这里是标题说明：</span>
              <span class="code">1568</span>
          </article>
          <article class="des">
              <span class="title">这里是标题说明：</span>
              <span class="code">568</span>
          </article>
        </section>
        <section class="item item2">2</section>
        <section class="item item3">3</section>
    </div>
</div>
</body>
    • css
    1. 使用vh设置高度（页面整体高度为100vh），假设banner所占比为40，lists所占比为60
    2. list1和list2各占25的宽，list3占50的宽，所以占比为1:1:2
    3. 你可以这样理解1:1:2，咱们把宽分成100份，list1和list2各占25份，list3占50份，这样就是25:25:50 = 1:1:2 ``` * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #f1f1f1; } .layout { width: 100%; height: 100vh; } .banner-list { padding: 30px; background-color: #6b3ddf; width: 100%; height: 40vh; font-size: 20px; color: #fff; text-align: right; }
    .lists {

        padding-top: 30px;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    width: 100%;
    height: 60vh;
}
.item {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100%;
  font-size: 20px;
  color: #fff;
  text-align: right;
  overflow: hidden;

    } .item1 { flex: 1; background-color: #dd5ee2; } .item2 { flex: 1; background-color: #9c5ee2; } .item3 { flex: 2; background-color: #5e96e2; }

    .circle { margin-bottom: 32px; background-color: rgba(255,255,255,.8); border-radius: 50%; width: 20vw; height: 20vw; font-size: 1.6vw; text-align: center; line-height: 20vw; color: #0091ff; }

    .des { width: 20vw; text-align: left; } .des .title { font-size: 1.5vw; } .des .code { font-size: 1.8vw; color: #333; } ```

    • 预览效果

看完demo我们来回答一下上面所提到的问题

前文所提问题

  1. 给了一张设计稿，在lists列表中每项（item）的宽度该怎么设置？ - 使用flex弹性盒子宽度最好用百分比
  2. 如果宽度自适应，屏幕达到最小宽度后出现横向滚动条还是依次从4-1掉下来排列？ - 如果是要求是做相适应式网站同时要兼容多端，可用示例1的方式
  3. 如果是做大屏显示（dashboard）允许出现竖向滚动条吗？ - 在dashboard中原则上是不允许出现滚动条的
  4. 如果不允许出现竖向滚动条，高度应该设置多少？该怎么设置？ - 高度应该由内容撑开盒子，建议盒子设置一个最小高度
  5. 拿到这张设计稿，我应该怎么做，应该考虑什么，需要（交互）设计师提供什么？
  6. 我在做设计的时候应该给前端工程师提供几种尺寸图？我对这张设计稿有其他什么要求吗（交付方面）？ - 5、6问题： 很多情况下我们拿到一张设计稿需要考虑以上四个问题，同时ux只需要提供一种尺寸的设计稿给我就行了，且需要告诉我item中的内容在不同屏幕尺寸下该如何呈现，并把其他要求描述清楚，做好给出文档

其他实现方式

  • 使用媒体查询
  • 使用js监听onresize函数动态设置宽高（推荐）
  • 使用rem（建议PC别用）

Tip

  • 假如设计师设计的图尺寸是1920 * 1080，前端工程师使用21/21.5英寸的显示器，在前端开发的时候页面所呈现的尺寸高度不一定是1080，因为浏览器有title栏、url栏、收藏栏等需要占用高度
  • 现代浏览器-21/21.5英寸的显示器，通常chrome的页面高度是1009

本文所提供一种个人解题思路，望各位读者指正

avatar
文章
阅读
粉丝