@media 属性

在CSS中，对用一个属性，在不同的端口/不同的效果，显示不同的效果。

横竖屏：
@media screen and (orientation: portrait) {
/竖屏 css/
}
@media screen and (orientation: landscape) {
/横屏 css/
}

不同显示的端口：

@media all and (min-width: 768px) {
.ping {
display: none;
}

#dowebok {
    display: none;
}

.pc {
    /*text-align: center;*/
    display: block;
    color: #ffffff;
}

.pc_title {
    text-align: center;
    margin: 20vh 0 5vh;
}

.pc_map img {
    margin: 0 auto;
}

}

@media (max-width: 768px) {
.pc {
display: none;
}

.two_1_1 .num {
    font-size: 4vw;
    position: relative;
    top: 24.5vh;
    right: -71vw;
    background: url(../images/line.png) no-repeat 0 0 / 100% auto;
    width: 21vw;
    height: 21vw;
}

.two_1_1 .number {
    text-align: center;
    position: relative;
    top: 5vh;
    left: -1vw;
    /*color: #b82220;*/
    /*color: #f5fff8;*/
}

}

@media (max-width: 414px) {
.pc {
display: none;
}

.two_1_1 .num {
    font-size: 4vw;
    position: relative;
    top: 24.5vh;
    right: -71vw;
    background: url(../images/line.png) no-repeat 0 0 / 100% auto;
    width: 21vw;
    height: 21vw;
}

.two_1_1 .number {
    text-align: center;
    position: relative;
    top: 5vh;
    left: -1vw;
    /*color: #b82220;*/
    /*color: #f5fff8;*/
}

}

@media (max-width: 360px) {
.pc {
display: none;
}

.two_1_1 .num {
    font-size: 4vw;
    position: relative;
    top: 22vh;
    right: -71vw;
    background: url(../images/line.png) no-repeat 0 0 / 100% auto;
    width: 21vw;
    height: 21vw;
}

.two_1_1 .number {
    text-align: center;
    position: relative;
    top: 5vh;
    left: -1vw;
    /*color: #b82220;*/
    /*color: #f5fff8;*/
}

}

@media (max-width: 320px) {
.pc {
display: none;
}

.two_1_1 .num {
    font-size: 4vw;
    position: relative;
    top: 22vh;
    right: -69vw;
    background: url(../images/line.png) no-repeat 0 0 / 100% auto;
    width: 21vw;
    height: 21vw;
}

.two_1_1 .number {
    text-align: center;
    position: relative;
    top: 5vh;
    left: -1vw;
    /*color: #b82220;*/
    /*color: #f5fff8;*/
}

}
v