How to account for different resolutions?

[NacreousDreams]

  Hey everyone, I've returned again! I'm gonna try and revamp the whooole site for this rework, and it's gonna be hella! I'm drawing art, like, traditionally, for it, it's gonna be so cool

  Of course, that means I have to worry about screen resolution, right? I wanna make sure it looks nice at most sizes, cause even ignoring phones, different PC users have different monitor sizes and resolutions.

  What advice would you all have to help with that?

- Nacre

[candycanearter07]

Hi! I have 2.5 tips that I used on my own site to make it work.

1. use vh/vw/vmin/vmax and/or percentages. the v* units are special units that correspond to either the height (vh), width (vw), the smaller of the two (vmin), or the bigger of the two (vmax). 1 vw corresponds to 1% of the window size, for example. Percentage width/heights are also useful, obviously.

2. You can define special rules to be used when the screen width is below a certain size using @media (max-width: 2px). The syntax is a bit weird, though, since you have to put all the rules inside of the brackets like so:

Code

.main { width: 100%; }

@media (max-width: 720px)
{
.main { width: 80%; }
}

This strategy is also useful for

2.5: seperate grid template area rule for smaller screen size! This works best if you use grid as the main organizer for your site, but you can always define new grid template rules to fit a smaller screen size.

[JINSBEK]

Hey there! I have two ways to deal with this, a "properly engineered" way, and a "lazy ad-hoc way" (works but the HTML might be ugly to look at and deal with.

The lazy ad-hoc way, which I love because it lets me push something right away, is by defining a few classes in CSS that "toggle" on/off elements depending on the screen width.

Code

/*In-line contextual images on phones*/
@media only screen and (max-width: 600px) {
    .context_tablet {
        display: none;}
    .context_desktop {
        display: none;}
    }

/*In-line contextual images on tablets*/
@media only screen and (min-width: 601px) and (max-width: 1100px) {
    .context_phone {
        display: none;}
    .context_desktop {
        display: none;}
    }

/*In-line contextual images on desktops*/
@media only screen and (min-width: 1101px) {
    .context_phone {
        display: none;}
    .context_tablet {
        display: none;}
    }

For example, if you give a <div> the "context_desktop" class, it will only be visible on Desktops (viewports with a minimum width of 1101 px) and not appear on tablets or phones at all. This does mean you'll have to create three divs with the different classes if you want something to appear on all three types of viewports, but this is ideal for page-specific use cases, e.g. you have a specific scraps pages where you do all sorts of unique layering and transformation of images depending on viewport.

The more "properly engineered" way would be to define your CSS within the @media brackets. W3 Schools gives an example of changing the background colour based on the screen width, with light blue being for the smallest screens, light green for anything between 400px and 799px wide, and lavender for screens 800px and above:

Code

body {
  background-color: lightblue;
}

@media screen and (min-width: 400px) {
  body {
    background-color: lightgreen;
  }
}

@media screen and (min-width: 800px) {
  body {
    background-color: lavender;
  }
}