想要一个页面适应不同的屏幕,可以使用下面的方法
<el-row :gutter="10"><el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div>内容</div></el-col><el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div>内容</div></el-col><el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div>内容</div></el-col><el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div>内容</div></el-col>
</el-row>
:xs=“4” :sm=“6” :md=“8” :lg=“9” :xl=“11”
调整参数,就可以适应不同屏幕,而不会使页面在不同分辨率的屏幕下显得杂乱。
屏幕被分成12分,参数是几,就是占几份。
如果需要一行占1个,参数就12(12/12)
如果需要一行占2个,参数就6(6/12)
如果需要一行占3个,参数就4(4/12)
…
xs :
sm:≥768px 响应式栅格数或者栅格属性对象
md:≥992px 响应式栅格数或者栅格属性对象
lg:≥1200px 响应式栅格数或者栅格属性对象
xl:≥1920px 响应式栅格数或者栅格属性对象