what is the mac width for desktop in media queries

Trying to use pixels for responsive behavior can bump into issues because its fixed, but theyre great if you have elements that should not be resized at all.

Beyond Media Queries: Using Newer HTML CSS Features for Responsive Designs.

In this article, well dig into a number tools (revolving around HTML and CSS) we have at the ready, from responsive images to relatively new CSS functions that work naturally whether we use media queries or not.

The reason is to ensure that we have the right image resolution to fit the right device, so we dont end up downloading really large and heavy images for smaller screens which could end up reducing the performance of a site.

As described earlier, instead of having one image (usually a large, high-resolution version) sent to all screen sizes and scaling it to the viewport width, we specify a set of images to serve in specific situations.

From there, we define the next-largest version of the image, picture-lg.png, and the size reduces in descending order until the smallest version, picture-sm.png.

Note that were still using media queries in this approach, but its the element itself that is driving the responsive behavior rather than defining breakpoints in the CSS.

This works if we have made the different images in proportion to each other (which we did).

This allows the browser to determine which version to download based on the screens pixel density in addition to the viewport size.

The element is required as the last child of the element, as a fallback option if none of the initial source tags matches.

Basically, that means we can display high quality pictures for screens that support higher resolutions and smaller versions at lower resolutions.

Its worth noting that, although mobile devices have small screens, theyre usually high resolution.

That means its probably not the best idea rely on resolution alone when determining which image to render.

It could result in serving large, high-resolution images to really small screens, which may not be the version we really want to display at such a small screen size.

And, in keeping with this idea, we can leverage CSS features, like the object-fit property which, when used with object-position, allows us to crop images for better focal points while maintaining the images aspect ratio.

This function proves really useful in terms of helping text sizes to properly scale across different screen sizes, like never letting fluid type to drop below a legible font size.

In this example, were telling the browser to never let an element with class.box go below 45 width or 600px, whichever is smallest based on the viewport width.

Conversely, if 45 computes to a value greater than 600px, then 600px will be used for the elements width.

It also accepts two values, but rather than specifying the smallest size for an element, were defining the largest it can get.

On the flip side, if 60 computes to a value smaller than 600px, then 600px will be used as the elements width.

You can see how clamp() can be used to make elements fluid without reaching for media queries.

Whats of interest to us is that px can be considered an absolute unit, while the rest are considered relative units.

It can be considered as the base, or root, unit that some other relative units use.

What Is The Mac Width For Desktop In Media Queries