Html-移动端与响应式

.banner {

display: flex;

width: 100%;

height: 569px;

background-color: #edeffe;

flex-direction: column;

justify-content: center;

align-items: center;

}

.copywarp {

flex: 2;

display: flex;

flex-direction: column;

justify-content: flex-start;

align-items: center;

text-align: center;

}

.copywarp .redapple {

margin: 20px 0;

width: 54px;

height: 67px;

background-image: url(“…/imag/applered.png”);

background-position: center;

background-repeat: no-repeat;

}

.copywarp h2 {

width: 500px;

position: inherit;

font-size: 43px;

line-height: 1.08349;

color: #1d1d1f;

padding-left: 20px;

margin-bottom: 20px;

}

.copywarp .rightlogo a {

text-decoration: none;

color: #06c;

}

.copywarp .rightlogo a:hover {

text-decoration: underline;

}

.rightlogo {

position: relative;

}

.copywarp .rightlogo::before {

position: absolute;

left: 65px;

top: 3px;

content: " ";

display: block;

width: 15px;

height: 15px;

background-image: url(“…/imag/xiangyou1.png”);

background-position: center center;

background-size: 100% auto;

background-repeat: no-repeat;

}

.picture {

width: 80%;

height: 90%;

height: 281px;

flex: 3;

display: flex;

flex-direction: row;

justify-content: space-around;

margin: 0px;

}

.picture .img_1 {

flex: 1;

}

.picture .img_2 {

flex: 1;

}

.picture .img_3 {

flex: 1;

}

• {

margin: 0;

padding: 0;

}

.nav {

width: 100%;

height: 44px;

background-color: rgba(0, 0, 0, 0.8);

display: flex;

justify-content: center;

align-items: center;

font-family: “宋体”;

font-size: 12px;

}

.nav a {

color: #fff;

/* 设置a标签下划线为none */

text-decoration: none;

width: 102px;

text-align: center;

}

.nav > .logo {

height: 44px;

width: 44px;

background-image: url(“…/imag/logo.png”);

background-repeat: no-repeat;

background-position: center;

}

.nav > .search {

width: 44px;

height: 44px;

background-image: url(“…/imag/search.png”);

background-repeat: no-repeat;

background-position: center;

}

.nav > .buy {

width: 44px;

height: 44px;

background-image: url(“…/imag/buy.png”);

background-repeat: no-repeat;

background-position: center;

}

label {

width: 44px;

height: 44px;

}

.togglebtn {

width: 44px;

display: none;

position: relative;

flex-direction: column;

justify-content: center;

align-items: center;

}

.togglebtn > .line {