设计稿计算规则-杨标的博客

移动端设计稿计算

移动端设计稿的计算公式

设备宽度 / 设计稿的宽度 * 基准数

将上面的计算结果赋值给rem

:root{
    font-size: calc(设备宽度 / 设计稿的宽度 * 基准数);
}

这个里面的基准数可以是任何值，但是我们如果使用pxcook这个软件应该要和这个软件保持一致

当完成上面的步骤以后，我们应该还有一个注意事项，要在body上面恢复网页的默认字体大小，不然会影响到网页的默认字体与line-height

body{
    font-size:16px;
}

App界面开发注意事项

在APP开发的时候，我们一般是把APP的头部title-bar与主体部分content-box进行拆分

<div id="app">
    <div class="title-bar">
    </div>
    <div class="content-box">
    </div>
</div>

先全屏盒子

#app{
    width:100vw;
    height:100vh;
    display:flex;
    flex-direction:column;
}

设置title-bar的固定高度

这个地方的title-bar它有高度，也有自己的主题色，所以这个地方的高度与颜色我们一般都会使用一个CSS全局变量来表示，以方便后期统一更改
```
:root{
    --primaryColor:#123456;
    --titleHeight: 45px;
}
.title-bar{
    background-color:var(--primaryColor);
    height:var(--title-height);
}
```
对页面进行切割，让content-box占满剩下的空间，然后执行溢出滚动
```
.content-box{
    flex:1;
    overflow:auto;
}
```

弹性盒子属性的封装

弹性布局主要使用的是就是弹性盒子，我们在这里需要将这个弹性盒子的常用属性封装起来，以期能够达到更方便的操作

.flex-row{
    display:flex;
    flex-direction:row;
}
.flex-column{
    display:flex;
    flex-direction:column;
}
.j-c{
    justify-content:center;
}
.j-s-a{
    justify-content:space-around;
}
.j-s-b{
    justify-content:space-between;
}
.a-c{
    align-items:center;
}

响应式布局

核心与语法

响应式布局的核心？媒体查询@media

目前我们只使用它进行了屏幕的查询，所以它的语法格式如下

设备宽度的查询

@media only screen and (max-width:宽度) and (min-width:宽度) {
    
}

设备方向的查询

@media only screen and (orientation:landscape) {
    /*手机横向*/
}
@media only screen and (orientation:portrait) {
    /*手机竖向*/
}

👿 注意事项：使用媒体查询的时候，这里面的代码应该是放在最后面，因为选择器权重相同的情况下，我们在这里后面的样式覆盖前面的样式

屏幕范围划分

根据bootstrap这个框架的屏幕划分来得到的(因为现在大多数框架都是根据这个范围来划分)

0px~767px手机（小屏幕）
768px~991px平板
992px~1199pxPC设备
1200px及以上大型PC

响应式案例

第一题

第二题

现在四张图片，默认排列在同一行，

如果屏幕的宽度在0~767px之间，则一排显示1个；

如果屏幕的宽度在768px~991px之间，则一排显示2个；

如果屏幕的宽度在992px或以上，则一排显示4个

根据响应式计算移动端设计稿

设备	宽度
iphone 4,5,5SE	320px
iphone 6,7,8	375px
iphone 6,7,8 plus	414px
ipad	768px

现在就根据上面的这四个值的范围去设置我们的响应式代码

/* iphone 4 ,5 , 5se 
   这个地方虽然说是320代表最小的iphone，但是如果我们的设备仍然还是小于这个值，那么它又会恢复成一个默认值
   我们现在就把小于320px也算在这个范围里面
   min-width:320px换成  min-width:0px
*/
@media only screen and (min-width:0px) and (max-width:374px) {
    :root{
        font-size: calc(320px / 750 * 100);
    }
}

/* iphone 6,7,8 三个 */
@media only screen and (min-width:375px) and (max-width:413px) {
    :root{
        font-size: calc(375px / 750 * 100);
    }
}

/* iphone 6 7 8 plus */
@media only screen and (min-width:414px) and (max-width:767px) {
    :root{
        font-size: calc(414px / 750 * 100);
    }
}

/* ipad */
@media only screen and (min-width:768px) and (max-width:991px){
    :root{
        font-size: calc(768px  / 750 * 100);
    }
}

/* 大于992px的 认为到了PC，重新回到768px */
@media only screen and (min-width:992px){
    :root{
        font-size: calc(768px  / 750 * 100);
    }
    #app{
        width: 768px;
        margin: auto;
    }
}

自适应布局

针对于响应式布局我们使用媒体查询与rem可以在不同的设备下面调整页面的大小比例，便是这样操作也有一点麻烦，所以针对移动端还有另一种页面叫自适应页面（一个页面不同的宽度下面自动去适应）。它主要使用的单位就是vw这个单位

这样我在进行布局的时候全部都可以使用vw这个单位。这个单位有个先天性的优势，它是其于视口viewport的百分比来进行的，所以无论是什么设备，无论是什么设计稿，都可以使用这个单位，无需进行复杂的计算

但是在使用这个单位的时候也有一些细节要注意，有些特殊的样式上面是不需要设置vw自动适应的

title-bar这个地方不需要自适应
margin-top隔开的边框的地方
border的边框

自适应布局有个缺点，它所有的单位都是通过vw来控制的，后期我们不能主动的去控制vw

目录CONTENT

设计稿计算规则