We spent three days talking about some really basic things in Android development, I hinted that I'd talk about one feature that makes web development more resilient than Android development. It's frankly undebatable that web-based platforms are much stronger than Android, IOS or desktop applications, case in point is that websites don't crash as much as other applications. Your browser crashing doesn't mean the website crashed (just thought to add that). We talked about how Android devices switch between portrait and landscape mode and I felt it would be helpful to talk about the web equivalent of that feature.
MEDIA QUERY EXPLAINED
Media Query is a concept/implementation that web developers use to ensure that a website/web application is responsive to the device it's being accessed on. Because devices have different screen sizes, we have to issue different instructions to the machine so it doesn't assume one size fits all. Have you ever been on a website that was awesome when accessed on your laptop but terrible on your mobile devices? it's because the said website isn't mobile-friendly and it is because Media queries weren't used to dictate to the machine how the website should render on mobile devices of different screen sizes.
THE BASIC BUILDING BLOCKS OF A WEBSITE
Basically, websites are built using HTML, CSS and Javascript, frameworks that use other languages typically translate into the above three languages when it's time to render on the machine. HTML provides the structure and content on the page, CSS is what gives the website colour and style, Javascript gives the website dynamism and can be the difference between a website and a web app. CSS is the language used to issue Media Query that makes it possible to dictate how the website should look based on screen size. Screen size is typically measured in pixels (abbreviated as px), 320px - 480px screens sizes belong to mobile devices. 481px - 768px belongs to Ipad and tablet devices, 769px - 1024px belongs to small laptops, 1025px - 1200px belong to desktop and large screens, anything above belongs to much bigger screens like smart TVs and the likes.
CODE SNIPPET FOR MEDIA QUERY
We write code like
@media only screen and (max-width: 768px){
}
to dictate how a website should respond to a particular screen size then we specify our instructions in between the curly braces "{}", we can use "min-width" to dictate the minimum screen size we're referring to, or "max-width" to dictate how a website should display as long as the screen size isn't bigger than the pixels we specified.
MEDIA QUERY ENSURES WEBSITES TRANSITION SMOOTHLY BETWEEN DIFFERENT SCREEN SIZES
Using media queries, websites can smoothly transition between different screen sizes without crashing. To test it out, you can access a website with your desktop browser, and manipulate the space the browser takes on your screen by minimizing it, maximizing it and using your mouse to drag on the desktop browser to adjust the size, you'll see a smooth transition between all sizes (if the website is mobile responsive). You can try it out using the Hashnode platform to get a hang of it.