<template>
<div class="parent">
<div class="side"></div>
<div class="main"></div>
</div>
</template>
<script>
export default {};
</script>
<style lang="less" scoped>
.side {
height: 300px;
background-color: #4eb3b9;
}
.main {
height: 300px;
background-color: #ff0097;
}
/*device-width: >= 1000px*/
@media screen and (min-width: 1000px) {
.parent {
width: 960px;
margin: 0 auto;
}
.side {
width: 300px;
height: 300px;
background-color: #4eb3b9;
float: left;
}
.main {
width: 650px;
height: 300px;
margin-left: 10px;
background-color: #ff0097;
float: left;
}
}
/*device-width:400px-1000px*/
@media screen and (min-width: 400px) and (max-width: 1000px) {
.parent {
display: flex;
}
.side {
width: 300px;
}
.main {
flex: 1;
margin-left: 10px;
}
}
/*device-width: <= 400px*/
@media screen and (max-width: 400px) {
.parent {
display: flex;
flex-flow: column wrap;
}
.side {
flex: 1;
margin-bottom: 10px;
}
.main {
flex: 1;
}
}
</style>
宽度大于1000px:
宽度在400到1000之间: