PC端移动端不同屏幕大小下响应式布局

最新推荐文章于 2023-10-08 09:37:57 发布

苘迷

最新推荐文章于 2023-10-08 09:37:57 发布

阅读量589

点赞数

分类专栏：前端文章标签： css 前端网站建设

原文链接：https://www.mk2048.com/blog/blog.php?id=h00jh1ha1h1j&title=PC%E7%AB%AF%E7%A7%BB%E5%8A%A8%E7%AB%AF%E4%B8%8D%E5%90%8C%E5%B1%8F%E5%B9%95%E5%A4%A7%E5%B0%8F%E4%B8%8B%E5%93%8D%E5%BA%94%E5%BC%8F%E5%B8%83%E5%B1%80

版权

前端专栏收录该内容

734 篇文章 1 订阅

订阅专栏

先上效果图：

PC端效果：

移动端效果：

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
		<title></title>
		<link rel="stylesheet" href="pc.css" media="screen and (min-width:700px)" />
		<link rel="stylesheet" href="mobile.css" media="screen and (max-width:699px)" />
	</head>
	<body>
		<h1 style="margin-top:20px;text-align:center;">响应式布局</h1>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
		</ul>
	</body>
</html>

pc.css 样式代码：

*{margin:0;padding:0;}
ul{width:calc(100% - 20px);padding:0 10px;margin:100px auto;height:auto;overflow:hidden;}
ul li{list-style:none;border:1px solid blue;width:calc(25% - 2px);height;100px;float:left;text-align:center;}

mobile.css 样式代码：

*{margin:0;padding:0;}
ul{margin:100px auto;padding:0 5px;height:auto;overflow:hidden;}
ul li{list-style:none;border:1px solid red;width:calc(100% - 2px);height;100px;float:left;text-align:center;}

我设置的临界点是699px,实际项目中大家可根据项目需求来设置更为精准的不同屏幕下的css,一般考虑PC端，Pad，手机端三种就可以了！

更多专业前端知识，请上【猿2048】www.mk2048.com