-1

我从我的一位朋友那里听说了响应式 css 设计，他说它的优点是我们不必为不同的分辨率创建网站，我们只需创建一个 css 就可以了，这对我来说听起来很有趣所以今天我在互联网上搜索响应式设计，发现了一篇展示演示的文章，但它说我们必须提供@media我们希望我们的网站支持的分辨率，我尝试了我的示例页面中的那个，我提供了它在我的手机上@media query for (max-width:980px)运行良好，但在我的笔记本电脑上却不行。

谁能告诉我如何调整我的@media query，以便我的单曲可以在所有可用的分辨率下工作，因为通过上述方式，我必须编写相同 css 的不同版本才能在多个浏览器中生效。

4

1 回答 1

1

进行响应式设计的最佳方法是先设计智能手机（称为移动优先）。然后例如，对于平板电脑（大约 600 像素）进行媒体查询，然后对台式机（大约 960 像素）进行媒体查询。

这是一个非常基本的示例，说明如何将媒体查询用于标题。

h1 {
font-size: 12px; /* This is basic, great for smartphones */
}

@media screen and (min-width: 600px) {
    h1 {
    font-size: 16px; /* A little bigger for tablets */
    }
}

@media screen and (min-width: 960px) {
    h1 {
    font-size: 21px; /* A little bigger for desktops */
    }
}

然而，它不仅如此。您的设计本质上应该是流动的，以便它可以适应任何屏幕尺寸，并在必要时使用媒体查询进行跳转。这有助于避免对每个设备尺寸进行媒体查询（并且看起来不太漂亮）。

对于创建列等，您最初不会创建一个，但在更高的屏幕尺寸（例如 600 像素）上，您会将块元素切换为内联块元素。我实际上更喜欢浮动，而不是使用内联块。这是一个非常基本的示例：

<div class="left">Content</div>
<div class="right">Sidebar</div>

.content, .sidebar {
    width: 100%; /* We don't want to have 2 columns on a small screen * /
}

@media screen and (min-width: 600px) {
    .content {
    float: left; /* Now on bigger screens, we can align it into columns */
    width: 80%; / *set the with on your content */
    }
    .sidebar {
    float: left; /* Now on bigger screens, we can align it into columns */
    width: 20%; /* set the width of the sidebar */
    }
}

有时，不必要的徽标在桌面上看起来很棒，但您不需要它，它会破坏小屏幕上的布局。你用display: none. 这是一个非常基本的例子：

. unnecessary-logo {
    display: none; /* We want to hide it on small screens */
}
@media screen and (min-width: 600px) {
    . unnecessary-logo {
    display: block; /* We want to show it on bigger screens */
    }
}

响应式设计还有更多的方法，但希望我回答了你的问题，这些信息足以让你开始。

看看这个视频：http ://www.youtube.com/watch?v=-BVmrSG93XE

于 2013-05-11T19:12:25.830 回答