缩小整个 HTML 页面答案

【问题标题】：Shrinking down whole HTML page缩小整个 HTML 页面
【发布时间】：2023-03-28 11:08:01
【问题描述】：

我正在尝试使我的网页具有响应性。有没有简单的方法可以做到这一点？

我尝试了多种方法，但我能做的最好的事情是缩小顶部的徽标，而不是缩小用于导航的包含图像的列表。

body {
    background-image: url("blob:https://imgur.com/afa5f824-36da-44c8-a6d0-1cd8c34d1167");
    background-repeat: repeat;
}

#title {
	margin-left: 27%;
}

.imginlist {
	width: 80%;
}

/* MAIN MENU */
ul.a {
  margin: 0 auto;
  white-space: nowrap;
  width: 1100px;
  overflow-x: auto;
}

ul.a li {
  display: inline-block;
  width: 200px;
  height: 150px;
}

.container {
  padding: 20px;
  resize: both;
  position: relative;
  height: 400px;
}

.center {
        position: absolute;
        top: 0;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, 0%);
        -ms-transform: translate(-50%, 0%);
        -webkit-transform: translate(-50%, 0%);
        -moz-transform: translate(-50%, 0%);
        -o-transform: translate(-50%, 0%);
}

/* scaling */

<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="indexTWOcss.css">
			<meta charset="utf-8"/>
		</meta>
		<link rel='shortcut icon' type='image/x-icon' href='images/favicon.ico' />
		<title>Homepage</title>
	</head>
	<body>
	<div class="container">
		<!-- top of the website: The Banner + Navagation. -->
		<!-- Animal Crossing Logo DIV -->	
		<div class="center">
		<img src="https://i.imgur.com/pR4Hl0x.png" alt="Animal Crossing Logo" id="title"/>
		<!-- Main Homepage Body -->	
		<ul class="a">
			<li>
				<img src="https://i.imgur.com/Zi7NuYY.png" class="imginlist">
				</li>
				<li>
					<img src="https://i.imgur.com/LULfS54.png" class="imginlist" >
					</li>
					<li>
						<img src="https://i.imgur.com/PaxKNqq.png" class="imginlist">
						</li>
						<li>
							<img src="https://i.imgur.com/6WCbjck.png" class="imginlist">
							</li>
							<li>
								<img src="https://i.imgur.com/Gqjl821.png" class="imginlist">
								</li>
							</ul>
						</div>		
						</div>
				</body>
			</html>

【问题讨论】：

w3schools.com/html/html_responsive.asp

标签： html css responsive

【解决方案1】：

这是一个开放式问题，有多种方法可以根据个人选择进行

选项 1：使用媒体查询

/* ----------- Google Pixel ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) {

}

/* Portrait */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: portrait) {

}

您可以使用此类媒体查询使其响应各种尺寸。你可以在CSS Tricks - Media Queries找到整个列表

选项 2：使用 CSS 网格

.divParent
{
grid-template-colums: 0.5fr 1fr 0.5fr  //makes three columns
}

.divChild
{
grid-column: 1  //puts the content in first column
}

这是一个 CSS 标签，从 2014 年开始是实验性的，并在 2017 年得到了所有浏览器的官方支持。你可以在CSS Tricks - CSS Grids找到更多关于它的使用信息

【讨论】：

【解决方案2】：

正如理查德已经说过的，一般媒体查询的行业标准。即使使用 CSS 网格，您仍然可以创建模板并在媒体查询中使用它们，因为事情需要根据屏幕大小来移动。

【讨论】：