Question

我想知道在响应式设计中将元素从一个div移动到另一个div的最佳方法是什么？

我的页面中有当前设置：

        <div class="container">
         <div class="desktop"><h2>Hello I show on desktop</h2></div>
         <div class="mobile"><h2>Hello I show on mobile</h2></div>
        </div>

然后相关的CSS媒体查询显示移动或桌面版本并且它有效...但是它是正确的方式吗？

Answer 1

尝试设计移动设备页面。然后添加桌面所需的东西。尽可能分享，尽量不要在同一页面上复制内容。

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>TypeScript HTML App</title>
    <link rel="stylesheet" href="app.css" type="text/css" />
    <script src="/Scripts/tsUnit/tsUnit.js"></script>
    <script src="app.js"></script>
</head>
<body>
    <h1>TypeScript HTML App</h1>
    <h2>TS Unit Test</h2>
    <div id="content"></div>
</body>
</html>

你也可以尝试bootstrap http://getbootstrap.com - 它做了很多 - 包括动态调整图像和列的大小。这真的值得尝试 - 可能会为你节省大量的工作。

Answer 2

没有正确或错误的方式，但你做这件事的方式非常合适。

.desktop{
  display:block;
}
.mobile{
  display:none;
}

@media all and (max-width:400px){
  .desktop{
    display:none;
  }
  .mobile{
    display:block;
  }
}

我个人只使用一个div并使其响应。

.desktop{
  width:100%;
  font-size:1em;
}
@media all and (max-width:400px){
  .desktop{
    font-size: 0.7em;
  }
}

Answer 3

是，你做对了。对以下两个不同的类使用媒体查询。

＆＃13;

.mobile,
.desktop {
  display: block;
}
@media (max-width: 768px) {
  .desktop {
    display: none;
  }
}
@media (min-width: 768px) {
  .mobile {
    display: none;
  }
}

＆＃13;

<div class="container">
  <div class="desktop">
    <h2>Hello I show on desktop</h2>
  </div>
  <div class="mobile">
    <h2>Hello I show on mobile</h2>
  </div>
</div>

＆＃13;

CSS将元素从一个div移动到另一个div

3 个答案: