Come rilevare dynamicmente la dimensione del browser nella modifica della dimensione?

Ho avuto problemi con il ridimensionamento … automatico … dinamico … adattivo …. ecc …

Ho visto siti web dove, come si fa la finestra più piccola ad es. prendi un angolo e riduci la finestra, i caratteri diventano più grandi, le cose si muovono …

Ho la parte in movimento, non so come rilevare dynamicmente la finestra del browser … è una cosa rinfrescante o? …

Come puoi vedere qui, queste cose di movimento che ho usato funzionano solo con l’aggiornamento dello schermo, in particolare ho un tablet, e se visito la pagina in orizzontale, non si applica; se lo ruoto e poi lo aggiorno, si applica.

 var x = screen.width; var y = screen.height; function scale() { var z = x/y; if (z<1) { document.getElementById('header').style.width = "100%"; document.getElementById('menu').style.marginLeft = "0"; document.getElementById('menu').style.width = "20%"; document.getElementById('menu2').style.width = "30%"; document.getElementById('menu3').style.width = "20%"; document.getElementById('menu4').style.width = "20%"; document.getElementById('properties').style.width = "30%"; document.getElementById('properties').style.marginLeft = "35%"; } } scale();  

Questo codice è fornito da qualcuno di Stack Overflow per quanto riguarda i font, immagino che potrebbe essere simile alla direzione che sto seguendo

     $( window ).resize(function() { $( "#container" ).css("font-size",function() { var value = $( "#container" ).css("width"); console.log(parseInt(value)/24 + "pt"); return parseInt(value)/24 + "pt"; }) ; }); 

    Quale parte è dynamic?

    Questo console.log, non l’ho mai usato prima

    Qualsiasi aiuto sarebbe molto apprezzato

    Dopo aver letto la tua domanda e i tuoi commenti, sono ancora un po ‘confuso, ma forse questo aiuterà.

    Innanzitutto, impara a utilizzare gli strumenti di sviluppo di Chrome . Sono fantastici ! La cosa più importante che devi sapere per ora è questa:

    Per utilizzare console.log :

    1. Nel tuo JavaScript, scrivi una riga come console.log('Hello World!');
    2. Apri quella pagina in Google Chrome
    3. Premere F12 per commutare (Apri / Chiudi) il DevTools
    4. Probabilmente sarà nella scheda Resources , questo è un buon posto per controllare tutte le risorse sono caricate, ma non quello che stai cercando.
    5. Fare clic sulla scheda con etichetta Console
    6. Viola! Dovresti vedere Hello World! se quella linea di JS è stata eseguita.
    7. Benvenuto in awesomsauce!

    Ora per una visualizzazione più facile per il test di ridimensionamento, prova il seguente JavaScript jQuery avanzato: (commentato per le spiegazioni, rimuovi i commenti se lo desideri)

     // This first line is the same as JavaScript's `document.ready = function() {} // This simply starts your code running as soon as the document is loaded and ready to go // It's safe to use in  or in  and will always ensure your JS is running with the page load $(function() { // Here I use .on instead of direct refence to the event as this is just good practice4 with jQuery // You'll later learn you can use this with prewritten methods to "turn on/off" methods asigned to specific events $(window).on('resize', function(e) { // Little JS Tip, No need to write `var` 50thousand times. Just use a comma and write your new variable var x = $(this).width(), // variable for window width assigned to `x` y = $(this).height(), // variable for window height assigned to `y` z = x/y, // your conversion you were using in the code you have in your question, there's plenty of different ways to test for size changes, do some Googling on "aspect ratio" as it's usually best way to go // this next line is a little complicated // It's assining a variable based on result of an `inline if statement` // What it says: if (element with id 'myOutput' exist) then assign that element and empty it of all it's HTML, else build the element using jQuery's element object method and append it to the  // jQuery's element object building is ez, just remember it like this: jQuery("", { object of attributes }) output = $('#myOutput').length ? $('#myOutput').empty() : $('
    ', { id: 'myOutput', style: 'background: #ffa; padding: 10px; position: fixed; right: 30px; top: 30px; z-index: 999;' }).appendTo('body'), // the following lines build the inner HTML for showing the results of our window deminsions pX = $('

    ', { text: 'x: '+x }).appendTo(output), pY = $('

    ', { text: 'y: '+y }).appendTo(output), pZ = $('

    ', { text: 'z: '+z.toFixed(5) }).appendTo(output); }); })

    Se stai usando Google Chrome adesso, puoi testarlo subito! Basta premere F12 e fare clic sulla scheda Console . Copia il codice ridotto qui sotto e poi fai clic su nella Console . Dovresti vedere un cursore lampeggiante pronto per l’input. Incolla il codice e premi invio! Quindi ridimensiona la finestra e guarda in alto a destra! * note in alto a destra probabilmente vedrai la scatola delle dimensioni di Chrome. Il mio ha uno sfondo giallo

    Codice miniato:

     $(function(){$(window).on("resize",function(a){a=$(this).width();var c=$(this).height(),d=a/c,b=$("#myOutput").length?$("#myOutput").empty():$("
    ",{id:"myOutput",style:"background: #ffa; padding: 10px; position: fixed; right: 30px; top: 30px; z-index: 999;"}).appendTo("body");$("

    ",{text:"x: "+a}).appendTo(b);$("

    ",{text:"y: "+c}).appendTo(b);$("

    ",{text:"z: "+d.toFixed(5)}).appendTo(b)})});