![]() With media queries, you tell the browser to display the content in a particular way on a particular screen.When the Internet began in the early 1990s, it was a desktop-only version. ![]() Media queries let you write the same CSS code in different ways for multiple screens. The most crucial tool you'll use to make your sites responsive is CSS3 Media Queries. :)īut the viewport element is not all you need to make a website adapt to different screen sizes. I will make it available to all freeCodeCamp readers very soon – so, stay tuned. If you are wondering which website this is, it’s a free portfolio website template I made for beginners. ![]() This prevents annoying zooming in and zooming out that mobile phone users experienced in the past, which wasn't good for user experience.īelow is how a website looks on small phones without the viewport element:Īnd here's how the same website with the viewport element looks on small phones: If the device has a width of 720px, the web page width will be 720px, and so on. So, if the device has a width of 1200px, the web page width will be 1200px. This tells the browser to render the width of the web page to the exact width of the device. You'll need to include the meta viewport empty element in the head section of any web page that you want to optimize for different screen sizes. Since HTML plays a huge role in defining the structure of a web page, then it definitely has something to do with making websites respond (adapt) to different screen sizes. I will describe these processes as clearly and in as much detail as possible. Integrating responsive web design approaches into a project includes every part of the code – within the HTML element, the HTML structure, the CSS, and even the JavaScript. This practice still exists today.Īpart from the two-domain method, web designers and developers can create a website for a particular screen size first (it could be desktop, tablet, or mobile), and then add what are called media queries to make the website adapt to different screen sizes. The user's device would be detected by ready-made scripts and then the appropriate domain would be rendered. The original website, for example, could be, and the mobile version would be examplewebsite.mobi, or m. This often meant a separate website for mobile devices and larger screens, with the same server system but different domains. This meant that the developers made the websites for mobile devices first, and desktop later. So everyone from tech giants to small businesses started embracing a responsive web design approach.ĭevelopers and designers also created the shiny new mobile-first design as well. In the last decade, the number of website users on mobile began to surpass that of desktops and laptops for the first time. This meant one thing for web designers and developers: websites needed to be optimized for mobile, too! In the past, people mostly used desktops and laptops to view content online, because websites were optimized for those screens only.īut as more and more people started using mobile phones to surf the web, people started grumbling about the poor display and layouts they were seeing. Rather, it means that the content of the web page adapts to different screen sizes – from large screens (desktops and laptops) to medium screens (tablets) to mobile screens (phones of various screen sizes).Īnd it does this all while retaining the same content (just perhaps arranged differently to fit each screen). This doesn't mean a website will appear exactly the same way on a phone as on a laptop, for example. Responsive web design makes web pages render properly on a wide variety of device screen sizes without cutting short or distorting the content. In this article, I will take you through the evolution of Responsive Web Design, the various integrations that have made it possible, and how you can start to use it in your coding projects for a better user experience. Thankfully, this is no longer the case these days due to the revolutionary introduction of Responsive Web Design. Then when smart phones were developed, mobile phone users had to endlessly zoom and scroll to access and view different parts of those same websites. When the internet was still young, website visitors used desktop and then laptop computers with wide screens to access websites.
0 Comments
Leave a Reply. |