Question

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

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

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>

Answer 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

上找到有关其用法的更多信息。

Answer 2

正如Richard所说，一般媒体查询中的行业标准。即使使用CSS网格，您仍然可以创建模板并在媒体查询中使用模板，因为事情需要根据屏幕大小进行切换。

缩小整个HTML页面

2 个答案: