如何使网站响应？

Question

我想知道如何使一个网站，它的所有元素响应，以适应不同的屏幕尺寸：字体，图像等..

做我必须做的有些事情是这样的：

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

并为每个屏幕大小？有更容易的方法吗？

Answer 1

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

1.灵活的布局：

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

到尺寸从设计到百分比转换的公式为（目标/上下文）×100 =导致

让我们上面的图片作为设计的一个例子。要计算什么的div左边的大小将是这样计算的： （300像素/ 960像素）×100 = 30.25％

的CSS会是这个样子：

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

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

对于文本自动调整可以使用

.myText 
{ 
    font-size: 1vw; 
} 

称为VW（ViewWidth）单元这确保了文本自动调整相对于视图宽度。

2.Flexible媒体：

灵活的介质适用于图像，视频和画布可以自动调整相对于其父。

实施例：

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。它应该可以帮助你使用不同的屏幕尺寸。

Answer 4

柜面如果你是新的CSS自适应布局请你看看下面的网站： -

一）Bootstrap
B）Foundation

在我看来Foundation，是一个伟大的地方开始。它有一个关于grid的非常漂亮的文档。请检查一下