React-pdf: 带有注释层的响应式 PDF

• [x] 我已阅读 README 中的文档
• [x] 我已经检查了示例和测试套件以查看现实生活中的基本实现
• [x] 我已经检查过这个问题是否还没有被问过

我想要达到什么目标？

我希望 PDF 文档随着屏幕尺寸的缩小而缩小，这样在移动设备上一切都看起来不错，同时仍然保持可点击链接的注释层。

描述我尝试过的解决方案

我有与这个未解决的问题几乎相同的问题： https :

我没有看到任何适用于我的设置的东西，我是否缺少使注释层也响应的东西？

我目前的代码：
_pdf.css:_

.react-pdf__Document {
   display: flex !important;
   justify-content: center !important;
}

.react-pdf__Page__canvas, .react-pdf__Page__annotations {
   max-width: 100% !important;
   height: auto !important;
}

.pdf-container {
   background-color: lightgray;
   padding: 1% 0 10px 0;
}

<strong i="22">@media</strong> screen and (min-width: 901px) and (max-width: 1600px) {
   .pdf-container {
      padding: 5% 0 10px 0;
   }
  }

  <strong i="23">@media</strong> screen and (min-width: 701px) and (max-width: 900px) {
   .pdf-container {
      padding: 10% 0 10px 0;
   }
  }

  <strong i="24">@media</strong> screen and (max-width: 700px) {
   .pdf-container {
      padding: 20% 0 10px 0;
   }
  }

_文章组件：_

 <React.Fragment>
    <div className="pdf-container">
        <Document
            file={this.props.article.pdfUrl}
            onLoadSuccess={this.onDocumentLoadSuccess}
        >
            <Page pageNumber={pageNumber} />
        </Document>
        <Grid fluid className="s-padding-t">
            <Row center="xs">
                <Col xs={12} sm={4} className="s-padding-b">
                    <button
                        type="button"
                        className="s-btn"
                        disabled={pageNumber <= 1}
                        onClick={this.previousPage}
                        >
                        <i className="fa fa-chevron-left"></i> Previous
                    </button>
                </Col>
                <Col xs={12} sm={4} className="s-padding-b">
                    <span>Page {pageNumber || (numPages ? 1 : '--')} of {numPages || '--'}</span>
                </Col>
                <Col xs={12} sm={4} className="s-padding-b">
                    <button
                        type="button"
                        className="s-btn"
                        disabled={pageNumber >= numPages}
                        onClick={this.nextPage}
                        >
                        Next <i className="fa fa-chevron-right"></i>
                    </button>
                </Col>
            </Row>
        </Grid>
    </div>
</React.Fragment>

环境

• 浏览器（如果适用）[例如 Chrome 57、Firefox 59]：Chrome 57
• React-PDF 版本：^4.1.0
• 反应版本：^16.13.1