PC端开发中常用的响应式

css3中的@media

通过屏幕来设置不同的样式，一般涉及的是字体、宽度、高度之类

//通过屏幕的宽度来设置具体的样式
@media only screen and (max-width: 1366px){
    .className{
    //具体的样式
    }
}
@media only screen and (min-width: 1792px){
    .className{
    //具体的样式
    }
}

flex布局

通过flex:1来实现响应式

//父DIV样式
.parent {
    display: flex;
    height: 200px;
    flex-direction: row;
    text-align: center;
    line-height: 200px;
}

.left {
    width: 20%;
    background: #759a64;
}

.right {
    flex: 1;
    background: #3f70c3;
}

效果图：

栅栏模式

通过栅栏模式，可以通过设置col以下属性，来确定一行有几个DIV

    <el-row :gutter="10">
            <el-col :xs="8" 
                v-for="item in [1,2,3,4]"
                :key="item
                :sm="6"
                :md="4"
                :lg="3"
                :xl="1">
                <div class="grid-content bg-purple"></div>
            </el-col>
        </el-row>

其他

通过min-height/max-height/min-width/max-width等属性来设置样式