CSS से स्क्रीन साइज़ के आधार पर लेआउट बदलने के लिए, कोड निम्नानुसार है -
उदाहरण
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } * { box-sizing: border-box; } .col { color: white; float: left; width: 25%; padding: 10px; } .colContainer:after { content: ""; display: table; clear: both; } @media screen and (max-width: 900px) { .col { width: 50%; } } @media screen and (max-width: 600px) { .col { width: 100%; } } </style> </head> <body> <h1>Changing layout on screen size using CSS</h1> <h2>Resize the screen to see the below divs resize themselves</h2> <div class="colContainer"> <div class="col" style="background-color: rgb(153, 29, 224);"> <h2>First col</h2> </div> <div class="col" style="background-color: rgb(12, 126, 120);"> <h2>Second col</h2> </div> <div class="col" style="background-color: rgb(207, 41, 91);"> <h2>Third col</h2> </div> <div class="col" style="background-color: rgb(204, 91, 39);"> <h2>Fourth col</h2> </div> </div> </body> </html>आउटपुट
उपरोक्त कोड निम्न आउटपुट उत्पन्न करेगा -
