0

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

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

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

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

4

4 回答 4

1 

  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>

于 2016-09-18T16:09:07.203 回答
0

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

http://getbootstrap.com/

于 2016-03-30T14:30:04.457 回答
0

响应能力不仅取决于“body”标签。每个 css div 都需要与您的响应能力相匹配。更好地使用@media 查询来实现响应能力。

于 2016-03-24T05:19:02.863 回答
0

自适应布局（Responsive layouts）由以下三个因素组成：

1. 灵活的布局：

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

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

在此处输入图像描述

让我们以上面的图片作为设计示例。要计算左侧 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.灵活的媒体：

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

例子：

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

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

3.媒体查询：

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

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

来源：这里

于 2016-03-24T06:29:03.707 回答