css常用指南，响应式网站的开发方式，简单例子

最新推荐文章于 2024-04-23 17:13:57 发布

在下，杨江河

最新推荐文章于 2024-04-23 17:13:57 发布

阅读量112

点赞数

分类专栏： Mac开发文章标签： css css3 前端

本文链接：https://blog.csdn.net/Rockandrollman/article/details/128554226

版权

Mac开发专栏收录该内容

294 篇文章 3 订阅

订阅专栏

第一种，写一个css文件

.zong{
	width: 100%;
	border: 1px solid rebeccapurple;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
/* 超小屏幕 */
@media only screen and (max-width:767px){
	.zong div{
		width: 100%;
		background-color: blue;
	}
}
/* 小屏幕 */
@media only screen and (min-width:768px) and (max-width:992px){
	.zong div{
		width: 50%;
		background-color: green;
	}
}

/*大屏幕*/
@media only screen and (min-width:993px) and (max-width:1200px){
	.zong div{
		width: 33%;
		background-color: pink;
	}
}

/*大屏幕*/
@media only screen and (min-width:1201px){
	.zong div{
		width: 25%;
		background-color: darkorange;
	}
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/index.css"/>
	</head>
	<body>
		<div class="zong">
			<div>
				商品
			</div>
			<div>
				商品
			</div>
			<div>
				商品
			</div>
			<div>
				商品
			</div>
		</div>
	</body>
</html>

在这里插入图片描述

第二种，写多个css文件，在html引用时做判断

common

.zong{
	width: 100%;
	border: 1px solid rebeccapurple;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

iphone

.zong div{
		width: 100%;
		background-color: blue;
	}

ipad

.zong div{
		width: 50%;
		background-color: green;
	}

.zong div{
		width: 33%;
		background-color: pink;
	}

big_pc

.zong div{
		width: 25%;
		background-color: darkorange;
	}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/common.css"/>
		<link rel="stylesheet" media="screen and (max-width:767px)" href="css/iphone.css"/>
		<link rel="stylesheet" media="screen and (min-width:768px) and (max-width:992px)" href="css/ipad.css"/>
		<link rel="stylesheet" media="screen and (min-width:993px) and (max-width:1200px)" href="css/pc.css"/>
		<link rel="stylesheet" media="screen and (min-width:1201px)" href="css/big_pc.css"/>
	</head>
	<body>
		<div class="zong">
			<div>
				商品
			</div>
			<div>
				商品
			</div>
			<div>
				商品
			</div>
			<div>
				商品
			</div>
		</div>
	</body>
</html>