柵格佈局xs sm md lg xl,簡單的響應式示例代碼

xl對應屏幕 >=1920 px 超大顯示器
lg對應屏幕>=1200px,小於 1920px 臺式1920*1080顯示器
md對應屏幕>=992px,小於1920px 適合筆記本
sm對應屏幕>=768px,小於992px 適合平板
xs對應屏幕<=768 手機端屏幕

例如有如下代碼將屏幕分成3列,進行響應式佈局

<el-row :gutter="10">
    <el-col :xs="0" :sm="7" :md="6" :lg="5" :xl="5"></el-col>
    <el-col :xs="24" :sm="17" :md="12" :lg="14" :xl="14"></el-col>
    <el-col :xs="0" :sm="0" :md="6" :lg="5" :xl="5"></el-col>
</el-row>

當屏幕的大小變成手機般大小(屏幕寬度<768px)時只顯示xs=24的佈局,
768px到992px時顯示sm=7和sm=17的兩列,並且按照7:17顯示
992px到1200px時顯示3列按照md=6、md=12和md=6比例顯示
1200px到1920px時按照lg=5、lg=14和lg=5比例顯示

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章