【发布时间】：2022-01-05 10:47:48
【问题描述】：
就目前而言，我目前正在尝试使我的整个内容具有响应性，我已经设法使用不同的@media 分辨率使背景具有响应性，这得到了我想要的结果，但是，我注意到我的图像在前景没有随它缩放，我所做的就是让它与所有东西一起缩放，将一个图像放在它自己的@media 中，但我想知道这是否是正确的方法，否则我的 CSS 文件将有一个从移动设备到 1080p 屏幕分辨率的一堆 @media，我使用的是 Bootstrap 5.1。
请看我的代码：
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sheldon's Online Portfolio</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">>
<link href="mystyle.css" rel="stylesheet">
</head>
<body>
<div class = "navbar navbar-default navbar-fixed-top">
</nav>
</div>
<div class = "container">
<div class = "profile-pic">
<img src= "Images used/Profile Pic.png" class="img-thumbnail" alt = "No Image"/>
</div>
<img src= "Images used/photo-1542831371-29b0f74f9713.jpeg" class="img-fluid" alt = "No Image"/>
</div>
</div>
<div class = "container-sm">
<h1>About</h1>
<div class = "container-sm-t">
<p>I am Sheldon Aldridge and I am a Front-End Web
Developer. Technology has always been a passion of mine.
In 2014 I earned my diploma in 3D animation and this involved
using technology platforms to create and design characters, assets,
and environments, I loved experimenting with colours and creating
something from my imagination.<br />
<br />
I discovered web design and web development in 2020, I went through
a web design course through Shaw Academy, Front-End Web development course
through Udemy and a UX/UI design course through UCT.
</p>
</div>
</body>
</html>
CSS
body
{
margin:auto;
}
.navbar
{
background-color: #2A3956;
box-shadow: inset 0.5px 0.5px 5px 0.5px #02d3f6;
border: 1px solid #02d3f6;
}
.navbar-default
{
border:0;
}
.container
{
padding:0px;
}
.img-fluid
{
border: 1px solid #02d3f6;
width: 100%;
height: auto;
}
.container-sm
{
background-color: #2A3956;
box-shadow: inset 0.5px 0.5px 5px 0.5px #02d3f6;
border: 1px solid #02d3f6;
min-height: 340px;
}
.profile-pic
{
position: absolute;
margin-left: 32%;
margin-top: 50%;
margin-right: auto;
margin-bottom: auto;
}
.img-thumbnail
{
border: 1px solid #02d3f6;
max-width: 50%;
border-radius: 100px;
}
.container-sm h1
{
color:#07DD45;
margin-top: 20%;
font-size:20px;
margin-left: 41%;
}
.container-sm-t p
{
color:#07DD45;
font-size:14px;
padding-left: 10px;
min-width:10px
}
.container-md
{
background-color: #2A3956;
box-shadow: inset 0.5px 0.5px 5px 0.5px #02d3f6;
border: 1px solid #02d3f6;
}
.container-md h1
{
color:#07DD45;
margin-top: 3%;
font-size:20px;
margin-left: 41%;
}
.container-md-grid
{
column-rule-color:#02d3f6;
display: table;
}
.row
{
column-count: 5;
margin-right:-4px;
margin-left: 3px;
}
.column
{
background-color: #02d3f6;
max-width: 60px;
max-height: 137px;
}
.column p
{
transform: rotate(300deg);
margin-top: 0px;
margin-left: -2px;
}
@media (min-width: 576px)
{
.container, .container-sm
{
max-width: 100%;
}
}
@media (min-width: 576px)
{
.profile-pic
{
position: absolute;
margin-left: 35%;
margin-top: 53%;
margin-right: auto;
margin-bottom: auto;
}
}
@media (min-width: 768px)
{
.container, .container-md, .container-sm
{
max-width: 100%;
}
}
@media (min-width: 768px)
{
.profile-pic
{
position: absolute;
margin-left: 44%;
margin-top: 59%;
margin-right: auto;
margin-bottom: auto;
}
}
@media (min-width: 992px)
{
.container, .container-lg, .container-md, .container-sm
{
max-width: 100%;
}
}
@media (min-width: 992px)
{
.profile-pic
{
position: absolute;
margin-left: 44%;
margin-top: 59%;
margin-right: auto;
margin-bottom: auto;
}
}
@media (min-width: 1200px)
{
.container, .container-lg, .container-md, .container-sm,.container-xl,
{
max-width: 100%;
}
}
@media (min-width: 1200px)
{
.profile-pic
{
position: absolute;
margin-left: 44%;
margin-top: 59%;
margin-right: auto;
margin-bottom: auto;
}
}
@media (min-width: 1400px)
{
.container, .container-lg, .container-md, .container-sm,.container-xl, .container-xxl
{
max-width: 100%;
}
}
@media (min-width: 1400px)
{
.profile-pic
{
position: absolute;
margin-left: 44%;
margin-top: 59%;
margin-right: auto;
margin-bottom: auto;
}
}
@media (min-width: 1080px)
{
.container, .container-lg, .container-md, .container-sm, .container-xxl
{
max-width: 100%;
}
}
@media (min-width: 1080px)
{
.profile-pic
{
position: absolute;
margin-left: 44%;
margin-top: 59%;
margin-right: auto;
margin-bottom: auto;
}
}
有没有办法让所有内容都在一个@media 下，或者我必须走很长的路才能实现我想要的，让所有内容都响应？
这是我一直在参考的引导 5.1 文档 - https://getbootstrap.com/docs/5.1/layout/containers/ https://www.w3schools.com/bootstrap5/bootstrap_containers.php
【问题讨论】：
标签： html css responsive-design bootstrap-5