HTML5 / CSS3 медиа-запрос - PullRequest
Новая
       5

HTML5 / CSS3 медиа-запрос

0 голосов
/ 10 января 2020

Я создал новый html документ, содержащий только PDF-файл. Код: 

<embed src="impressum.pdf" width="1200" height="900" alt="pdf" pluginspage="http://www.adobe.com/products/acrobat/readstep2.html">

Работает отлично, но моя проблема в том, что я не знаю, как отформатировать его для вида смартфона. Я начал с обычного кода Media Query в css и не знаю, что мне туда добавить: 

@media screen and (max-width: 800px) {  
}

Ответы [ 2 ]

1 голос
/ 10 января 2020

Вы можете просто установить высоту и с помощью 100% для встраивания и установить высоту тела на 100vh: 

body {
        height: 100vh;
        overflow: hidden;
    }

Таким образом, PDF всегда будет иметь правильную ширину, нет независимо от того, на каком устройстве вы его открываете. 

<body>
    <embed src="impressum.pdf" width="100%" height="100%" alt="pdf" pluginspage="http://www.adobe.com/products/acrobat/readstep2.html">
</body>
1 голос
/ 10 января 2020

Вы можете обернуть ваш встроенный объект в div, а затем оформить его в стиле height и width. Помогает ли это в вашей проблеме?

HTML

  <div class="pdf-wrapper">
        <object dtype="application/pdf" width="100%" height="100%">
            <embed src="./test.pdf" type="application/pdf"  width="100%" height="100%" />
        </object>
    </div>

CSS

 .pdf-wrapper{
     width:100vw;
     height:100vh;
   }

@media screen and (max-width: 800px) {
     .pdf-wrapper{
      height:40vh;
     }
...