使用html5+css来自适应布局下图

移动端的,我想知道具体怎么写的
2025-05-14 09:16:24
推荐回答(2个)
回答1:

先给你写一套代码,之后再来解释哈。

css部分:

.aa {
    display: flex; //使用flex布局,可以轻易获得水平布局
    align-items: center; //垂直方向居中
    justify-content: center; //水平方向居中
    height: 200px;
    border: 1px solid #000;
}
.aa1, .aa2, .aa3 {
    flex: 1;
    padding: 2px;
    height: 100px;
}
.aa1 div, .aa2 div, .aa3 div {
    width: 80%;
    height: 100px;
}
.aa1 div {
    background-color: red
}
.aa2 div {
    background-color: green
}
.aa3 div {
    background-color: blue
}

html部分:


    //flex的容器外框
    内容1

    内容2

    内容3

  

效果如图:

垂直和水平居中都是相对于外框来说的,即本例的aa来说的。flex=1即为在水平方向是等分布局的。在你给的安例中,直接循环aa就可以。如果对flex不懂,可以去学习一下,推荐扩展链接:网页链接

回答2:

html一套就可以,可以用两个css一个用于pc端,一个用于移动端样式,移动端需要用media限定屏幕大小而改变布局

相关问答
最新问答