Question

我从我的一位朋友那里听说过响应式css设计的优点，他说我们不必为不同的分辨率创建网站，我们可以创建一个单独的css会发挥作用，这对我来说很有意思所以今天我在互联网上搜索响应式设计，并且发现了一篇展示演示的文章，但它说我们必须为我们想要的解决方案提供@media网站支持，我尝试了我的示例页面中的那个，我提供了@media query for (max-width:980px)它的工作正常在我的手机上但不在我的笔记本电脑上。

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

Answer 1

做出响应式设计的最佳方式是首先设计智能手机（首先称为移动设备）。然后，例如，对于平板电脑（大约600px）进行媒体查询，然后对桌面进行媒体查询（大约960px）。

以下是如何对标题使用媒体查询的一个非常基本的示例。

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 */
    }
}

但是，除此之外还有更多内容。您的设计本质上应该是流畅的，以便它可以适应任何屏幕大小，使用媒体查询在必要时进行跳转。这有助于防止对每个设备大小进行媒体查询（并且看起来不太漂亮）。

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

<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

在设计中使用响应或自适应css

1 个答案: