1

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

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

在我拥有一些概念的共同概念之后，现在，我很困惑：

  • 设计任何内容作为您的布局，滚动鼠标滚轮查看在不同媒体屏幕宽度中拉伸或挤压时的外观。只需设计任何东西，然后为不同的媒体屏幕/设备宽度做 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，我有什么问题？

或者，我对这个概念完全没问题，那么为什么我的网站在 320px 上而不是在 800px 上，而且我不能单独为 320px 应用不同的 CSS。为什么我必须在 800px中指定仅适用于 320px 的标题高度？

4

1 回答 1

2

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

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

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

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

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

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

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

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

        #div1 {

            width:100%;

        }
    }

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

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

希望这可以对你有所帮助。

于 2013-09-15T08:03:41.107 回答