-1

I'm learning to create a website and I'm trying to make it look slightly different depending on the viewer's screen resolution. Maybe find out if they're viewing the website on a phone so that I can change the layout of the website to a vertical layout or if they're using a laptop and change the layout of the website to a horizontal layout. Perhaps if the ratio of the vertical resolution over the horizontal resolution becomes greater than a certain limit then the website changes its layout? Any suggestions on how I can do that or other ways to make the website look different based on the screen that it is being viewed on?

Ilya
  • 44
  • 6

3 Answers3

2

You have to use media queries for this:

@media (max-width: 500px) {
  .root {
    background-color: lightblue;
  }
}
<div class="root">Hi, i am root</div>

Or you can use javascript's Window: resize event for this task like this:

addEventListener('resize', (event) => {
  if (window.height > 768)
    console.log("You are on desktop")

  else
    console.log("You are on tablet/mobile")
});

Working Fiddle

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Ahmad Habib
  • 2,053
  • 1
  • 13
  • 28
2

you can use a media query inside your css files to adjust styles according to the screens resolution. An example would look like this:

// css.file
@media only screen and (max-width: 768px) {
  body {
    background-color: #000;
    color: #fff
  }
}

you can find more info about this topic in the mozilla webdocs here or in the links mentioned in the other answer:

https://developer.mozilla.org/en-US/docs/Web/API/CSSMediaRule

In plain javascript you can do something like mentioned in this answer:

https://stackoverflow.com/a/2242100/11895459

Fiehra
  • 659
  • 6
  • 23
1

There is multiple ways to do that.

The easieast Media Query: https://www.w3schools.com/css/css_rwd_mediaqueries.asp

The next by JS: How to detect a mobile device using jQuery

Schwarz Developing
  • 215
  • 1
  • 8