반응형 버튼 소스코드

<!doctype html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>반응형 웹 버튼 만들기</title>
<style>
/* 최소 비율 */
@media (min-aspect-ratio: 8/5) {
div {
background: #9af; /* blue */
}
}

/* 최고 비율 */
@media (max-aspect-ratio: 3/2) {
div {
background: #9ff; /* cyan */
}
}

/* 기본 */
@media (aspect-ratio: 1/1) {
div {
background: #f9a; /* red */
}
}
</style>
</head>
<body>
<label id="wf" for="w">width:250</label>
<input id="w" name="w" type="range" min="100" max="250" step="5" value="165">
<label id="hf" for="w">height:250</label>
<input id="h" name="h" type="range" min="100" max="250" step="5" value="165">

<iframe id="outer" src="data:text/html,<style> @media (min-aspect-ratio: 8/5) { div { background: %239af; } } @media (max-aspect-ratio: 3/2) { div { background: %239ff; } } @media (aspect-ratio: 1/1) { div { background: %23f9a; } }</style><div id='inner'>this...</div>" style="height: 250px; width: 250px;">

</iframe>

<script>
outer.style.width=outer.style.height="165px"

w.onchange=w.oninput=function(){
outer.style.width=w.value+"px"
wf.textContent="width:"+w.value
}
h.onchange=h.oninput=function(){
outer.style.height=h.value+"px"
hf.textContent="height:"+h.value
}
</script>


</body>
</html>

반응형 홈페이지

반응형 버튼 소스코드

관련