CSS의 일반적인 적응형 레이아웃은 무엇입니까?

CSS의 일반적인 적응형 레이아웃은 다음과 같습니다. 왼쪽은 고정 너비, 오른쪽은 적응형, 양쪽은 고정 너비, 가운데는 적응형
#🎜🎜 #

오늘 소개해드릴 내용은 CSS 공통 적응형 레이아웃이 어떤 참고값을 가지고 있는지 모두에게 도움이 되었으면 좋겠습니다. 다음 글에서는 Adaptive Layout의 여러 가지 방법을 자세히 소개하겠습니다

[추천 강좌: CSS 강좌#🎜🎜 Adaptive 레이아웃: 적응형 레이아웃의 특징은 다양한 장치의 화면 크기에 적응하는 것입니다. 즉, 각 정적 레이아웃에서 페이지 요소는 창 크기가 조정됨에 따라 조정됩니다. 변경

방법 1왼쪽은 고정, 오른쪽은 적응형으로 일반적으로 모바일에서 목록 표시에 사용됩니다. Web

HTML code

<div class="box">
    <div class="left"></div>
    <div class="right"></div>
    </div>

구현방법 : 하위 요소가 상위 요소의 높이를 확장할 수 있도록 상위 요소에 절대 위치를 부여하고, 한쪽 너비는 고정 왼쪽에 띄우고 오른쪽에 적응형 너비와 높이를 지정합니다. Percent

 <style type="text/css">
    .box{
         position: absolute;
        width:100%;
        height: 100%;
    }
     .left{
            width:200px;
            height:100%;
            background: pink;
            float: left;
        }
        .right{
            width:100%;
            height:100%;
            background: skyblue;
        }
    </style>

Rendering:

# 🎜🎜#

방법 2

#🎜🎜 #

왼쪽은 적응형이고 오른쪽은 고정 너비입니다

display:table- cell 속성을 사용하면 td 태그와 유사하게 label 요소가 테이블 셀 형식으로 표시될 수 있습니다. 이 속성은 E8 이상 브라우저와 기타 최신 브라우저에서 지원됩니다. 이 속성을 사용하면 적응형 레이아웃에 편의성이 제공됩니다. 방법 3

# 🎜🎜#양쪽의 너비는 고정되고 가운데는 적응 가능

HTML 코드

<div class="box">
    <div class="left"></div>
    <div class="right"></div>
    </div>

구현 방법: flex 속성은 다음과 같습니다. Flex Box 모델 객체의 하위 요소가 공간을 할당하는 방법을 설정하거나 검색하는 데 사용됩니다.

.box{
    position: absolute;
     width:100%;
    height: 100%;
    display: table;
    table-layout: fixed;
    }
.left {
    width: 200px;
    height:100%;
    display:table-cell;
    background: pink;
    }

.right {
   display: table-cell;
   width:100%;
   height: 100%;
   display: table-cell;
     background: skyblue;
        }
    </style>

렌더링은 다음과 같습니다:

요약: 위 내용은 이 글의 전체 내용입니다. 기사를 통해 모든 사람이 적응형 레이아웃을 어느 정도 이해할 수 있습니다.

위 내용은 CSS의 일반적인 적응형 레이아웃은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!