Tips for identifying different screen sizes, such as distinguishing between a spacious desktop monitor and a compact smartphone display, using CSS media queries

Imagine you have two screens:

  • they have the same resolution
  • they are oriented in the same way
  • but they have different physical sizes

For example:

https://i.sstatic.net/OcMnt.png

How can I style for different screen sizes using CSS media queries?

For instance:

  • on a 1920px wide display, long lines of text extending edge-to-edge may be difficult to read, prompting the need for padding, margin, or spacing to make it more legible
  • however, on another 1920px wide display, having text go edge-to-edge might be preferred

Bonus Talk

Don't try to rely on User-Agent strings:

Also, avoid diverting from the question by discussing orientation, whether the screen supports touch input or not, or using the handheld attribute

The focus is on utilizing CSS to design a page based on the (physical) size of the screen.

Bonus Reads

  • Determining mobile device usage through browsers (iOS/Android) (relies on resolution)
  • Targeting desktop, tablet, and mobile with Media Queries (focuses on resolution)
  • Constructing a Mobile Website
  • Using CSS3 Media Queries to Establish a Mobile Version
  • Implementing Responsive Design with Media Queries in 2018
  • Determine the ideal media query breakpoints to use (based on resolution) ("breakpoints" refer to "pixels")
  • Media Query for Large Desktop Displays
  • CSS media queries for handheld and larger browser screens
  • Media query focused on screen size rather than resolution
cssmedia-queries

Answer №1

One common approach for responsive web design is to utilize media queries with min-width or max-width in order to adjust the display based on the screen size. This method relies on a <meta> tag that instructs the browser to consider the physical width of the display as the viewport width, rather than the resolution.

For instance:

<meta name="viewport" content="width=device-width"/>

and

@media all and (max-width: 600px)
{
    /*Insert your styles for mobile here*/
}

Although this solution may not cater perfectly to touch interfaces on tablets or larger mobile screens, it serves as a good starting point for developing mobile-friendly interfaces.

It's worth noting that this approach is best suited for displays that apply scaling. While most modern mobile devices use scaling such as 2x/3x on iOS and xhdpi/xxhdpi on Android, it should also be compatible with Windows scaling, although further testing would be required to confirm this.

Furthermore, these media queries are versatile and can accept various CSS units, allowing for flexibility in design choices. For example, you could even specify dimensions in inches if desired.

@media all and (max-width: 3.5in) { /* ... */ }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I position the label at the top?

Visit this jsfiddle link Is it possible to align the label on top and select at the bottom within the given HTML structure as shown in the picture? <div class="col"> <label for="foo">Select:</label> <select id="foo" name="select"> ...

css

Adjust the maximum and minimum values on a dual thumb slider

I have implemented a two thumb range slider to define the maximum and minimum values. However, I recently discovered that it is possible for the thumbs to cross over each other - the max value can exceed the min value and vice versa. I am looking for a s ...

javascripthtmljquerycss

IMAGE CARDS WITH BOOTSTRAP 5

I created a bootstrap card with an image on the right side, but it doesn't fill the entire space. Below is the image of my bootstrap card: https://i.sstatic.net/k7xuT.png This is the code for my card: {% for book in thesis_details %} ...

cssbootstrap-5

Conceal series of images with a click; reveal them again once completed

I'm working on a layout featuring overlapping images and I'm looking to create a hide-and-seek effect where the images are hidden one by one when clicked, and then shown in reverse order until all of them are visible again – essentially creatin ...

htmljquerycsshideshow

What is the best way to implement CSS properties on Material UI components?

I've recently started exploring Material UI, but I'm having trouble understanding how the spacing properties function. I'm trying to utilize the "spacing" feature for various elements, but it appears that it only works for "Box" components a ...

javascriptcssreactjsmaterial-ui

What is the best way to prevent the content within a div from being obscured by a sticky element affixed to the bottom of the div?

I am struggling with ensuring that the content in my wrapper does not get cut off by the "view more" div attached to the bottom. The default wrapper cuts off the children, and even when expanded, the issue persists due to CSS problems. In React, the gener ...

javascriptcssreactjsstyled-components

Creating HTML forms allows for images to be used as checkboxes

I'm attempting to convert an HTML forms checkbox into a clickable image that changes its appearance when clicked. Additionally, I need it to be capable of storing one or two variables (specifically for generating them with row and column values) and f ...

htmlcssformscheckbox

Struggling to make the height attribute work in Bootstrap 4 alpha

I'm currently in the process of learning Bootstrap, and I've encountered an issue with the height attribute in version 4 (for example: "row h-25") not functioning properly. I attempted to add another CSS rule that sets the height of "container-f ...

htmlcssvisual-studiofrontendbootstrap-4

Customize cursor using CSS

I have a div with overflow: hidden that I am making scrollable by allowing the user to click and drag the background. There are links and buttons within this space. Here is the CSS I am using for this: #div-grabscroll { cursor: url(../img/op ...

javascriptcsshtmlcursor

Arranging three section elements side by side

I have encountered an issue where I have 3 consecutive section tags in a row, but when applying margin to them, the last section tag moves to the next line instead of staying on the same line. I attempted using the float:left and display:inline properties ...

htmlcssbootstrap-4twitter-bootstrap-4-beta

Mobile Image Sizing with Bootstrap 4 Cards

I am currently developing a responsive web application using Bootstrap 4 and incorporating cards with images on one of the pages. The layout functions properly when resizing the window on desktop view; however, upon viewing it on mobile devices, I noticed ...

htmlcssbootstrap-4

Customize the dropdown width of the typeahead feature in ng-bootstrap

I recently started using the ng-bootstrap Typeahead component and so far, I am quite satisfied with it. One thing I am trying to figure out is how to make the width of the dropdown items in sync with the input field width. Currently, the default behavior ...

cssangularbootstrap-4ng-bootstrap

The circle border-radius is refusing to slide to the center of the screen

I'm having trouble moving the top circle to the center, while the bottom three circles are displaying correctly. I need to adjust the text and icon placement in the circles to be centered. Additionally, I want the layout to be responsive across differ ...

htmlcssbootstrap-4

JavaScript CheckBox Color Change Not Functioning

Hello, I am currently experimenting with the checkAll function. When I click on the checkAll checkbox, it should select all rows and change their background color accordingly. Below is the JavaScript code I am using: function checkAll(objRef) { v ...

javascripthtmlcssgridview

The challenge of using <p></p> tags with Bootstrap 4, HTML, and CSS

Having trouble separating multiple paragraphs within a division? Let's take a look at the code snippet in question: <div class="row"> <div class="col-md-12 d-flex justify-content-center padding-top"> <p>IMPORTANT LEGAL D ...

htmlcsstwitter-bootstrapbootstrap-4

Create a layout using jquery-tokeninput

Currently, my project incorporates jQuery-tokenInput and everything is functioning properly. However, I now have the desire to customize the design of the results that are displayed. For example, I want to adjust the width or make any other design changes. ...

jquerycssjquery-tokeninput

Incomplete Rotation CSS Animation

I am attempting to create a horizontal spinning image using only CSS3. Check out my webpage here: You can find the CSS file here: www.csupomona.edu/~lannguyen/ISSM_WEB/css/main.css The code for calling the spin effect is at the top, with the actual imp ...

cssanimation

How to customize the appearance of an element within a shadow DOM

I am currently implementing a custom CSS style over an application without the ability to modify its code. Initially, the DOM structure looked like this: <div class="foo"> <div class="bar"></div> </div> and I ...

cssshadow-dom

How come my Bootstrap container columns are not remaining evenly divided into four parts?

Struggling to split a section of my project into 4 equal parts using the bootstrap col attribute. Unfortunately, every time I try, the last container ends up breaking and shifting below the other 3, creating an unsightly code layout. index.html <sec ...

htmlcssbootstrap-5

Problem with displaying fonts in web browsers

I decided to create a React App using the Material UI library, but I wanted to customize it by changing the default font from Roboto to Overpass. I successfully imported the fonts using their library. <link rel="preconnect" href="https:// ...

htmlcssreactjsmaterial-uigoogle-fonts