반응형 레이아웃 통찰력

반응형 레이아웃에 대해서는 사람마다 의견이 다를 수 있다고 생각합니다. 반응형 레이아웃을 일종의 웹페이지라고 생각하는 사람도 있지만, 실제 반응형 레이아웃은 웹페이지의 크기에 따라 조정될 수 있습니다. PC측에서는 웹페이지의 모든 내용이 일렬로 표시되거나, 2개의 측면 열 또는 1개의 측면 열로 나누어서 표시되며, PC측에서는 일렬로 표시됩니다. 그런데 화면이 작아질수록 레이아웃도 작아지게 됩니다. 휴대폰에서는 원래 세로로 배열되어 있던 버튼이 가로로 배열될 수도 있습니다...

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

1. 우선 미디아(Media)라는 단어를 다들 아셔야 합니다. 미디어(Media)는 영어로 미디어(Media)를 뜻하는데요, 어떤 사람들은 미디어가 어떤 속성을 가지고 있느냐고 묻습니다. 그것은 무엇을 할 수 있습니까? 실제로 미디어에는 @media screen 및(min-width:)(max-width)라는 문이 있습니다. 이 문은 반응형 레이아웃의 기본 응용 프로그램입니다. 다른 값을 지정하면 다른 화면에 표시될 수 있습니다. 반응형 레이아웃의 효과를 얻을 수 있도록 표시되지만 브라우저 호환성 문제로 인해 여전히 많은 문제가 있습니다. 어떻게 해야 합니까? 이때 미디어의 다른 속성도 관련됩니다. 즉, 미디어는 여전히 매우 강력하며 반응형 레이아웃을 달성하는 데에도 사용할 수 있습니다.

2. 둘째, 반응형 레이아웃의 또 다른 구현 방법은 너비를 백분율 형태로 제공하는 것입니다. 이러한 레이아웃은 화면이 확대되고 축소됨에 따라 레이아웃도 반응형 레이아웃의 효과를 얻을 수 있습니다. 이 레이아웃 방법은 반응형 레이아웃을 구현할 수 있지만 내 작업이나 회사에서는 거의 권장되지 않습니다. 이 레이아웃 방법은 더 이상 개발을 따라갈 수 없다는 문제도 있습니다. 이 레이아웃은 시간과 코드의 양이 상대적으로 크고 시각적으로 보기 흉합니다. 이것이 프로젝트를 할 때 큰 영향을 미치기 때문에 이 레이아웃 방법은 간단하지만 현재 이 레이아웃 방법을 사용하는 회사는 거의 없습니다.

3. 마지막으로 반응형 레이아웃을 수행하는 또 다른 방법이 있습니다. 가장 큰 화면에서는 col-lg-를 사용하고, 태블릿 디스플레이에서는 col-sm-을, 가장 작은 화면에서는 col-sm-을 사용하는 것입니다. Col-xs-가 적용 가능하며, col-md-가 PC에 표시되는 데 사용됩니다. 이 프레임워크에서는 컨테이너가 12개의 그리드로 구분됩니다. 이 레이아웃 방법은 또한 다양한 장치에 대한 반응형 레이아웃 효과를 갖습니다. 예를 들어 요소에 두 개의 클래스가 사용되는 경우 장치 화면의 크기에 따라 적절한 스타일을 선택합니다. 화면 크기가 클래스 범위를 벗어나면 무시됩니다. 두 가지 클래스, 펜스의 각 스타일은 행을 기반으로 하며 다양한 클래스 조합을 사용하여 다양한 장치에 표시되는 원하는 효과를 얻을 수 있습니다. 그러나 이 레이아웃은 주로 모바일 앱용입니다. , 하지만 개인적으로 이 레이아웃의 프레임워크는 그다지 좋지 않다고 생각하지만 전반적으로 작은 문제는 없습니다.

위 내용은 반응형 레이아웃에 대한 개인적인 의견입니다. 잘못된 점이 있으면 지적해 주시기 바랍니다.