[这是移动视图这是桌面视图[这是平板电脑视图]1 您好，我制作了HTML和CSS图标框阴影悬停效果。桌面的分辨率是完美的。但是平板电脑视图和移动设备视图不适合显示尺寸。这似乎是一个解决方案问题。你能帮我解决问题吗？ 在这里，我发送我的代码和图片。
.HTML
body {
margin: 0;
padding: 0;
outline: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
font-family: 'poppins', sans-serif;
}
.container {
display: inline-flex;
flex-wrap: wrap;
justify-content: space-between;
}
.container .box {
position: relative;
width: 300px;
flex-direction: row;
padding: 40px;
background: #fff;
margin: 20px;
transition: 0.4s;
}
.container .box .icon {
width: 120px;
top: -45px;
height: 120px;
position: relative;
color: #fff;
background: rgba(0, 0, 255);
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
border-radius: 50%;
font-size: 60px;
}
.icon:after {
content: '';
position: absolute;
width: 110%;
height: 110%;
box-shadow: 0 0 0 3px blue;
border-radius: 50%;
transform: scale(0.8);
opacity: 0;
transition: transform 0.2s, opacity 0.2s;
box-sizing: border-box;
}
.box:hover {
justify-content: center;
box-shadow: 0 20px 40px rgba(0, 0, 0, .1);
transform: translateY(-10px);
}
.box:hover .icon:after {
opacity: 1;
transform: scale(1);
}
.container .box .content h3 {
font-size: 20px;
margin: 10px 0;
padding: 0;
text-align: center;
}
.container .box .content p {
margin: 0;
padding: 0;
text-align: center;
}<!DOCTYPE html>enter image description here
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" type="text/css" href="http://cdn.onlinewebfonts.com/svg_info/l/31895/0/icon.css">
<link rel="stylesheet" type="text/css" href="css/intex.css">
<style>
</style>
</head>
<body>
<div class="container">
<div class="box">
<div class="icon i_tools"></div>
<div class="content">
<h3>Our vision</h3>
<p>Our firm continuously strives to be the Premier Accounting and Consultancy firm that provides excellent service to our clients and an excellent quality of life for our associates.
</p>
</div>
</div>
<div class="box">
<div class="icon i_bulb"></div>
<div class="content">
<h3>Our mission</h3>
<p>Our firm continuously strives to be the Premier Accounting and Consultancy firm that provides excellent service to our clients and an excellent quality of life for our associates.
</p>
</div>
</div>
<div class="box">
<div class="icon i_handshake"></div>
<div class="content">
<h3>Our value</h3>
<p>Our firm continuously strives to be the Premier Accounting and Consultancy firm that provides excellent service to our clients and an excellent quality of life for our associates.
</p>
</div>
</div>
</div>
</body>
</html>请尝试使用媒体查询，这对您来说很容易。
@media only screen and (max-device-width: 767px) {
/*your css code for mobile devices
}
@media only screen and (max-device-width: 1024px) {
/*your css code for Tablet devices
}
将此代码添加到您的 css 文件中，并为这些设备编写 css。
就像Sanjib说的那样使用媒体查询。当您像现在一样设置 html 样式时，您可以按照适合屏幕的方式设置其样式。幸运的是，大多数PC和笔记本电脑的尺寸几乎相同，这就是为什么它在台式机上看起来不错。
除了桑吉的回答：
@media only screen and (max-device-width: 767px) {
/*your css code for mobile devices
}
767px代表像素，事情开始变得不同。 这个767px可以更改为选择的数字。
如果要修复它，可以打开检查器模式，然后单击左侧左上角的移动平板电脑徽标。
当您这样做时，您可以看到一定的分辨率，只需单击它并按向下箭头并按住它就会以 1px 非常快的速度向下移动。 当事情开始发生变化时，这将是您替换为 767px 的数字。
请记住，如果要替换767px，请选择宽度，如果您选择高度，它将是。
@media only screen and (max-device-heigth: 767px) {
/*your css code for mobile devices
}