省略四开网站移动版的图片

Question

我有一个用 r 构建的四开本网站。该网站可以工作，但是我在侧边栏中包含了很大的图像，当我在移动设备上查看它时，这些图像位于我的文本前面。有没有办法在移动设备上查看时省略图像？

一页的 .

qmd

文件如下：

---
title: "Page1"
---

## Header

::: column-margin
![](images/image_1.JPG)
:::

*Text text text text

*Text text text text

*Text

![](images/image_2.jpg){fig-align="left"}

我的

yml

文件如下：

project:
  type: website
  output-dir: docs

website:
  title: "Title"
  navbar:
    right:
      - href: index.qmd
        text: Home
      - page1.qmd
sidebar:
    title: "Test Website"
    style: docked
    collapse-level: 2
    contents:
      - section: ""
        contents:
          - "index.qmd"
format:
  html:
    theme: Zephyr
    embed-resources: true
    toc: true
    toc-expand: FALSE
    toc-depth: 4
    toc-location: right
    toc-collapsed: false
    grid:
      sidebar-width: 300px
      body-width: 1000px
      margin-width: 500px
      gutter-width: 1.5rem

editor: visual

我的

index.qmd

很简单：

---
title: ""
about: 
  template: solana
---

有没有办法让

column-margin

中的图像在移动设备上查看时不出现？或者至少可以将它们移动到页面的最末尾，而不是在移动设备上查看时移动到文本前面吗？

Answer 1

1 将您的

page1.qmd

更改为：

---
title: "Page1"
format:
  html:
    css: styles.css
---
## Header    
::: column-margin
![](images/image_1.JPG)
:::    
*Text text text text    
*Text text text text    
*Text    
![](images/image_2.jpg){fig-align="left"}

2 打开项目文件夹中的

style.css

：

并粘贴以下CSS：

/* css styles */
@media screen and (max-width: 767px) {
    .column-margin {
      display: none !important;
    }
  }

---

结果 侧边栏图片（image_1）在移动设备上将被省略：