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

最新推荐文章于 2024-09-25 10:28:03 发布

小哦--

最新推荐文章于 2024-09-25 10:28:03 发布

阅读量288

点赞数

分类专栏： html +css +javascript

本文链接：https://blog.csdn.net/sundanping_123/article/details/96270689

版权

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

摘要由CSDN通过智能技术生成

在这里插入图片描述

屏幕缩小文字不能缩小

<!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>
</