미디어 쿼리 설정 질문입니다.

0 투표
551 조회
1. 웹에서도 사이즈를 변경하면 그대로 줄어들기를 바라는데 바디는 어느정도 적용되는것 같은데 슬라이더 이미지는 적용이 안됩니다.

 

인덱스에
<!--Global CSS-->
<link href="./src/default.css" type="text/css" rel="stylesheet" />
<!--해상도에 800픽셀 이하인 경우 적용할 Css-->
<link href="/src/layout-narrow.css" media="screen and (max-width:800px)" type="text/css" rel="stylesheet" />
<!--해상도에 801픽셀 이상인 경우 적용할 Css-->
<link href="/src/layout-wide.css" media="screen and (min-width:801px)" type="text/css" rel="stylesheet" />
<!--Global CSS-->
<?php if (isset($_GET['sub'])) { ?>
<link href="./src/sub.css" type="text/css" rel="stylesheet" />
<!--해상도에 800픽셀 이하인 경우 적용할 Css-->
<link href="/src/sub-narrow.css" media="screen and (max-width:800px)" type="text/css" rel="stylesheet" />
<!--해상도에 801픽셀 이상인 경우 적용할 Css-->
<link href="/src/sub-wide.css" media="screen and (min-width:801px)" type="text/css" rel="stylesheet" />
<?php } else { ?>
<link href="./src/main.css" type="text/css" rel="stylesheet"/>
<!--해상도에 800픽셀 이하인 경우 적용할 Css-->
<link href="/src/main-narrow.css" media="screen and (max-width:800px)" type="text/css" rel="stylesheet" />
<!--해상도에 801픽셀 이상인 경우 적용할 Css-->
<link href="/src/main-wide.css" media="screen and (min-width:801px)" type="text/css" rel="stylesheet" />
<?php } ?>

 

이부분은 설정되어있고,  css 에서 header의 width를 100%로 줬는데 반응하지않습니다

min-width? 같은 다른 미디어 쿼리 설정이 필요한 것일까요?

https://jsfiddle.net/junn_l/dg8s44mz/1/

mustoryart.com

 

2. 또, 메뉴바를 애초에 로고 밑으로 깔아서 작은사이즈에서 볼때 메뉴역시 작게 축소되게 수정하고자 합니다. (수평메뉴바 유지)

그럼 navi선택자를 header선택자의 자식으로 둬야하는 건가요?

참고사이트 (www.leesokids.com  : 이곳의 footermenubar처럼 header에 넣고싶어요 ㅠ )
요청 : 2018년 5월 22일 미분류 분류 내 작성자 animatot (180 포인트)

2 대답

0 투표

현재 구현된  img 태그를 이용한 슬라이더 항목 처리 방식은 반응형 작업시 다소 어려울 수 있습니다.

그래서 배경 이미지 버전으로 포크했습니다. 다음 아래의 링크를 참조해서 작업에 활용하시길 바랍니다.

참고로 Javascript와 CSS 코드만 수정하면 됩니다. 주석을 달아두었지만 이해하는데 어려움이 있다면 다시 질문을 주시길 바랍니다.

https://jsfiddle.net/Cydemy/hb935gtr/

답변: 2018년 5월 22일 작성자 qsadmin (2,100 포인트)
0 투표
아, 그리고 2번 질문에 대한 답변이 빠졌네요.

반응형 웹사이트는 단일 HTML 코드를 가지고 해상도에 따른 CSS 분기를 원칙으로 합니다.

저해상도, 고해상도 구분없이 마크업은 동일하고 단지 CSS로 적절한 레이아웃 처리를 합니다. 경우에 따라서는 불가피하게 자바스크립트를 사용해야 하는 경우도 발생합니다.

따라서 header 하위에 navi를 두고 마크업을 하든 아니면 형제관계로 하든 관계는 없지만 위에서 말씀드린 원칙을 지켜주면 될 것 같습니다.
답변: 2018년 5월 24일 작성자 qsadmin (2,100 포인트)