如果我不提及目标分辨率，除了 @media 之外还有什么其他方法可以使网站做出适当的响应？ [关闭]

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

我做了这样的事情：

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

我必须为每一个指定目标分辨率。能否有一个适用于所有分辨率的通用设置？

是否有其他方法可以使其针对每种屏幕尺寸变得动态？有更容易的方法吗？

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

1. 灵活的布局：

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

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

让我们以上面的图片作为设计示例。要计算左侧 div 的大小，将按如下方式计算：(300 像素/960 像素)x100 = 30.25%

CSS 看起来像这样：

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

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

对于自动调整文本大小，您可以使用称为 VW (ViewWidth) 的单位

.myText
{
    font-size: 1vw;
}

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

2.灵活的媒体：

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

Example:

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

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

3.媒体查询：

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

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