时间戳

首页 > 解决方案 > 使页面适合移动设备时出现问题

html - 使页面适合移动设备时出现问题

问题描述

我已经完成了一个简单的 hmtl 站点，并希望它能够响应移动设备，但我无法尝试媒体代码，但仍然无法正常工作，不知道该怎么办

你能帮我 这是从手机上看的样子 ，这是我的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%;
  }
  
}

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

标签： htmlresponsive

解决方案

不要试图让它只响应移动设备，而是考虑你的应用程序应该响应任何屏幕尺寸。

在上面的 css 代码中，“响应式”的唯一规则是width: 60%其他所有内容几乎都是静态的。

您的 HTML 树是如何构建的？.iinkor-box容器规则在哪里？更重要的是，你想要的效果是什么？

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

推荐阅读