我正在尝试使我的网页具有响应性。有没有简单的方法可以做到这一点？
我已经尝试了多种方法，但我能做的最好的事情就是缩小顶部的 Logo ，而不是缩小我用于导航的包含图像的列表。
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>最佳答案
这是一个开放式问题，有多种方法可以根据个人选择进行
选项 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 找到有关其用法的更多信息。
关于html - 缩小整个 HTML 页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52846983/