目 录CONTENT

文章目录

设计稿计算规则

Administrator
2020-07-24 / 0 评论 / 2 点赞 / 7423 阅读 / 5268 字

移动端设计稿计算

移动端设计稿的计算公式

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

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

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

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

image.png

当完成上面的步骤以后,我们应该还有一个注意事项,要在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

响应式案例

第一题

GIF202041155737bb52d84afd8e4fcab1364088ddebafd8.gif

第二题

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

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

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

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

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

设备宽度
iphone 4,5,5SE320px
iphone 6,7,8375px
iphone 6,7,8 plus414px
ipad768px

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

/* 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这个单位

image.png

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

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

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

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

2

评论区