如何使网站响应？ [英] How do I make a website responsive?

问题描述

我想知道如何使网站及其所有元素能够适应不同的屏幕尺寸：字体，图片等。

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 
}

并为每个屏幕大小做它？

and make it for each screen size? Is there an easier way?

推荐答案

自适应布局（响应式布局）由以下三个因素组成：

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 = result

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） / p>

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语句。我通常只使用三个媒体查询计算机屏幕，平板电脑和手机屏幕。由于灵活布局和灵活媒体可确保正确执行相对调整大小，

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：//开发人员。 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

这篇关于如何使网站响应？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！