JQuery: Come rilevare la width mobile e cambiare il mio css è con l'utilizzo di jquery?

Come rilevare la width mobile e modificare la mia css alla sua width di window corrente utilizzando jquery?

Per esempio

.page { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; float: left; margin: 40px 0; max-width: 480px; min-height: 720px; height: auto; min-width: 360px; padding: 10px; width: 100%; } 

e poi ho questa function ma non sono sicuro se sta funzionando.

 function responsiveFn() { width = $(window).width(); document.getElementById('widthID').innerHTML = width; jQuery('.page').css({ max-width: width }); } 

Grazie per la risposta in anticipo! 🙂

Non c'è bisogno di utilizzare Javascript / jQuery, controllare i punti sotto.

suggerimenti:

  1. Utilizza la width in percentuali, quindi, quando ridimensionata, verrà automaticamente regolata
  2. Utilizza media queries per gli stili di risoluzione
  3. Quando si imposta le properties; da Javascript, utilizzare le virgolette intorno al nome della properties; o utilizzare la camelcase. Ex. maxWidth, o 'max-width'

Esempio:

 @media (max-width: 600px) { .page { width: 200px; } } 
  1. Creare un file CSS separato per varie risoluzioni e caricarle per tali risoluzioni

Esempio:

 <!-- CSS media query on a link element --> <link rel="stylesheet" media="(max-width: 600px)" href="mobile.css" /> 

Aggiornare

Se vuoi ancora utilizzare Javascript, chiamate la tua function sull'evento di ridimensionamento della window.

 window.onresize = responsiveFn; 

Utilizza la max-width virgolette

 jQuery('.page').css('max-width', width); 

Utilizza la query multimediale per tutti gli elementi secondo l'esempio del tuo requisito

 @media screen and (min-width: 320px) and (max-width:580px) { .btn-default { float: none; max-width: 100%;} .textcenter { text-align: center; } } 

Poiché la class button e textcenter verranno modificati con la properties; di cui sopra

Grazie