HTML'yi kopyalanan PDF dosyalarından ölçekleme

Question

HTML'ye dönüştürülmüş birkaç PDF dosyasına sahibim. Bunun ideal olmadığını anlıyorum, ama değiştirebileceğim bir şey değil. Sorun, içeriği mobil duyarlılığı bozan çok spesifik noktalara yerleştirmesidir.

Tipik bir HTML irade

şuna benzer: Böyle

<div class="pc pc1 w0 h0"> 

<div class="t m0 x0 h2 y1 ff1 fs0 fc0 sc0 ls0 ws0">Text</div> 
</div> 

Ve CSS dosyasını:

@media screen and (-webkit-min-device-pixel-ratio:0){ 
.sc_{-webkit-text-stroke:0px transparent;} 
.sc0{-webkit-text-stroke:0.015em transparent;text-shadow:none;} 
} 
.ws0{word-spacing:0.000000px;} 
.fc0{color:rgb(35,31,32);} 
.fs0{font-size:168.000000px;} 
.y0{bottom:781.000000px;} 
.h0{height:841.889770px;} 
.w0{width:595.275630px;} 
.x0{left:34.000000px;} 
} 

her nasılsa kadar ölçek yapmak mümkün mü? Boyutu% 20'ye düşürmek için bir medya sorgusu uygulayabilirsem bile mutlu olurdum.

Answer 1

Yayınlandıkça CSS'den göründüğü gibi, position: absolute kullanılır, bu nedenle Medya sorgusunun o kullanarak

(tabii html yeniden yazmak değilse) ben transform: scale() kullanmaktan daha başka bir çözüm (henüz) göremiyorum % 20 ölçeklenecektir dış çoğu div üzerinde `ölçeği (0.8): Sadece dönüşümü` ayarlayarak bu

.outer { 
 
    height: 500px; 
 
    width: 800px; 
 
    background: red; 
 
    transform-origin: 0 0; 
 
} 
 

 
@media screen and (max-width: 1000px) { 
 
    .outer { 
 
    transform: scale(0.9); 
 
    } 
 
} 
 
@media screen and (max-width: 900px) { 
 
    .outer { 
 
    transform: scale(0.8); 
 
    } 
 
} 
 
@media screen and (max-width: 800px) { 
 
    .outer { 
 
    transform: scale(0.7); 
 
    } 
 
} 
 
height: 400px; 
 
width: 600px; 
 
}

<div class="outer"></div>