편집 요약 없음 |
편집 요약 없음 |
||
| 3번째 줄: | 3번째 줄: | ||
<onlyinclude><includeonly>{{#css: @media screen and (max-width: 768px) { {{{1}}} { {{{mobile}}} } } @media screen and (min-width: 768px) { {{{1}}} { {{{pc}}} } } {{{1}}} { {{{common}}} } }}</includeonly></onlyinclude> | <onlyinclude><includeonly>{{#css: @media screen and (max-width: 768px) { {{{1}}} { {{{mobile}}} } } @media screen and (min-width: 768px) { {{{1}}} { {{{pc}}} } } {{{1}}} { {{{common}}} } }}</includeonly></onlyinclude> | ||
<pre style="white-space: pre-wrap;">{{반응형 style|요소|mobile=모바일 style|pc=PC style|common=공통 style(선택)}}</pre> | <pre style="white-space: pre-wrap;">{{반응형 style|요소|mobile=모바일 style|pc=PC style|common=공통 style(선택)}}</pre> | ||
{|{{style|class=wiki|width=100% | {|{{style|class=wiki|width=100%}} | ||
|- | |- | ||
!colspan=2|예시 | !colspan=2|예시 | ||
| 12번째 줄: | 12번째 줄: | ||
|pc=background: blue;}} | |pc=background: blue;}} | ||
<div class="example-class"></div></syntaxhighlight> | <div class="example-class"></div></syntaxhighlight> | ||
|{{반응형 style|.example-class|common=display: inline-block; width: 50px; height: 50px;|mobile=background: red;|pc=background: blue;}}<div class="example-class"></div> | |{{style|width=calc(50px + .6rem)}}|{{반응형 style|.example-class|common=display: inline-block; width: 50px; height: 50px;|mobile=background: red;|pc=background: blue;}}<div class="example-class"></div> | ||
|- | |- | ||
|colspan=2|{{펼접|id=tip|title=[ 사용 팁 ]}} | |colspan=2|{{펼접|id=tip|title=[ 사용 팁 ]}} | ||
2024년 7월 9일 (화) 21:59 판
| 틀:반응형 style | |
|---|---|
사용문서
|
|
넘겨주기
|
이동하기
|
{{반응형 style|요소|mobile=모바일 style|pc=PC style|common=공통 style(선택)}}
| 예시 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| 모바일에서 빨간 박스, PC에서 파란 박스 (PC에서는 F12 개발자 도구의 모바일 화면 모드에서, 모바일에서는 기기를 가로 모드로 기울여서 각각의 차이를 볼 수 있습니다.) |
|||||||||||
[ 사용 팁 ]
| |||||||||||
