javascript - 网页设计的流动性

Question

<分区>

Answer 1

大方向:

您想查看 media queries制作您的设计responsive到不同的观看媒体。您将需要考虑其他元标记，例如定义视口(viewport)大小的元标记，但通常您可以使用 CSS 完成这一切。

以下示例查询可以为每种设备尺寸包装您的自定义 CSS 规则:

    /* Smaller than standard 960 (devices and browsers) */
    @media only screen and (max-width: 959px) {}

    /* Tablet Portrait size to standard 960 (devices and browsers) */
    @media only screen and (min-width: 768px) and (max-width: 959px) {}

    /* All Mobile Sizes (devices and browser) */
    @media only screen and (max-width: 767px) {}

    /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
    @media only screen and (min-width: 480px) and (max-width: 767px) {}

    /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
    @media only screen and (max-width: 479px) {}

显然，您需要根据需要填写 CSS 规则，以确保您的内容不会被压缩。

一个好的策略是针对小型移动应用程序进行设计，然后从那里做大。这样你就不会发现自己试图补习。也。很多。进入一个小界面。

一般来说你也可以使用float:left;主要布局 block 的属性(而不是绝对定位等)这样，当父元素太窄而无法并排放置时，侧边栏等将 float 在主要内容的上方/下方。

另外，是的。您可以使用百分比等来流畅地填充区域。使用 background-属性而不是 <img>标签。希望对您有所帮助。