At your request, this article will cover Media Queries, which means using Media Types together with one or more expressions about a media’s characteristics in order to define formatting for different devices. Browsers or applications read the expressions defined in the Query, and if the device in question matches those conditions, the corresponding CSS is applied.
Media Types specify which type of media a certain block of CSS is intended for. HTML was created to be portable—that is, to be read and interpreted by any kind of device. However, each device renders HTML differently due to factors such as screen dimensions (i.e., “resolution”). For example, accessing a site from a desktop will not behave the same way as accessing it from a mobile device, because these are different devices with different browsing contexts.
The challenge with Media Queries today is that more and more devices emerge with varying screen sizes and hardware capabilities similar to desktops, leading them to browse almost like desktop machines. Take the iPhone X as an example: its display quality is superb and its browser renders pages just like a typical desktop browser.
In that case, there’s no need to prepare a layout and CSS specifically for handheld media types on the iPhone—since, although it’s a handheld, it doesn’t behave like one. Yet it also doesn’t behave exactly like a desktop. Even though Safari’s rendering engine is identical to the desktop version, the user’s behavior and navigation patterns still differ. We end up in a middle ground: we can’t provide a completely separate CSS for handheld, nor can we rely solely on a desktop (screen) stylesheet.
Below is how you would define which stylesheet rules should be loaded:
<style>
@media screen and (max-width:1024px) {
.small-resolution { display: none; }
}
.small-resolution { display: block; }
</style>
Optionally, you can create a separate .css file and host it either on your own server or via my startup’s CDN solution, Blenner SmartCDN. Then, include it in your HTML’s metadata section like this:
<link rel=”stylesheet” href=”URL_OF_YOUR_CSS_FILE”>
Once your CSS file is in place, you simply “call” the class wherever you need the responsive behavior. For example, to apply it to an image wrapped in a custom tag named “C”:
<c class=”small-resolution”>
<img src=”IMAGE_URL” alt=”DESCRIPTION” id=”OPTIONAL_ADDITIONAL_ID”>
</c>
Hope this helps! 😀
Leave your comments below and share with your friends!
