我对响应式网页设计缺少什么？

Question

我对“响应式网页设计”的概念是：

• 设计一个可以很好地与任何宽度的显示器或媒体屏幕一起伸展的网页布局。
• 设计一个网页布局，也可以与任何宽度的显示器或媒体屏幕一起挤压。
• 设计一个在任何设备上都能很好查看的网页布局。
• 使用百分比 (%) 而不是像素 (px) 设计布局。

在我拥有一些常见概念之后，现在at this point，我很困惑：

• 设计任何内容作为您的布局，滚动鼠标滚轮查看在不同媒体屏幕宽度中拉伸或挤压时的外观。只需设计任何东西，然后为不同的媒体屏幕/设备宽度做 CSS。为此，只需使用 @media screen and (max-width: 800px) { /* do Media CSS here; */ }，并为布局的任何元素添加 NEW CSS。
  ^{（所以，当你有能力做任何事情时 使用媒体查询，轻松设计。完成电脑显示器的设计后，将重点放在设备或媒体小屏幕上并使用 CSS）}
  假设在style.css 中我指定了header .somediv{ width: 100%; } 的宽度，在320px 中我可以指定任何我喜欢的宽度为@media screen and (max-width: 800px) { header .somediv{ width: 50%; } }。
• 当某些东西从布局中弹出时，只需清除浮动并将该东西放入堆栈中主容器之前或之后。
• 对带有img{ max-width: 100%; } 的图像执行响应式CSS。

现在为了我在响应式世界中的满足和进步，我希望你批评我 - 如果我像上面那样思考响应式 CSS，我有什么问题？

或者，我对这个概念完全没问题，那么为什么my site 会在 320 像素中出现而不是在 800 像素上，而且我不能单独为 320 像素应用不同的 CSS。为什么I have to specify header height in 800px只适用于320px？

Answer 1

所以看起来你做的一切都是正确的，我可以看到你的网站有问题，但只能说 640px 但320px 对我来说看起来不错。

当我第一次开始响应式设计时，我发现了这个网站：http://css-tricks.com/

我打开了他们的 CSS 样式表并对其进行了研究，并了解了他们是如何做到的。

为了参考，我建议查看以下链接以了解如何进行响应式设计：

• Simple Responsive Images with CSS backgrounds - SmashingMagazine Mobile
• Beginner's Guide to Responsive Web Design - TeamTreeHouse.com 博客
• Responsive Web Design - Learn.ShayHowe.com
• Build Basic Responsive Site CSS - NetMagazine.com

关于获取媒体查询，我强烈建议您看这里：

• Media Queries for Standard Devices

我认识的一些人仍然使用 php 脚本来确定用户的屏幕分辨率，然后加载特定的 CSS 样式表，我个人不建议这样做，但这也是一种选择。

我个人会尝试更改您的 CSS 以包含以下内容：

    @media only screen 
    and (max-width : 320px) {

        #div1 {

            width:100%;

        }
    }

我设法让它工作的唯一方法是为该特定媒体屏幕重新复制我的整个 CSS，或者只指定要更改的某些 div。

请记住，您可以在样式表的下方重新声明 DIV 或 CLASS 的 CSS 样式

希望对您有所帮助。