Usa trasformazioni CSS o javascript per ridimensionare un elemento per adattarlo dinamicamente al suo genitore

Question

Ho una pagina in cui ho una ruota di elementi <div>, l'intera ruota ruota quando si fa clic su un pulsante.

Ottengo questo effetto utilizzando le trasformazioni CSS, che sono di natura assoluta. Tuttavia la ruota è molto grande, sembra bella sul mio display HD, ma gli schermi più piccoli hanno i bordi tagliati. Non posso usare% width come avrei potuto con un layout normale, ciò di cui ho bisogno è ridimensionare l'intera pagina nello stesso modo in cui funzionano le funzioni di zoom della maggior parte dei browser.

Per quanto mi riguarda so che ctr + mouseWheel rimpicciolirà la pagina in modo da poter vedere l'intera pagina, tuttavia non posso pretendere che altri lo facciano.

So che posso utilizzare -browser-transform: scale(amt); su un div wrapper per ottenere l'effetto desiderato, tuttavia non riesco a trovare un modo per farlo dinamicamente. Se imposto la scala su .5 sarà .5, indipendentemente dallo schermo. Voglio che i bordi della ruota siano a pochi pixel dai bordi dello schermo su QUALSIASI schermo. So che le query sui media potrebbero essere utilizzate per aiutare il problema, ma mi lascerebbero con risultati non ideali o richiedere troppe query diverse. Ci deve essere un modo per modificare -browser-transform: scale(amt); a livello di programmazione o un altro modo per avere un controllo finito.

Qualche idea?

Answer 1

Hai provato a utilizzare le query multimediali in css per scegliere come target diversi schermi. per esempio, hai una query multimediale nel tuo file css che afferma che con una larghezza di 320 - 480 pixel, il div contenente questa ruota viene ridimensionato al 50%. Quindi a 481-768 pixel, il contenitore div è ridimensionato al 75%. e da 769 pixel in su, il div è ridimensionato al 100%.

Ciò dovrebbe aiutarti a realizzare il ridimensionamento dinamico desiderato con schermi di dimensioni diverse. Se desideri una demo, sarò lieto di farti vedere da un jsfiddle.