화면 크기에 따라 열 너비를 변경하는 코드는 다음과 같습니다. -
예시
<!DOCTYPE html> <html> <head> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .sample { width: 50%; background-color: lightblue; height: 200px; font-size: 18px; } @media only screen and (max-width: 700px) { body { margin: 0; padding: 0; } .sample { width: 100%; } } </style> </head> <body> <h1>Changing column width based on screen size</h1> <div class="sample">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quod, maiores!</div> <h3>Resize the browser window to 700px and below to see the above div width change to 100%</h3> </body> </html>
출력
위의 코드는 다음과 같은 출력을 생성합니다 -
브라우저 창을 700px로 크기 조정 시 -