在为移动设备适配页面时出现问题

Question

我做了一个简单的html网站，想让它响应移动，但我不能我尝试了一个媒体代码，但仍然不工作，不知道该怎么做

你能帮我吗这是它在移动设备上的样子和这是我的css

body{
margin: 0px;
display: inline;
align-self: center;
}
h1 {
font-family: cairo-bold;
text-align: center;
color: #697683;
}
h2 {
font-family: sky-bold;
text-align: center;
color: #1ba690;
}
.iinkor-box {
background-color: #f8f8f8;
height: 180px;
width: 180px;
display: inline-block;
margin-bottom: 15px;
margin-right: 8px;
margin-left: 8px;
}
.iinkor-box img {
width : 138px;
height: 108px;
display: inline-block;
padding: 10px;
}
.iinkor-box a {
color : #41978f;
font-size: 16px;
font-family: bein;
display: inline-block;
}
.iinkor-box img:hover {
opacity: 80%;
}
a:active {text-decoration: none}
a:visited {text-decoration: none}
a:hover {text-decoration: none}
a:link {text-decoration: none}
.iinkor-button {
background-color:#07439b;
border-radius:28px;
border:1px solid #1978ab;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:sky-bold;
font-size:17px;
padding:11px 18px;
text-decoration:none;
text-shadow:0px 1px 0px #284666;
}
.iinkor-button:hover {
background-color:#2a71bd;
}
.iinkor-button:active {
position:relative;
top:1px;
}
@media only screen and (max-width:800px) {
/* For mobile phones: */
.iinkor-box  {
width:60%;
}

}

如果你编辑代码，请告诉我该怎么做，这样我就可以知道未来提前谢谢你

Answer 1

与其试图让它只响应手机，不如考虑你的应用程序应该响应任何屏幕尺寸。

在上面的css代码中，唯一的规则是" responve"是width: 60%，其他的都是静态的

你的HTML树是如何构造的?.iinkor-box集装箱规则在哪里?更重要的是，你想要的效果是什么?

考虑使用灵活模式。首先从移动端开始，然后逐步增强代码以实现桌面视图。