반응형 레이아웃에는 여러 가지 방법이 있습니다.

반응형 레이아웃의 몇 가지 방법은 다음과 같습니다. 1. 미디어 쿼리 2. 백분율 [%] 3. vw 또는 vh, vw는 보기 창을 기준으로 한 높이를 나타냅니다. rem 단위는 글꼴 크기에 따른 HTML 요소입니다. 5. 유연한 탄력적 레이아웃.

이 기사의 운영 환경: Acer S40-51, Windows 10 Home 중국어 버전

권장: css 비디오 튜토리얼

반응형 레이아웃의 일부 방법은 다음과 같습니다. 적극적인 레이아웃 방법 1: 미디어 쿼리

@media 미디어 쿼리를 사용하면 다양한 미디어 유형, 특히 반응형 페이지에 대해 다양한 스타일 세트를 정의하여 다양한 화면 크기에 맞게 맞춤화 효과를 얻을 수 있습니다. . 예: 미디어 쿼리를 통해 해상도가 다른 장치에 대해 서로 다른 스타일을 작성하여 반응형 레이아웃을 구현할 수 있습니다. 예를 들어 해상도가 다른 화면에 대해 서로 다른 배경 이미지를 설정할 수 있습니다. 예를 들어 작은 화면 휴대폰에 @2x 이미지를 설정하고 대형 화면 휴대폰에 @3x 이미지를 설정하는 것은 미디어 쿼리를 통해 쉽게 달성할 수 있습니다.

그러나 미디어 쿼리의 단점도 분명합니다. 브라우저 크기가 변경될 때 너무 많은 스타일을 변경해야 한다면 여러 스타일 코드 세트가 매우 번거로울 것입니다. @media媒体查询可以针对不同的媒体类型定义不同的样式，特别是响应式页面，可以针对不同屏幕的大小，编写多套样式，从而达到自适应的效果。举例来说：

通过媒体查询，可以通过给不同分辨率的设备编写不同的样式来实现响应式的布局，比如我们为不同分辨率的屏幕，设置不同的背景图片。比如给小屏幕手机设置@2x图，为大屏幕手机设置@3x图，通过媒体查询就能很方便的实现。

但是媒体查询的缺点也很明显，如果在浏览器大小改变时，需要改变的样式太多，那么多套样式代码会很繁琐。

响应式布局方法二：百分比%

比如当浏览器的宽度或者高度发生变化时，通过百分比单位，通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。

height,width属性的百分比依托于父标签的宽高。但是，padding、border、margin等属性的情况又不一样

• 子元素的padding如果设置百分比，不论是垂直方向或者是水平方向，都相对于直接父亲元素的width，而与父元素的height无关。

• 子元素的margin如果设置成百分比，不论是垂直方向还是水平方向，都相对于直接父元素的width

• border-radius

반응형 레이아웃 방법 2: 백분율 %

예를 들어 브라우저의 너비나 높이가 변경되면 백분율 단위를 사용하여 브라우저에 있는 구성 요소의 너비와 높이를 변경할 수 있습니다. 반응적인 효과를 얻기 위해 변경합니다.

높이 및 너비 속성의 비율은 상위 태그의 너비 및 높이에 따라 달라집니다. 그러나 패딩, 테두리, 여백 및 기타 속성의 상황은 다릅니다

자식 요소의 패딩이 백분율로 설정되면 세로 방향이든 가로 방향이든 관계 없이 자식 요소의 너비에 상대적입니다. 직접적인 상위 요소와 상위 요소의 높이까지 할 일이 없습니다.

하위 요소의 여백이 수직이든 수평이든 백분율로 설정되면 이는 직접 상위 요소의 너비를 기준으로 합니다

border-radius 테두리가 다른 경우 - 반경은 자체 너비에 상대적인 백분율입니다

단점

설계 초안에 따라 요소의 너비와 높이를 정의하려는 경우, 백분율 단위로 변환해야 합니다.

각 속성에 백분율을 사용하는 경우 상위 요소와 관련된 속성은 고유하지 않습니다. 예를 들어, 너비와 높이는 부모 요소의 너비와 높이를 기준으로 하고, 여백과 패딩은 부모 요소의 너비를 기준으로 하며, 수직이든 수평이든 테두리 반경은 요소 자체를 기준으로 합니다. 이는 백분율 단위를 사용하여 레이아웃을 만드는 것을 쉽게 만듭니다. 문제는 복잡해집니다.

따라서 반응형 레이아웃에는 %를 사용하지 않는 것이 좋습니다.

반응형 레이아웃 방법 3: vw/vh

CSS3에는 보기 창과 관련된 새로운 단위 vw/vh가 도입되었습니다. vw는 보기 창에 상대적인 너비를 나타내고, vh는 보기에 상대적인 높이를 나타냅니다. 창문. 모든 계층적 요소에 대해 vw 단위를 사용할 때 1vw는 뷰 너비의 1%와 같습니다.

백분율 레이아웃과 매우 유사하지만 더 좋습니다.

반응형 레이아웃 방법 4: rem

• rem 단위는 글꼴 크기에 상대적인 html 요소이며 루트 요소라고도 합니다. 기본적으로 html 요소의 글꼴 크기는 16px입니다. 따라서 이때 1rem = 16px입니다.
  최적화된 버전

//动态为根元素设置字体大小
function init () {
 // 获取屏幕宽度
 var width = document.documentElement.clientWidth
 // 设置根元素字体大小。此时为宽的10等分
 document.documentElement.style.fontSize = width / 10 + 'px'
}
//首次加载应用，设置一次
init()
// 监听手机旋转的事件的时机，重新设置
window.addEventListener('orientationchange', init)
// 监听手机窗口变化，重新设置
window.addEventListener('resize', init)

• 이해: 위 코드는 장치 표시 창이 어떻게 변경되든 상관없이 항상 너비의 1/10으로 설정됩니다. 즉, 백분율 레이아웃이 달성됩니다. 미디어 쿼리의 첫 번째 버전만큼 엄격하지는 않습니다.
  위 코드는 DOM 앞에 작성해야 합니다(헤드의 첫 번째 스크립트 태그에 배치 가능) 🎜🎜🎜반응형 레이아웃 방법 5: flex elastic 레이아웃 🎜🎜🎜유연한 레이아웃은 매우 편리한 레이아웃입니다. 반응형 레이아웃을 구현하기 위한 CSS 스타일 방법은 반응형 레이아웃을 구현하는 데 가장 일반적으로 사용되는 방법이기도 합니다. 🎜🎜특히 타오바오, 타오바오 등 전자상거래 웹사이트나 모바일 앱 페이지의 경우 유연한 레이아웃을 사용하여 쉽게 구현할 수 있습니다. 🎜🎜유연한 레이아웃에는 상위 요소에 있는 하위 요소의 "탄력성"을 조절하기 위해 상위 요소와 하위 요소에 해당 속성이 있습니다. 🎜🎜🎜🎜부모 요소에는 우리가 주로 사용하는 가변 레이아웃 관련 속성으로는 flex-direction, flex-wrap, justify-content, align-items, align-content가 있는데, 이들 속성은 각각 주축에서 나옵니다. 방향, 줄 바꿈 여부, 기본 축의 항목 정렬, 교차 축의 항목 정렬 및 여러 축의 항목 정렬은 상위 요소의 항목 유연성을 규제합니다. 🎜🎜🎜🎜하위 요소에는 우리가 주로 사용하는 유연한 레이아웃 관련 속성으로는 order, flex-grow, flex-shrink, flex-basis, align-self 등이 있습니다. 프로젝트 확대 비율, 프로젝트 축소 비율, 프로젝트가 차지하는 주축 공간, 교차축에 대한 단일 프로젝트 정렬은 프로젝트 자체의 유연성을 규제합니다. 🎜

프로그래밍 학습에 대해 더 알고 싶다면 php training 칼럼을 주목해주세요!

위 내용은 반응형 레이아웃에는 여러 가지 방법이 있습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!