Question

我是网页设计的初学者，我使用html和css开发了一个页面。我想转换我的静态页面响应，以便每当我重新调整浏览器大小时，我的页面样式根据窗口大小保持相同。下面是我的身体宽度和身高。

body{
    width:100%;
    height:100%;
    margin:0%;
    background-color:white;
}

现在每当我尝试重新调整浏览器窗口大小时，我的页面样式就不会保持相同。虚拟对象会相互折叠。

请给我一些简单的提示来转换我的页面响应。

Answer 1

响应能力不仅取决于＆＃34;身体＆＃34;标签。每个css div都需要与您的响应能力相匹配。更好地使用@media查询来表示反对意见。

Answer 2

自适应布局（响应式布局）包含以下三个因素：

<强> 1。灵活的布局：

用于创建网页布局的div需要包含相对长度单位。这意味着你不应该在CSS中使用固定宽度，而应使用百分比。

将尺寸从设计转换为百分比的公式为 （目标/背景）x100 =结果

enter image description here

让我们将上面的图片作为设计的一个例子。要计算左边div的大小将如下计算： （300px / 960px）x100 = 30.25％

CSS看起来像这样：

.leftDiv
{
    width: 30.25%;
    float: left;
}

.rightDiv
{
    width: 65%;
    float: left;
}

要自动调整大小的文本，您可以使用名为VW（ViewWidth）的单位

.myText
{
    font-size: 1vw;
}

这可确保文本相对于视图宽度自动调整大小。

2.Flexible Media：

灵活媒体适用于相对于其父级自动调整大小的图像，视频和画布。

示例：

img, video, canvass
{
    max-width: 100%;
}

这可确保这些元素在其父级内自动调整大小。

第3。媒体查询：

下一步是使用您在问题中所做的媒体查询，这些媒体查询为某些屏幕尺寸定义某些CSS语句。我通常只对计算机屏幕，平板电脑和手机屏幕使用三种媒体查询。没有必要超过这个，因为灵活布局和灵活媒体将确保正确完成相对大小调整。

您可能会发现这有用：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

来源：Here

Answer 3

如果您是新的响应式网站，请使用Bootstrap

http://getbootstrap.com/

Answer 4

  body {
            background-color: lightpink;
         }
         @media screen and (max-width: 420px) {
            body {
               background-color: lightblue;
            }
         }

  <body>
      <p>If screen size is less than 420px, then it will show lightblue color, or else it will show   light pink color</p>
   </body>

使静态页面响应

4 个答案: