Example CSS: @media (max-width: 768px) { body { font-size: 14
CSS-i näide: @meedia (maksimaalne laius: 768 pikslit) { body { fondi suurus: 14 <div class = "container"> <div class = "jumbotron"> <h1>Tutorials Point</h1> <p> Tutorials Point sai alguse ideest, et on olemas lugejate klass, kes reageerivad veebisisule paremini ja eelistavad õppida uusi oskusi omas tempos oma elutubade mugavustest. </p> </div> <div class = "row"> <div class = "col-md-4"> <h2>Android</h2> <p> Android on avatud lähtekoodiga ja Linuxil põhinev operatsioonisüsteem mobiilseadmete jaoks, nagu nutitelefonid ja tahvelarvutid. Androidi töötasid välja Open Handset Alliance, mida juhib Google ja teised ettevõtted. </p> </div> <div class = "col-md-4"> <h2>CSS</h2> <p> Kaskaadstiilitabelid, mida hellitavalt nimetatakse CSS-iks, on lihtne kujunduskeel, mille eesmärk on lihtsustada veebilehtede esinduslikuks muutmise protsess. </p> </div> <div class = "col-md-4"> <h2>Java</h2> <p> Java on kõrgetasemeline programmeerimiskeel, mille algselt töötas välja Sun Microsystems ja mis ilmus 1995. aastal. Java töötab erinevatel platvormidel, nagu Windows, Mac OS ja UNIX-i erinevad versioonid. See õpetus annab täieliku ülevaate Javast. </p> </div> </div> px; } }
<div class = "container"> <div class = "jumbotron"> <h1>Tutorials point</h1> <p> Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms. </p> </div> <div class = "row"> <div class = "col-md-4"> <h2>Android</h2> <p> Android is an open source and Linux-based operating system for mobile devices such as smartphones and tablet computers. Android was developed by the Open Handset Alliance, led by Google, and other companies. </p> </div> <div class = "col-md-4"> <h2>CSS</h2> <p> Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to simplify the process of making web pages presentable. </p> </div> <div class = "col-md-4"> <h2>Java</h2> <p> Java is a high-level programming language originally developed by Sun Microsystems and released in 1995. Java runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX. This tutorial gives a complete understanding of Java. </p> </div> </div>
px; } }
Example CSS: /* Base styles for all devices */ body { font-family: Arial, sans-serif; margin: 0; padding: 0; line-height: 1.6; }
.content { display: flex; flex-direction: column; /* Default to column for mobile */ align-items: center; /* Center content */ }
.text { margin-bottom: 1rem; }
.image img { max-width: 100%; /* Image will be responsive */ height: auto; /* Maintain aspect ratio */ }
/* Media query for tablets and larger devices */ @media (min-width: 600px) { .content { flex-direction: row; /* Switch to row layout for larger screens */ justify-content: space-between; /* Space out the items */ }
.text { flex: 1; /* Allow text to take up available space */ margin-right: 1rem; /* Add space between text and image */ }
.image { flex: 1; /* Allow image to take up available space */ } }
/* Media query for large desktop screens */ @media (min-width: 900px) { header { padding: 2rem; /* Increase padding for larger screens */ }
main { max-width: 1200px; /* Set a maximum width for larger displays */ margin: auto; /* Center main content */ }
Layout adjusts fluidly to any screen size. Often uses percentage-based widths and flexible grids. More dynamic and flexible for unknown devices.
Uses predefined breakpoints for specific screen sizes. Often uses fixed layouts tailored to specific devices. Optimized for a limited number of device types.
Summary: Responsive design is better because the site itself adapts to any screen – phone, tablet or computer. This is convenient for users, because there is no need to zoom in or out on the page to see everything.
Unlike other options, where different versions of the site are made for different devices, responsive design works on all at once. It is simpler and cheaper, because there is no need to support multiple versions of the site. And such a site is also better in Internet search.
