Html5/CSS3 媒体查询

Question

我创建了一个新的 html 文档，其中只有一个 PDF 文件。代码：

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

它工作得很好，但我现在的问题是，我不知道如何为智能手机视图设置格式。我从 css 中的常规媒体查询代码开始，但不知道应该在其中放什么：

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

Answer 1

您可以将嵌入对象包装在 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;
     }

Answer 2

您只需将嵌入的高度和宽度设置为 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>

Html5/CSS3 媒体查询

Html5/CSS3 Media Query

html

css

media-queries