如果我不提及目标分辨率，除了 @media 之外，还有什么其他方法可以使网站做出适当的响应? [英] What can be other ways than @media to make a website responsive suitably if I don't mention target resolution?

问题描述

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

I want to know how to make a website, and all of its elements responsive to adapt to different screen sizes: fonts, images etc...

我做过这样的事情:

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

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

I have to specify target resolution for each one. Can there be a common setting that can apply to all resolution?

是否有其他方法可以使其针对每个屏幕尺寸动态化?有没有更简单的方法?

Can there be other ways to make it dynamic for each screen size? Is there an easier way?

推荐答案

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

Adaptive layouts (Responsive layouts) consists of the following three factors:

1.灵活的布局:

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

The divs you use to create your web page layouts need to consist of relative length units. This means you shouldn't use fixed widths in your CSS, rather use percentages.

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

The formula to convert sizes from a design to percentages is (target/context)x100 = result

让我们以上面的图片作为设计示例.要计算左侧 div 的大小，将像这样计算:(300px/960px)x100 = 30.25%

Lets take the picture above as an example of a design. To calculate what the size of the div on the left is going to be calculated like this: (300px/960px)x100 = 30.25%

CSS 看起来像这样:

The CSS would look something like this:

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

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

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

For text to automatically resize you can use a unit called VW (ViewWidth)

.myText
{
    font-size: 1vw;
}

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

This ensures that the text automatically resize relative to the view width.

2.灵活的媒体:

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

Flexible media applies to images, videos and canvasses which automatically resize relative to its parent.

示例:

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

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

This ensures that these elements resize automatically inside its parent.

3.媒体查询:

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

The next step is to use media queries like you've done in your question, these media queries define certain CSS statements for certain screen sizes. I normally use only three media queries for computers screens, tablets and phone screens. Its not necessary to have more than this because the Flexible Layouts and Flexible Media will ensure relative resizing if done correctly.

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

You may find this helpful: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

这篇关于如果我不提及目标分辨率，除了 @media 之外，还有什么其他方法可以使网站做出适当的响应?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！