【发布时间】：2020-12-17 15:05:56
【问题描述】：
它是一个带有徽标的简单 html 内容框。它在台式机上看起来不错，但在移动设备上却不行。它必须是响应式的。我添加了元视口，它看起来很奇怪。这是我的代码。我必须在此处更改以将这些框转换为响应式
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
max-width: 100%;
}
html,
body {
height: 100vh;
background-color: #fff;
font-family: 'Poppins', sans-serif;
display: flex;
justify-content: center;
align-items: center;
}
.card {
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 450px;
width: 300px;
border-radius: 25px;
background-color: #ffffff;
box-shadow: 2px 0 30px rgba(0, 0, 0, 0.3);
overflow: hidden;
}
.card:nth-child(1) {
margin-right: 40px;
}
.card:nth-child(2) {
margin-right: 40px;
}
.card:nth-child(3) {
margin-right: 40px;
}
body:hover .card {
filter: blur(15px);
transform: scale(0.9);
opacity: 0.5;
transition: 0.9s;
}
body .card:hover{
filter:blur(0);
transform: scale(1);
opacity: 1;
transition: 0.9s;
}
img{
position:absolute;
left:0;
top:0;
margin:20px 0px 0px 20px;
float: left;
}
p {
position: absolute;
left: 0;
bottom: 0;
margin: 0 20px 60px 20px;
font-size: 16px;
color: #ffffff;
mix-blend-mode: difference;
}
#circle {
height: 100%;
width: 100%;
border-radius: 50%;
background-color: #000000;
margin-top: 100px;
margin-bottom: -330px;
margin-left: 300px;
margin-right: 200px;
}
#triangle {
height: 100%;
width: 100%;
background-color: #000000;
border-radius: 20px;
transform: rotate(70deg);
margin-top: -430px;
margin-left: 200px;
}
.content a {
position: absolute;
right: 0;
bottom: 0;
margin: 20px;
cursor: pointer;
background-color: #000000;
color: #ffffff;
font-size: 14px;
padding:6px 15px;
border-radius: 30px;
box-shadow: 10px 0 50px rgba(0, 0, 0, 0.1);
}
<!DOCTYPE html>
<html>
<head>
<title>CSS Creative Product Card UI Design | E commerce Card Using Html5 & CSS3</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="card">
<div id="circle"></div>
<div class="img">
<img src="https://www.naijaloaded.com.ng/wp-content/uploads/2018/05/PNG-Image-225-%C3%97-225-pixels-1.png" alt="" width="100px" height="100px;">
</div>
<p style="text-align: justify;">
PrintAll is here to bring a new standard of quality and services for online commercial printing. It’s a fast growing online printing and creative firm with a proven track record of delivering the best solutions to our customers. We can offer the best pricing, integrated dealing, finer quality and service.</p>
<div class="content">
<a>More</a>
</div>
</div>
<div class="card">
<div id="circle"></div>
<div class="img">
<img src="https://www.naijaloaded.com.ng/wp-content/uploads/2018/05/PNG-Image-225-%C3%97-225-pixels-1.png" alt="" width="100px" height="100px;">
</div>
<p style="text-align: justify;">
PrintAll is here to bring a new standard of quality and services for online commercial printing. It’s a fast growing online printing and creative firm with a proven track record of delivering the best solutions to our customers. We can offer the best pricing, integrated dealing, finer quality and service.</p>
<div class="content">
<a>More</a>
</div>
</div>
<div class="card">
<div id="circle"></div>
<div class="img">
<img src="https://www.naijaloaded.com.ng/wp-content/uploads/2018/05/PNG-Image-225-%C3%97-225-pixels-1.png" alt="" width="100px" height="100px;">
</div>
<p style="text-align: justify;">
PrintAll is here to bring a new standard of quality and services for online commercial printing. It’s a fast growing online printing and creative firm with a proven track record of delivering the best solutions to our customers. We can offer the best pricing, integrated dealing, finer quality and service.</p>
<div class="content">
<a>More</a>
</div>
</div>
<div class="card">
<div id="circle"></div>
<div class="img">
<img src="https://www.naijaloaded.com.ng/wp-content/uploads/2018/05/PNG-Image-225-%C3%97-225-pixels-1.png" alt="" width="100px" height="100px;">
</div>
<p style="text-align: justify;">
PrintAll is here to bring a new standard of quality and services for online commercial printing. It’s a fast growing online printing and creative firm with a proven track record of delivering the best solutions to our customers. We can offer the best pricing, integrated dealing, finer quality and service.</p>
<div class="content">
<a>More</a>
</div>
</div>
</body>
</html>我必须在此处进行更改以将这些框转换为响应式。等待帮助...
【问题讨论】：
-
响应的第一部分是停止在任何地方使用固定的像素大小。使用百分比宽度或其他类似值。
标签： html css responsive-design