将新闻提要显示为桌面的3列，移动vue的3行

Question

我正在尝试将新闻显示为移动视图中的三行，我使用Vueslickcarousel将新闻显示为桌面上的三列，我试图为不同的屏幕尺寸添加断点，但它不起作用（没有显示任何内容在手机上）

这是新闻发布的代码：

 <div class="md:col-span-12 col-span-12">
            <div>
              <div
                v-if="postloader"
                class="grid lg:grid-cols-3 grid-cols-1 gap-5"
              >
                <div v-for="n in 3" :key="n">
                  <v-skeleton-loader
                    type="card-avatar, article, actions"
                  ></v-skeleton-loader>
                </div>
              </div>
              <div v-if="!postloader">
                  <VueSlickCarousel v-bind="PostSettings">
                 
                    <div
                      v-for="post of posts.slice(0, 3)"
                      :key="post.slug"
                      class="slick-item"
                    >
                      <div class="md:px-4 px-0">
                        <nuxt-link
                          :to="`/news-updates/${post.slug}`"
                          class="ma-12"
                        >
                          <img
                            class="md:h-52 h-full w-full object-cover"
                            :src="
                              post._embedded['wp:featuredmedia']['0'].source_url
                            "
                            alt="News"
                          />
                          <h3 class="text-xl mt-4">
                            {{ post.title.rendered }}
                          </h3>
                          <p
                            class="excerpt mt-2"
                            v-html="post.excerpt.rendered.slice(0, 160)"
                          ></p>
                          <p class="block font-bold mt-6 hover:opacity-80">
                            Read More <v-icon>mdi-chevron-double-right</v-icon>
                          </p>
                        </nuxt-link>
                      </div>
                    </div>
              </VueSlickCarousel>
                
              </div>
            </div> 

这是我要用于断点的JS：

PostSettings: {
    arrows: false,
    dots: false,
    autoplay: false,
    slidesToShow: 3,
    slidesToScroll: 1,
    focusOnSelect: true,
    responsive: [
      {
        breakpoint: 1024,
        settings: {
          arrows: false,
          dots: false,
          autoplay: true,
          slidesToShow: 2,
          slidesToScroll: 1,
          focusOnSelect: true,
        },
      },
      {
        breakpoint: 600,
        settings: {
          arrows: false,
          dots: false,
          autoplay: true,
          slidesToShow: 1,
          slidesToScroll: 1,
          focusOnSelect: true,
        },
      },
      {
        breakpoint: 480,
        settings: {
          arrows: false,
          dots: false,
          autoplay: true,
          slidesToShow: 1,
          slidesToScroll: 1,
          focusOnSelect: true,
        },
      },
    ],
  },

如果删除标签，则在台式机上伸展的新闻显示并正确地在移动设备上（请参阅Loom），这些断点似乎不会 方法可以使用尾管以桌面/移动设备的不同格式显示新闻

为了工作，是否有一种 vid

Answer 1

这是您问题的答案

有没有一种方法可以使用尾风以桌面 /移动设备以不同的格式显示新闻？< / p>

是的，您可以使用屏幕断点。下面是当您在移动视图中具有6x2网格时的实现，桌面中的4x3和2x6在大型桌面视图中。

<script src="https://cdn.tailwindcss.com"></script>
<div class="p-5">
  <div class="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-6 gap-2">
      <div class="h-10 w-16 bg-pink-800 text-center text-white pt-2">01</div>
      <div class="h-10 w-16 bg-pink-800 text-center text-white pt-2">02</div>
      <div class="h-10 w-16 bg-pink-800 text-center text-white pt-2">03</div>
      <div class="h-10 w-16 bg-pink-800 text-center text-white pt-2">04</div>
      <div class="h-10 w-16 bg-pink-800 text-center text-white pt-2">05</div>
      <div class="h-10 w-16 bg-pink-800 text-center text-white pt-2">06</div>
      <div class="h-10 w-16 bg-pink-800 text-center text-white pt-2">07</div>
      <div class="h-10 w-16 bg-pink-800 text-center text-white pt-2">08</div>
      <div class="h-10 w-16 bg-pink-800 text-center text-white pt-2">09</div>
      <div class="h-10 w-16 bg-pink-800 text-center text-white pt-2">10</div>
      <div class="h-10 w-16 bg-pink-800 text-center text-white pt-2">11</div>
      <div class="h-10 w-16 bg-pink-800 text-center text-white pt-2">12</div>
  </div>
</div>