如何使网站响应？

Question

我想知道如何建立一个网站，并且所有元素都能响应不同的屏幕尺寸：字体，图像等......

我是否必须做这样的事情：

@media only screen 
and (max-width : 320px)
{  
    //here put the width and height of all the elements in the site 
}

并为每个屏幕尺寸制作？有更简单的方法吗？

Answer 1

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

<强> 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.Flexible Media：

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

示例：

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

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

第3。媒体查询：

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

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

Answer 2

我知道有两种选择。

1. 使用Adobe Reflow，这正是您所拥有的，但软件会为您编写，您只需单击并拖动元素，这样您就可以更快地获得相同的结果。
2. 绝对拥有一切百分比，大小，边距，边界，一切。这样你就不必一遍又一遍地重写代码，“一刀切”选项。

Answer 3

查看Bootstrap，更具体地说是Grid System。它可以帮助你使用不同屏幕尺寸的CSS。

Answer 4

如果您不熟悉CSS自适应布局，请查看以下网站： -

a）Bootstrap
b）Foundation

在我看来Foundation，是一个很好的开始。它有一个关于网格的非常漂亮的文档。请检查出来