How to change the face of the site when accessed by mobile?

Asked

Viewed 248 times

0

Situation:

I have a website with designer for large screens, I created a template for mobile, like an app. That’s why I want this template to be shown only when accessed by mobile, instead show the conventional.

How do I do this? Is there a command or tag for this in html or css?

  • Your question is too vague that can generate too many answers, you need to specify what your development environment is, what frameworks you’re using and if possible an index page as an example.

  • I’m using HTML/CSS/JSCRIPT/ (style1.css) on the desktop site, on mobile I want to use an adapted template (style2.css) . I just need to know how to access the site on the computer I use style1.css and when accessing on mobile I use style2.css.

1 answer

2

Use CSS media queries.

CSS Tricks has a repository with the media queries for the main screens.

Example of use:

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {

  /** Formatar o menu para telas de iPhone 4 e 4s **/
  nav {
    color: white;
    background-color: #333333;
    position: fixed;
    top: 0;
  }

}
  • @Mr.Iago, I advise the use of Media queries as well, because the concept of mobile has not yet been fully defined, although we all know how to differentiate. In this case, the media queries are more agile than a javascript check, and in addition, more useful in styling issues, since this is what CSS is for, and can reuse the queries to style other elements

Browser other questions tagged

You are not signed in. Login or sign up in order to post.