css-移动端布局-pxtorem与淘宝移动端实战

发布于：2022-03-31 11:17:55  栏目：技术文档

作业内容：

1. 总结出移动端布局的基本思路与三种视口之间的关系
2. 实战手机页面的基本整体架构:页眉,页脚,主体等

1、移动端布局

1、通过设置viewport缩放来实现2、通过rem相对单位来实现DPR、rem都用到缩放因子来解决问题

2、rem与px详解

step1比较

step2查看

step3异常

step4优化

step5检查

实战作业

/* 样式重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* 链接 */
a {
    text-decoration: none;
    color: #555;
}
html {
    font-size: calc(100vw / 3.75);
}
body {
    font-size: 0.12rem;
    background-color:#f4f4f4;
    display: grid;
    /* grid-template-rows: repeat(3,1fr); */
}
header{
    display: grid;
}
header .head{
    display: grid;
    grid-template-columns: .4rem 1fr;
    place-items: center;
    width: 100vw;
    background-color: tomato;
    position: fixed;
    top: 0;
    left: 0;
}
header .head .tb{
    margin: .05rem;
    margin-left: .1rem;
    font-size: .28rem;
    color: white;
}
header .placeholder{
    background-color: white;
    width: 3.2rem;
    height: .25rem;
    border-radius: .05rem;
    border: none;
    text-align: center;
}
header .img1{
    width: 100%;
    height: 100%;
    grid-column: span 2;
    margin-top: .37rem;
}
header .navs{
    background-color: white;
    grid-column: span 2;
    display: grid;
    grid-template-columns: repeat(5,1fr);
    place-items: center;
    padding: .1rem;
}
header .navs .nav{
    text-align: center;
    padding: .05rem;
    font-size: .1rem;
}
header .navs .nav img{
    width: 100%;
}
main{
    background-color: white;
    border-radius: .1rem;
    margin: .1rem;
    padding: .1rem;
}
main .list1{
    display: grid;
    grid-template-columns: repeat(4,1fr);
}
main .list1 .box{
    display: grid;
    padding: .05rem;
}
main .list1 .box .desc1{
    font-size: .16rem;
    font-weight: bolder;
}
main .list1 .box .desc2{
    font-weight: bold;
    font-size: .14rem;
    color: rgb(197, 73, 36);
}
main .list1 .box .content{
    padding: .05rem;
    border-radius: .1rem;
    display: grid;
    background-color: rgb(253, 242, 239);
}
main .list1 .box div img{
    width: 100%;
}

相关推荐