स्क्रीन साइज़ के आधार पर कॉलम चौड़ाई बदलने के लिए, कोड निम्नानुसार है -
उदाहरण
<!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>आउटपुट
उपरोक्त कोड निम्न आउटपुट उत्पन्न करेगा -
ब्राउज़र विंडो को 700 px पर रिसाइज़ करने पर -
