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

<分区>

想改进这个问题吗？ 更新问题，使其只关注一个问题 editing this post .

关闭 5 年前。

此帖1年前编辑提交审核未能重开帖子:

原始关闭原因未解决

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

我做过这样的事情:

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

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

是否可以通过其他方式使其针对每种屏幕尺寸动态显示？有没有更简单的方法？

最佳答案

自适应布局(Responsive layouts)由以下三个因素组成:

<强>1。灵活的布局:

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

将尺寸从设计转换为百分比的公式是(target/context)x100 = result

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;
}

这确保文本会根据 View 宽度自动调整大小。

2.柔性媒体:

柔性媒体适用于相对于其父级自动调整大小的图像、视频和 Canvas 。

例子:

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

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

<强>3。媒体查询:

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

关于html - 如果我不提及目标分辨率，除了 @media 之外还有什么其他方法可以使网站做出适当的响应？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20210223/

相关文章：

html - 特定选项卡的 CSS 背景色