宽度改变从而改变某项元素的样式或者显示与否---媒体流的运用

Posted 2020-12-19 zqblog1314

宽度改变从而改变某个元素的样式

@media screen and (max-width:750px) {
/* 仿bootstrap的自适应隐藏功能，当屏幕宽度小于750时，让它隐藏 */
    .h-right {
        display: none;
    }
/* 改变该元素的上边距 */
    .main_right {
        margin-top: 15px;
    }

    .left_content h1 {
        width: 20px;
        height: 100%;
        float: left;
        display: inline;
        background-image: linear-gradient(0deg, #20b1f7, #2f7ff0 50%);
        margin-bottom: -1000px;
        padding-bottom: 1000px;
        text-align: center;
        color: #fff;
        font-size: 20px;
        padding-left: 20px;
        padding-right: 35px;
        padding-top: 97px;
    }

/* 不成功时，可以试试权重，有可能是同级，样式被覆盖了，增加权重解决问题 */
    .left_header > .list_header {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }
}