响应式布局入门【待更新】 – 魅影资源博客

响应式布局入门【待更新】

技术文章 诗无尽头 5个月前 (03-15) 25次浏览 已收录 0个评论
<div class="grid">
	<div class="row">
		<div class="col col-1 col-ml-1">1 Columns</div>
	</div>
	<div class="row">
		<div class="col col-2">2 Columns</div>
	</div>
	<div class="row">
		<div class="col col-3">3 Columns</div>
	</div>
	<div class="row">
		<div class="col col-4">4 Columns</div>
	</div>
	<div class="row">
		<div class="col col-5">5 Columns</div>
	</div>
	<div class="row">
		<div class="col col-6">6 Columns</div>
	</div>
	<div class="row">
		<div class="col col-7">7 Columns</div>
	</div>
	<div class="row">
		<div class="col col-8">8 Columns</div>
	</div>
	<div class="row">
		<div class="col col-9">9 Columns</div>
	</div>
	<div class="row">
		<div class="col col-10">10 Columns</div>
	</div>
	<div class="row">
		<div class="col col-11">11 Columns</div>
	</div>
	<div class="row">
		<div class="col col-12">12 Columns</div>
	</div>
</div>
body{border:1px solid red!important;}
/*栅格系统*/
.row{width:100%;display:flex;flex-wrap:wrap;}
.col{border:1px solid red!important;}
.col-1{width:8.33%;}
.col-2{width:16.66%;}
.col-3{width:25%;}
.col-4{width:33.33%;}
.col-5{width:41.66%;}
.col-6{width:50%;}
.col-7{width:58.33%;}
.col-8{width:66.66%;}
.col-9{width:75%;}
.col-10{width:83.33%;}
.col-11{width:91.66%;}
.col-12{width:100%;}
/*抵消系统*/
.col-ml-1{margin-left:8.33%;}
.col-ml-2{margin-left:16.66%;}
.col-ml-3{margin-left:25%;}
.col-ml-4{margin-left:33.33%;}
.col-ml-5{margin-left:41.66%;}
.col-ml-6{margin-left:50%;}
.col-ml-7{margin-left:58.33%;}
.col-ml-8{margin-left:66.66%;}
.col-ml-9{margin-left:75%;}
.col-ml-10{margin-left:83.33%;}
.col-ml-11{margin-left:91.66%;}
.col-ml-12{margin-left:100%;}
/* 大屏幕(大桌面显示器,大于等于 1200px) */
@media screen and (min-width:1200px){
	/*.col-4{background:red;}*/
}
/* 中等屏幕(桌面显示器,大于等于 992px 并小于等于 1200px) */
@media screen and (min-width:992px) and (max-width:1200px){
	/*.col-4{background:yellow;}*/
}
/* 小屏幕(平板,大于等于 768px 并小于等于 992px) */
@media screen and (min-width:768px) and (max-width:992px){
	/*.col-4{background:blue;}*/
}
/* 超小屏幕(手机,小于等于 768px) */
@media screen and (max-width:768px){
	/*.col-4{background:#000;}*/
}

魅影博客 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:响应式布局入门【待更新】
喜欢 (0)
[18739399353]
分享 (0)
关于作者:
唯有自由才能触摸虚无的自我
发表我的评论
取消评论
表情 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址