设计稿计算规则

移动端设计稿计算

移动端设计稿的计算公式

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

将上面的计算结果赋值给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>

1. 先全屏盒子

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

2. 设置title-bar的固定高度

   这个地方的title-bar它有高度，也有自己的主题色，所以这个地方的高度与颜色我们一般都会使用一个CSS全局变量来表示，以方便后期统一更改

   :root{
       --primaryColor:#123456;
       --titleHeight: 45px;
   }
   .title-bar{
       background-color:var(--primaryColor);
       height:var(--title-height);
   }
   

3. 对页面进行切割，让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这个框架的屏幕划分来得到的(因为现在大多数框架都是根据这个范围来划分)

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

响应式案例

第一题

第二题

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

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

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

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

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

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

/* 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自动适应的

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

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