Question

我的概念＆＃34;响应式网页设计＆＃34;是：

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

将任何内容设计为您的布局，滚动鼠标滚轮，看看在不同媒体屏幕宽度下拉伸或挤压时的外观。只需设计任何东西，然后为不同的媒体屏幕/设备宽度做CSS。为此，只需使用@media screen and (max-width: 800px) { /* do Media CSS here; */ }，然后为您布局的任何元素添加新 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在320px时突破而在800px不突破，我不能仅为320px应用不同的CSS。为什么I have to specify header height in 800px仅适用于320px？

Answer 1

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

当我第一次启动自适应设计时，我找到了这个网站：http://css-tricks.com/

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

为了参考起见，我建议您查看以下有关如何进行响应式设计的链接：

关于获取媒体查询，我强烈建议您在此处查看：

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

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

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

        #div1 {

            width:100%;

        }
    }

我设法让这个工作的唯一方法是通过复制我的整个CSS再次为特定媒体屏幕或仅指定要更改的特定div。

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

希望这对你有所帮助。