Dynamic redirect with CSS or SASS

Navigation
1

I have a website, and I'm working responsiveness on it. I have a mobile version, similar to a Web app, in a specific directory within the project. Currently when the screen resolution is less than 768px, it automatically redirects to the mobile site. So far so bad, when I reduce the browser window it does not redirect unless I refresh the page, because what redirects is a JQuery script that checks when the page loads what the resolution is.

The problem is that I need to check all the time so that I can redirect when the screen is smaller and already rendered. I thought of putting a media query for resolutions of at least 768 wide, but I did not find out how to redirect from the css itself, or call some script when this query is enabled.

I also accept as a solution some JQuery event triggered when the width is     

asked by anonymous 18.04.2018 / 19:53

2 answers

1

The correct is you treat the resolutions with CSS and not Jquery or JS, using Responsive design, The media queries are very used to solve this type of situation, not even have to have 2 folder a desktop another mobile is only to control the resolutions of the screen, follow the example: 

h1 {
  font-size: 3.0rem;
  color: red;
}

@media screen and (max-width: 990px) {
  h1 {
    font-size: 1.0rem;
    color: blue;
  }
}
<h1>Título</h1>
    
18.04.2018 / 20:06
1

CSS does not have the ability to redirect to another page, however you can use media queries in JavaScript with matchMedia. 

const handler = ({ matches }) => {
  if (matches)
    window.location = 'URL do seu site mobile'
}

const media = window.matchMedia('(max-width: 767px)')
media.addListener(handler)
handler(media)

References:

19.04.2018 / 13:51
Add Total Hours Overdue [duplicate] Remove duplicate characters in string if it is not a digraph