У меня есть несколько файлов PDF, которые были преобразованы в HTML. Я полностью понимаю, что это не идеально, но это не то, что я могу изменить.
Проблема в том, что он размещает контент в очень специфических точках, что нарушает мобильность.
Типичный HTML будет выглядеть так:
<div class="pc pc1 w0 h0"> <div class="t m0 x0 h2 y1 ff1 fs0 fc0 sc0 ls0 ws0">Text</div> </div> И CSS-файл выглядит так:
@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;} }
Можно ли каким-то образом сделать его масштабным? Я даже был бы счастлив (-я), если бы мог применить медиа-запрос, чтобы уменьшить все размеры на 20%.
Как видно из опубликованного CSS, используется position: absolute , поэтому я не вижу другого решения (пока), чем использование transform: scale() (если не переписывать html, конечно)
Используя медиа-запрос, он может выглядеть так:
.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>