반응형 레이아웃이란 무엇입니까?
반응형 레이아웃은 동일한 페이지가 다양한 화면 크기에서 다양한 레이아웃을 갖는다는 것을 의미합니다. 모바일 인터넷이 고도로 발달한 오늘날, 데스크탑 브라우저에서 개발하는 웹 페이지는 더 이상 모바일 장치에서 볼 수 있는 요구 사항을 충족할 수 없습니다. 전통적인 개발 방법은 PC 측에서 한 세트의 페이지를 개발하고 모바일 측에서 다른 페이지 세트를 개발하는 것입니다. 그러나 이는 매우 번거로운 일입니다. 터미널이 점점 더 다양해지면 페이지의 여러 버전을 개발해야 합니다. 반응형 레이아웃을 사용하려면 하나의 세트만 개발하면 됩니다. EthanMarcotte는 2010년 5월에 반응형 레이아웃 개념을 제안했습니다. 즉, 웹사이트는 여러 터미널과 호환될 수 있습니다.
반응형 개발과 모바일 및 PC 별도 개발의 차이점: 반응형 개발은 일련의 인터페이스만 작성하고 뷰포트 해상도를 감지하고 다양한 클라이언트에 대해 클라이언트에서 코드 처리를 수행하여 다양한 레이아웃과 콘텐츠를 표시합니다. 모바일 단말기와 PC 단말기는 별도로 개발되어 뷰포트 해상도를 감지하여 현재 접속한 기기가 PC인지, 태블릿인지, 휴대폰인지 판단하여 서버에 요청하고 다른 페이지를 반환할 수 있습니다.
반응형 개발의 원리는 무엇인가요?
반응형 개발 의 원칙은 CSS3의 미디어 쿼리를 사용하여 다양한 너비의 기기에 대해 다양한 레이아웃과 스타일을 설정하여 다양한 기기에 적응하는 것입니다.
SS3 @media 쿼리 정의 및 사용법:
@media 쿼리를 사용하면 다양한 미디어 유형에 대해 다양한 스타일을 정의할 수 있습니다. @media는 다양한 화면 크기에 대해 다양한 스타일을 설정할 수 있습니다. 특히 반응형 페이지를 설정해야 하는 경우 @media는 매우 유용합니다. 브라우저 크기를 재설정하면 브라우저의 너비와 높이에 따라 페이지도 다시 렌더링됩니다.
예를 들어 화면 너비가 500픽셀 미만인 경우 배경색을 빨간색으로 변경합니다.
반응형 레이아웃을 구현하기 위해 일반적으로 사용되는 방법은 다음과 같습니다.
(1) CSS에서 미디어 쿼리를 사용합니다(가장 간단함).
(2) JavaScript를 사용합니다(사용 비용이 상대적으로 높음).
(3) 타사 오픈 소스 프레임워크(예: 다양한 브라우저를 지원할 수 있는 부트스트랩)를 사용합니다.
메타태그 설정
먼저 뷰포트(웹 페이지의 표시 영역)의 너비를 장치의 너비와 동일하게 만들고 사용자가 페이지를 확대하는 것을 금지하도록 브라우저에 지시하는 메타 태그를 설정해야 합니다. 아래에 표시됨:
<metaname=viewportcontent=width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no>
뷰포트를 설정할 때 주의할 점은 뷰포트는 웹페이지가 보이는 영역의 크기입니다. 높이는 웹페이지 콘텐츠에 따라 자동으로 확장됩니다. 위 메타태그 내용의 의미는 다음과 같습니다.
● 뷰포트: 웹페이지의 가시 영역을 나타내는 뷰포트.
●width: 뷰포트의 크기를 제어합니다. 600과 같은 특정 값을 지정하거나 키워드로 구성된 특수 값을 지정할 수 있습니다. 예를 들어, device-width는 장치의 너비를 나타냅니다.
●initial-scale: 초기 스케일링 비율, 즉 페이지가 처음 로드될 때의 스케일링 비율을 나타냅니다.
●maximum-scale: 사용자가 확대할 수 있는 최대 비율을 나타냅니다(0~10.0 범위).
●minimum-scale: 사용자가 0~10.0 범위의 최소 배율로 확대/축소할 수 있음을 나타냅니다.
●user-scalable: 사용자가 수동으로 확대/축소할 수 있는지 여부를 나타내며 "yes"는 크기 조정이 허용됨을 의미하고 "no"는 크기 조정이 금지됨을 의미합니다.
언론 문의
CSS 미디어 쿼리는 지정된 조건에 따라 다양한 미디어 유형(화면 인쇄)에 대해 다양한 CSS 스타일을 정의할 수 있으므로 다양한 장치를 사용하는 사용자가 최상의 경험을 얻을 수 있습니다.
HTML을 예로 사용하세요.
<!DOCTYPEhtml><html><head><metacharset=UTF-8><metaname=viewportcontent=width=device-width,initial-scale=1><title>반응형 페이지 소개 튜토리얼: Albert Yang</title><linkrel =stylesheethref=style.css><링크 l=stylesheethref=https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.cssintegrity=sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnNcrosso rigin=anonymous></head><body><header><ahref=#>AlbertYang</a><ul><li><ahref=#>홈페이지</a></li><li><ahref= #>블로그</a></li><li><ahref=#>연락처</a></li><li><ahref=#>메시지 보드</a></li><li> <ahref=#>내 소개</a> </li><li><ahref=#>사진 벽</a></li></ul><div><inputtype=textplaceholder=Search><iclass=fafa-searcharia-hidden=true></i ></div></header><div><div><h2>반응형 레이아웃</h2><p>반응형 레이아웃은 동일한 페이지가 다양한 화면 크기에서 다양한 레이아웃을 갖는 것을 의미합니다. 기존의 개발 방식은 PC용 세트와 모바일용 세트를 각각 개발하는 방식이었습니다. 하지만 반응형 레이아웃을 사용할 경우에는 한 세트만 개발하면 됩니다. 반응형 디자인과 적응형 디자인의 차이점: 반응형 디자인은 인터페이스 세트를 개발하고 뷰포트 해상도를 감지하고 다양한 클라이언트에 대해 클라이언트 측에서 코드 처리를 수행하여 다양한 레이아웃과 콘텐츠를 표시합니다. 적응형 디자인에는 여러 인터페이스 세트의 개발이 필요합니다. , 뷰포트 해상도를 감지하여 현재 접속한 기기가 PC인지, 태블릿인지, 휴대폰인지 판단하여 서비스 레이어를 요청하고 다른 페이지를 반환합니다. CSS3 미디어 쿼리를 사용하면 다양한 미디어 유형에 대해 다양한 스타일을 정의할 수 있으며, 브라우저 창 크기가 재설정되면 페이지도 브라우저의 너비와 높이에 따라 다시 렌더링됩니다. </p><ahref=#>전체 텍스트 읽기</a></div><imgsrc=img.png></div></body></html>
실행 결과:
다음은 반응형 레이아웃 구현을 보여주는 포괄적인 예입니다.
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title>반응형 레이아웃</title><metaname=viewportcontent=width=device-width,initial-scale=1.0,maximum-scale=1, 사용자 -scalable=no/><스타일>*{margin:0px;padding:0px;font-f amily:Microsoft Yahei;}#head,#foot,#main{height:100px;width:1200px;/*width:85%;*/Background-color:goldenrod;text-align:center;font-size:48px ; line-height:100px;margin:0auto;}#headdiv{display:none;font-size:20px;h 8:30px;너비:100px;배경색상:녹색;float:right;line-height:30px;margin-top:35px;}#headul{width:80%;}#headulli{width:20%;float: left;text-align:center;list-style:none;font-size:20px;}#main{he ight:auto;margin:10pxauto;overflow:hidden;}.left,.center,.right{height:600px;line-height:600px;float:left;width:20%; background-color:red}.center{ 너비:60%;테두리-왼쪽:10pxsolid#FFF;테두리-오른쪽:10pxso lid#FFF;box-sizing:border-box;}@mediaonlyscreenand(max-width:1200px){#head,#foot,#main{width:100%;}}@mediaonlyscreenand(max-width:980px){. right{display:none;}.left{width:30%;}.center{width:70%;border- right:hidden;}}@mediaonlyscreenand(max-width:640px){.left,.center,.right{width:100%;display:block;height:200px;line-height:200px;}.center{border: 숨겨진;경계 상단:10pxsolid#FFFFFF;경계 하단:10pxso 뚜껑#FFFFFF;높이:600px;라인 높이:600px;}#headul{display:none;}#headdiv{display:block;}}</style></head><body><div><headerid=head ><ul><li>헤더1</li><li>헤더2</li><li>헤더2</li><li>헤더2</li>< li>header2</li></ul><div>icon</div></header><sectionid=main><divclass=left>left</div><divclass=center>center</div><divclass =right>오른쪽</div></section><footerid=foot>바닥글</footer></div></body></html>실행 결과:
