@ Media
Media screens serve the purpose of enabling websites to adjust to various screen sizes without altering the HTML code. They provide control over structural elements, type size, colors, and visibility of specific elements on a webpage. By utilizing media screens in the CSS page of a website, developers can enhance accessibility and improve understanding of the content on different devices, like cell phones or tablets. The media screen code typically starts with "@media only screen and (max-width: ______px)," allowing customization based on the maximum width of the screen.
Responsive Design
Responsive design is an approach to web development that focuses on creating websites capable of adapting to diverse devices and screen sizes. Achieved through flexible grid layouts, CSS media queries, and adaptable media elements, responsive design ensures optimal viewing experiences on desktops, laptops, tablets, and smartphones. By using relative units, responsive websites dynamically adjust to varying screen dimensions, promoting a consistent and user-friendly interface. The incorporation of techniques such as the viewport meta tag enhances scalability and responsiveness, ultimately contributing to improved accessibility and user satisfaction across multiple devices.
CSS; bundle info
---Responsive screen code for differnt size screens---
/* Laptop Screens 1200 */
@media only screen and (max-width: 1200px)
{
.collumn
{
width: calc(90% - 20px);
margin: 10px;
justify-content: center;
}
}
/* Smartphone Screens 950 */
@media only screen and (max-width: 950px)
{
.collumn
{
width: calc(100% - 40px);
margin: 10px;
justify-content: center;
}
}