CSS 레이아웃 정적 레이아웃, 적응형 레이아웃, 유동적 레이아웃, 반응형 레이아웃, 유연한 레이아웃

(추천 튜토리얼: CSS 동영상 튜토리얼)

Static Layout (Static Layout)

은 전통적인 웹 디자인이며, 웹 페이지의 모든 요소의 크기는 px 단위를 사용합니다.

1. 레이아웃 특성: 브라우저 크기에 관계없이 웹 페이지의 레이아웃은 항상 코드가 원래 작성되었을 때의 레이아웃에 따라 표시됩니다. 기존 PC 웹사이트는 모두 정적(고정 너비) 레이아웃, 즉 최소 너비가 설정되어 있습니다. 이 경우 너비가 이 너비보다 작으면 스크롤 막대가 나타납니다. 중앙에 배치되고 배경이 추가됩니다. 이런 디자인은 PC 쪽에서 흔히 볼 수 있습니다.

2. 디자인 방법:

• PC: 중앙 레이아웃, 모든 스타일에 절대 너비/높이(px) 사용, 레이아웃 디자인, 화면 너비와 높이 조정 시 가로 및 세로 스크롤 막대를 사용하여 콘텐츠 보기

• 모바일 기기: 추가적으로 모바일 웹사이트를 만들고, 별도의 레이아웃을 디자인하고, wap이나 m과 같은 다른 도메인 이름을 사용하세요.

모바일 개발에서 정적 레이아웃을 사용하는 두 가지 방법: (출처: 흐름 레이아웃과 반응형 웹 디자인의 차이점은 무엇입니까?)

(1) 뷰포트 메타 태그에서 width=320을 설정하고 각 페이지 요소도 사용합니다. px를 단위로 합니다. JS를 사용하여 레이블의 초기 크기를 동적으로 수정하면 페이지 크기가 비례적으로 조정되어 전체 화면을 채울 수 있습니다. (프론트엔드 개발 - 웹앱 변경 렘 참조)

(2) 뷰포트 메타 태그에 콘텐츠 "width=640, user-scalable=no"를 설정하고, 페이지의 각 요소도 px 단위를 사용하기 때문입니다. 640px가 휴대폰 너비 제한을 초과합니다. 브라우저는 자동으로 페이지를 전체 화면으로 축소합니다(자세한 내용은 "width=640, user-scalable=no" 내용을 참조한 다음 고정 크기 px 디자인을 수행하시겠습니까?) - 프런트엔드 개발)

• 장점: 이 레이아웃 방법은 디자이너와 CSS 작성자에게 가장 쉽고 호환성 문제가 없습니다.

• 단점: 분명히 사용자의 화면 크기에 따라 다르게 수행될 수 없습니다. 현재 대부분의 포털 웹사이트와 대부분의 기업 PC 프로모션 사이트는 이 레이아웃 방식을 채택하고 있습니다. 고정 픽셀 크기 웹 페이지는 고정 픽셀 크기 디스플레이를 일치시키는 가장 쉬운 방법이지만 이 방법은 향후 웹 제작 방법과 완전히 호환되지 않습니다. 알 수 없는 장치에 적응하려면 몇 가지 방법이 필요합니다.

Liquid Layout

Liquid Layout("Fluid"라고도 함)의 특징은 페이지 요소의 너비가 화면 해상도에 따라 조정된다는 것입니다. 전체 레이아웃은 변경되지 않습니다. 울타리 시스템(그리드 시스템)을 나타냅니다. 웹 페이지의 주요 분할 영역에 백분율을 사용합니다(최소*, 최대* 속성과 함께 사용). 예를 들어 웹 너비를 설정합니다. 페이지 본문을 80%로 설정하고, 최소 너비는 960px입니다. (너비: 100%, 최대 너비는 일반적으로 늘어나거나 왜곡되는 것을 방지하기 위해 그림 자체의 크기로 설정됩니다.)

1. 레이아웃 기능: 화면 해상도 변경 시 페이지 요소의 크기는 변경되지만 레이아웃은 변경되지 않습니다. [화면이 너무 크거나 작을 경우 요소가 제대로 표시되지 않습니다.]

2. 디자인 방법: %를 사용하여 너비와 높이를 정의하고 px를 사용하여 고정하며, 이는 뷰포트 및 상위 요소의 실시간 크기에 따라 조정되어 다양한 해상도에 최대한 적응할 수 있도록 자주 사용됩니다. 너무 크거나 너무 작아서 읽기에 영향을 주지 않도록 크기 흐름 범위를 제어하기 위해 max-width/min-width와 같은 속성을 사용합니다.

이 레이아웃 방법은 초기 역사에서 다양한 크기의 PC 화면에 대처하는 데 사용되었습니다. 웹 프론트엔드 개발(당시에는 화면 크기의 차이가 그리 크지 않았음)은 오늘날의 모바일 개발에서도 일반적으로 사용되지만 단점은 분명합니다. 주요 문제는 화면 크기 범위가 다음과 같습니다. 너무 크면 원래 디자인에 비해 너무 작거나 너무 큰 화면에서는 제대로 표시되지 않습니다. 왜냐하면 너비는 %로 정의되지만 높이와 텍스트 크기는 대부분 px로 고정되기 때문입니다. 대형 화면 휴대폰의 디스플레이 효과는 일부 페이지 요소의 너비가 매우 길게 늘어나지만 높이와 텍스트 크기는 여전히 이전과 동일합니다(즉, 이러한 요소는 "흐르게" 될 수 없습니다.") , 디스플레이가 매우 일관성이 없습니다.

적응형 레이아웃(Adaptive Layout)

적응형 레이아웃의 특징은 다양한 화면 해상도에 대한 레이아웃을 정의하는 것입니다. 즉, 여러 정적 레이아웃을 만드는 것입니다. 각 정적 레이아웃은 화면 해상도 범위에 해당합니다. 화면 해상도를 변경하면 다른 정적 부분(페이지 요소의 위치 변경)이 전환될 수 있지만 각 정적 레이아웃에서는 창 크기가 조정되어도 페이지 요소가 변경되지 않습니다. 적응형 레이아웃은 일련의 정적 레이아웃으로 생각할 수 있습니다. 1. 레이아웃 기능: 화면 해상도가 변경되면 페이지 내 요소의 위치는 변경되지만 크기는 변경되지 않습니다.

2. 디자인 방법: @media 미디어 쿼리를 사용하여 다양한 크기와 미디어의 장치에 대해 다양한 스타일을 전환합니다. 우수한 응답 범위 설계로 적응 범위 내의 장치에 최상의 경험을 제공할 수 있으며 레이아웃은 실제로 동일한 장치에 고정되어 있습니다.

반응형 레이아웃

CSS3의 미디어 쿼리 기술이 등장하면서 반응형 디자인이라는 개념이 등장했습니다. 반응형 디자인의 목표는 페이지가 모든 단말기(다양한 크기의 PC, 휴대폰, 시계, 냉장고 웹 브라우저 등)에서 만족스러운 결과를 표시할 수 있도록 하는 것입니다. CSS 작성자의 경우 구현이 특정 기술에 국한되지 않고, 하지만 일반적으로 유동 레이아웃과 유연한 레이아웃을 결합한 다음 미디어 쿼리 기술을 사용합니다. ——다양한 화면 해상도에 대한 레이아웃을 각각 정의하고 동시에 각 레이아웃에서 유동 레이아웃 개념을 적용합니다. 즉, 페이지 요소의 너비는 창이 조정됨에 따라 자동으로 조정됩니다. 즉, 각각 다양한 화면 해상도에 해당하는 여러 유동 레이아웃을 만듭니다. 반응형 레이아웃은 유동적 레이아웃과 적응형 레이아웃 디자인 개념의 융합으로 볼 수 있습니다.

반응성은 우수한 페이지 레이아웃의 표준이 되었습니다.

1. 레이아웃 기능: 각 화면 해상도에 따라 레이아웃 스타일이 있습니다. 즉, 요소의 위치와 크기가 변경됩니다.

2. 디자인 방법: 미디어 쿼리 + 흐름 레이아웃. 보통 @미디어 미디어 쿼리와 그리드 시스템은 레이아웃을 위한 상대 레이아웃 단위와 결합하여 사용됩니다. 실제로는 위의 응답성, 유동성 등의 기술을 결합하여 서로 다른 스타일을 하나의 웹 페이지에 반환하는 기술의 총칭입니다. CSS를 통해 다양한 장치.

• 장점: PC 및 모바일 단말에 적용, 충분히 인내심을 가지면 효과는 완벽합니다

• 단점: (1) 미디어 쿼리가 제한적입니다. 주류 너비와 높이. (2) 충분한 화면 크기를 맞추려면 작업량이 적지 않으며 디자인에도 여러 버전이 필요합니다.

반응형 페이지는 헤더에 다음 코드를 추가합니다:

<meta name="applicable-device" content="pc,mobile">
<meta http-equiv="Cache-Control" content="no-transform ">

요약:

반응형과 적응형의 원칙은 둘 다 장치를 감지하고 장치에 따라 다른 CSS를 사용합니다. 고정 너비 대신 백분율을 사용합니다. 차이점은 반응형 템플릿이 기기에 따라 다르게 보이고 표시 스타일이 변경되는 반면 적응형 템플릿은 그렇지 않다는 것입니다. 사진이 작아졌습니다. 장치에 따라 다른 표시 스타일이 사용되지 않습니다. 흐름 스타일은 너비가 다음보다 크거나 작을 때 표시하는 방법과 표시 방법은 다음과 같습니다. 물의 흐름과 동일하게 부분적으로 하중을 가하고, 정적은 고정된 폭을 사용합니다.

플로잉 레이아웃은 서로 다른 해상도를 갖는 유사한 장치 간의 호환성을 해결하는 데 사용됩니다(일반적으로 해상도 차이가 적음). 반응형 레이아웃은 서로 다른 해상도를 갖는 서로 다른 장치 간의 호환성 문제를 해결하는 데 사용됩니다(일반적으로 PC 간의 큰 해상도 차이를 나타냄). , 태블릿, 휴대폰 및 기타 장치).

반응형 레이아웃 구현 방법: 반응형 레이아웃 디자인을 바꾸면 웹 페이지의 반응형 레이아웃이 나타납니다

유연한 레이아웃(rem/em 레이아웃)

참고: 플로우 레이아웃과 반응형 웹의 차이점은 무엇인가요? 설계? ?

1. rem과 em의 차이점: rem과 em은 다양한 웹페이지 글꼴 크기 표시에 맞게 제작됩니다. 그중 em은 상위 요소에 상대적이므로 실제 적용 시 많은 불편을 초래하며, rem은 항상 페이지의 루트 요소인 html의 크기에 상대적입니다.

2. 상대 레이아웃에는 em 또는 rem 단위를 사용합니다. 이는 %에 비해 더 유연하고 브라우저 글꼴 크기 조정 및 크기 조정의 일반적인 표시를 지원할 수 있습니다. em은 상대 상위 요소이므로 승격되지 않습니다. [중국 웹사이트에서는 웹페이지를 만들 때 모든 사람이 동일한 효과를 볼 수 있도록 CSS를 사용하여 글꼴 크기를 강제로 정의하는 데 익숙합니다. NetEase 및 Sohu와 같은 포털을 포함한 대부분의 사이트에서는 절대 단위인 px(픽셀)를 사용합니다. 그러나 웹 사이트의 유용성을 고려하면 글꼴 크기는 가변적이어야 합니다. 시력이 좋지 않은 일부 사용자는 페이지 내용을 명확하게 보려면 글꼴을 확대해야 합니다. 하지만 브라우저 시장의 대부분을 점유하고 있는 IE는 px를 단위로 하는 글꼴 크기를 조정할 수 없습니다. 외국 사람들은 웹사이트의 사용 편의성을 매우 중요하게 생각하며 이미 상당수의 외국 웹사이트에서 글꼴 단위로 em을 사용하고 있습니다. 】

3 이러한 유형의 레이아웃의 특징은 텍스트를 감싸는 각 요소의 크기가 em/rem 단위인 반면 페이지의 주요 분할 영역의 크기는 여전히 백분율 또는 px 단위입니다(동일). "유동 레이아웃" 또는 "정적/고정 레이아웃"). 초기 브라우저는 전체 페이지의 비례적인 크기 조정을 지원하지 않으며, 이 경우 웹 페이지 내의 텍스트 크기 확대만 지원합니다. em/rem을 단위로 사용하면 텍스트를 감싸는 요소의 크기가 텍스트 크기에 맞춰 조정됩니다.

4、浏览器的默认字体高度一般为16px，即1em:16px，但是 1:16 的比例不方便计算，为了使单位em/rem更直观，CSS编写者常常将页面跟节点字体设为62.5%，比如选择用rem控制字体时，先需要设置根节点html的字体大小，因为浏览器默认字体大小16px*62.5%=10px。这样1rem便是10px，方便了计算。

Set body font-size to 62.5% for Easier em Conversion:

If you would like to use relative units (em) for your font sizes, declaring 62.5% for the font-size property of the body will make it easier to convert px to em. By doing it this way, converting to em is a matter of dividing the px value by 10 (e.g. 24px = 2.4em).

那么为什么一般多是 html{font-size:62.5%;} 而不是 html{font-size:10px;}呢？

因为有些浏览器默认的不是16px，或者用户修改了浏览器默认的字体大小（因浏览器分辨率大小，视力，习惯等因素）。如果我们将其设置为10px，一定会影响在这些浏览器上的效果，所以最好用绝大多数用户默认的16作为基数 * 62.5% 得到我们需要的10px。

html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}
body {font-size: 1.4rem;/*1.4 × 10px = 14px */}
h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/}

实际项目设置成 font-size: 62.5%可能会出现问题，因为chrome不支持小于12px的字体，计算小于12px的时候，会默认取12px去计算，导致chrome的em/rem计算不准确。

针对这个现象，可以尝试设置html字体为100px，body 修正为16px，这样 0.1rem 就是 10px，而body的字体仍然是默认大小，不影响未设置大小的元素的默认字体的大小。

5、用em/rem定义尺寸的另一个好处是更能适应缩进/以字体单位padding或margin／浏览器设置字体尺寸等情况（因为em/rem相对于字体大小，会同步改变）。例如：p{ text-indent: 2em; }

6、使用rem单位的弹性布局在移动端也很受欢迎。

工具ViewtoREM：PX转换到REM（自动预处理）

rem的定义：font size of the root element，rem是相对于根元素来设置字体大小的，这就意味着，我们只需要根据自己的需求在根元素确定一个参考值。

rem与em、px的区别：

• px：像素，比较精确的单位，但不好做响应式布局

• em：以父节点font-size大小为参考点，标准不统一，容易造成混乱

• REM支持的浏览器：Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和Opera11+。IE6-8无法支持。

对于不同尺寸的屏幕，可以统一假设屏幕宽度为640px后编写CSS（当然你也可以假定统一为320px）。此时，我们设定html元素的font-size为40px（同样，只是举例），然后各处（元素尺寸、文字大小）使用rem作为单位，随后搭配媒体查询或JS，根据屏幕的大小来动态控制html元素的font-size（特定屏幕尺寸下，html元素的font-size应当设置为何值，是使用这个方案时设计师和程序员需要反复考虑后确定的，以下试举一段相关的CSS媒体查询代码），即可自动改变所有用rem定义尺寸的元素的大小（且CSS编写者在脑中进行换算的计算过程比em简单得多）。

html {
    font-size : 20px;
}
@media only screen and (min-width: 401px){
    html {
        font-size: 25px !important;
    }
}
@media only screen and (min-width: 428px){
    html {
        font-size: 26.75px !important;
    }
}
@media only screen and (min-width: 481px){
    html {
        font-size: 30px !important; 
    }
}
@media only screen and (min-width: 569px){
    html {
        font-size: 35px !important; 
    }
}
@media only screen and (min-width: 641px){
    html {
        font-size: 40px !important; 
    }
}

其实在移动端使用所谓的弹性布局，是比较勉强的。移动端弹性布局流行起来的原因归根结底是rem单位对于（根据屏幕尺寸）调整页面的各元素的尺寸、文字大小时比较好用。其实，使用vw、vh等后起之秀的单位，可以实现完美的流式布局（高度和文字大小都可以变得“流式”），弹性布局就不再必要了。详细可参考：视区相关单位vw, vh…简介以及可实际应用场景

以下优缺点参考：响应式设计和REM布局的对比（有疑问）

• 优点：理想状态是所有屏幕的高宽比和最初的设计高宽比一样，或者相差不多，完美适应。

• 缺点：这种rem+js只不过是宽度自适应，高度没有做到自适应，一些对高度，或者元素间距要求比较高的设计，则这种布局没有太大的意义。如果只是宽度自适应，更推荐响应式设计。

响应式和弹性布局之间的对比：

响应式布局：改变浏览器宽度，“布局”会随之变化，不是一成不变的，例如导航栏在大屏幕下是横排，在小屏幕下是竖排，在超小屏幕下隐藏为菜单，也就是说如果有足够的耐心，在每一种屏幕下都应该有合理的布局，完美的效果。

rem布局：改变浏览器宽度，页面所有元素的高宽都等比例缩放，也就是大屏幕下导航是横的，小屏幕下还是横的只不过变小了。

结论：

1.如果只做pc端，那么静态布局（定宽度）是最好的选择；

2. 모바일 단말기에서 작업 중이고 디자인에 높이 및 요소 간격에 대한 요구 사항이 높지 않은 경우 CSS의 한 부분으로 글꼴 크기를 조정하는 유연한 레이아웃(rem+js)이 가장 좋습니다. js의 한 부분;

3. PC와 모바일이 호환되어야 하고 요구 사항이 매우 높기 때문에 반응형 레이아웃이 여전히 최선의 선택입니다. 디자인은 서로 다른 높이와 너비에 따라 서로 다른 디자인을 만든다는 것입니다. 반응형 스타일은 미디어 쿼리에 따라 다양한 레이아웃을 만듭니다.

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 소개를 방문하세요! !

위 내용은 CSS 레이아웃 정적 레이아웃, 적응형 레이아웃, 유동적 레이아웃, 반응형 레이아웃, 유연한 레이아웃의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!