前端开发--css--屏幕适配--流体布局、响应式布局

最新推荐文章于 2021-10-01 10:08:22 发布

原创最新推荐文章于 2021-10-01 10:08:22 发布 · 325 阅读

0 ·

CC 4.0 BY-SA版权

html +css +javascript 专栏收录该内容

43 篇文章

订阅专栏

本文探讨前端开发中的CSS屏幕适配技术，重点介绍流体布局和响应式布局如何确保在不同屏幕尺寸下文字及元素保持良好显示。针对屏幕缩小后文字无法缩放的问题，提出解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

屏幕缩小文字不能缩小

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">

	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

	<title>屏幕适配</title>
	<style type="text/css">

		.body{
			margin: 0;
		}
		.box a{
			display: block;
			width: 25%;

			/*
			第一种方法
			width: calc(25% - 4px);*/
			/*    这里要空格  不空格会出错*/

			height: 100px;
			background-color: pink;
			text-align: center;
			line-height: 100px;
			float: left;
			text-decoration: none;
			font-size: 14px;
			border: 1px solid black;

			box-sizing:border-box;

		}
	</style>
</head>
<body>
	<div class="box">
		<a href="#">菜单文字</a>
		<a href="#">菜单文字</a>
		<a href="#">菜单文字</a>
		<a href="#">菜单文字</a>
	</div>
	
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">

	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

	<title>屏幕适配</title>
	<style type="text/css">

		.body{
			margin: 0;
		}
		
		.box div{
			width: 23%;
			height: 200px;
			background-color: pink;
			border: 1px solid #000;
			margin: 1%;
			float: left;
			box-sizing:border-box;
		}

		/*      屏幕宽度小于800px时启动     */
		@media (max-width:800px){
			.box div{
				width: 46%;
				margin: 2%;
			}
		}

		/*      屏幕宽度小于400px时启动     */
		@media (max-width:400px){
			.box div{
				width: 94%;
				margin: 3%;
			}
		}
	</style>
</head>
<body>
	<div class="box">
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
	</div>
	
</body>
</html>