CODEWITHSUNDEEP
htmlresizeautoresize
RyanHricenak
RyanHricenak

Reputation: 1

Is there a way in html to choose the page with the best resolution?

I created a website in html that looks good on a computer, but bad on a phone. I then created a separate page that looked good on phones, but bad on computers. Is there a way using html, css or javascript that I can have the website switch between the two html codes to best match the resolution of the user's device?

Upvotes: -1

Views: 25

Answers (1)

towednack
towednack

Reputation: 13

CSS has media queries ready for you to use. They are simple and efficient, so no Javascript is needed. Media queries will check the browser window's resolution and apply the correct style to the elements.

Everything is explained in detail here:

Using Media Queries

To use media queries in your website, link the HTML to a CSS code and, in addition to your default code, define what resolution width will trigger the style switch and what will change, and voilà.

Here is an example changing the font size of a paragraph for a screen with a resolution lower than 600px wide:

/* This is the default code. */
p {
    font-size: 10px;
}

/* And this is the code that will trigger at 600px or less. */
@media only screen and (max-width: 600px) {
    p {
        font-size: 6px;
    }
}

Upvotes: 0

Related Questions