如何在“我的”页面中应用媒体查询

Question

我试图创建一个旋转卡片滑块，它的工作，但当我看到它在移动或平板模式下，它不工作，我的意思是卡是相互重叠的，我想显示响应卡时，我查看移动或平板模式，请告诉我媒体查询我的js文件。

如果您有任何问题，请随意提问。

card.js

这是我设计卡片的card.js文件

import React from 'react'
import './Card.css';

const Card = ({title,names,description,images}) => {
    return (
        <div >
            <div class="card h-200" style={{ width: '20rem'}}>
                <img class="card-img-top" src={images} alt="Card image cap" />
                <div class="card-body">
                    <h5 class="card-title">{title}</h5>
                    <p class="card-text">{description}</p>
                    <a href="#">{names} <i class="fal fa-chevron-right"></i></a>
                </div>
            </div>
        </div>
    )
}
export default Card;

card.css

这是我写css的card.css文件

.card-body{
    margin-top: 20px;
}

.card{
    padding: 15px;
    border-radius: 1px 15px 15px 15px;
}

.card-img-top {
    width: 100%;
    height: 15vw;
    object-fit: cover;
}

.card {
    margin: 0 auto; /* Added */
    float: none; /* Added */
    margin-bottom: 10px; /* Added */
}

cards.js

这是我导入卡文件的cards.js文件

 import React from 'react';
    import './Cards.css';
    import Card from './Card';
    import { Swiper, SwiperSlide } from 'swiper/react';
    import SwiperCore, { Navigation, Pagination, Scrollbar, A11y } from 'swiper';
    
    // Import Swiper styles
    import 'swiper/swiper.scss';
    import 'swiper/components/navigation/navigation.scss';
    import 'swiper/components/pagination/pagination.scss';
    import 'swiper/components/scrollbar/scrollbar.scss';
    
    
    SwiperCore.use([Navigation, Pagination, Scrollbar, A11y]);

var swiper = new Swiper('.swiper', {
  slidesPerView: 4,
  spaceBetween: 50,
});


var swiper = new Swiper('.swiper', {
  // Default parameters
  slidesPerView: 4,
  spaceBetween: 50,
  // Responsive breakpoints
  breakpoints: {
      // when window width is <= 499px
      499: {
          slidesPerView: 1,
          spaceBetweenSlides: 50
      },
      // when window width is <= 999px
      999: {
          slidesPerView: 2,
          spaceBetweenSlides: 50
      }
  }
});
    
    
    const Cards = () => {
      return (
        <Swiper
          spaceBetween={50}
          slidesPerView={4}
          navigation
          pagination={{ clickable: true }}
          scrollbar={{ draggable: true }}
          onSlideChange={() => console.log('slide change')}
          onSwiper={(swiper) => console.log(swiper)}
        >
          <SwiperSlide className="cards1"><Card images="https://mspoweruser.com/wp-content/uploads/2019/02/Skype-Mobile-call-experience.jpg" description="Meet Now is now available in Windows 10 taskbar so you can meet with a simple click." names="Learn more " title="Meet Now, Right Now " /></SwiperSlide>
          <SwiperSlide className="cards1"><Card images="https://www.microsoft.com/en-us/microsoft-365/blog/wp-content/uploads/2014/12/Skye-Lync-video.png" description="Experience HD one to one or group video calling—now with call reactions." title="Video calling for 100 people " names="Explore video calls"/></SwiperSlide>
          <SwiperSlide className="cards1"><Card images="https://img.dtcn.com/image/digitaltrends/skype-50-people-1200x772.jpg" description="Call landlines and mobiles from anywhere in the world at great low rates using Skype." names="See our rates" title="Use Skype to call phones "/></SwiperSlide>
          <SwiperSlide className="cards1"><Card images="https://cdn0.tnwcdn.com/wp-content/blogs.dir/1/files/2014/11/unnamed3-730x456.png" description="Read the words that are spoken during an audio or video call." names="How to set subtitles" title="Live subtitles "/></SwiperSlide>
          <SwiperSlide className="cards1"><Card images="https://mspoweruser.com/wp-content/uploads/2019/02/Skype-Mobile-call-experience.jpg" description="Meet Now is now available in Windows 10 taskbar so you can meet with a simple click." names="Learn more " title="Meet Now, Right Now " /></SwiperSlide>
          <SwiperSlide className="cards1"><Card images="https://www.microsoft.com/en-us/microsoft-365/blog/wp-content/uploads/2014/12/Skye-Lync-video.png" description="Experience HD one to one or group video calling—now with call reactions." title="Video calling for 100 people " names="Explore video calls"/></SwiperSlide>
          <SwiperSlide className="cards1"><Card images="https://img.dtcn.com/image/digitaltrends/skype-50-people-1200x772.jpg" description="Call landlines and mobiles from anywhere in the world at great low rates using Skype." names="See our rates" title="Use Skype to call phones "/></SwiperSlide>
          <SwiperSlide className="cards1"><Card images="https://cdn0.tnwcdn.com/wp-content/blogs.dir/1/files/2014/11/unnamed3-730x456.png" description="Read the words that are spoken during an audio or video call." names="How to set subtitles" title="Live subtitles "/></SwiperSlide>
        </Swiper>
      );
    
    };
    export default Cards;

Answer 1

也许slidesPerView=的“自动”会好吗？试试看

Answer 2

所以你可以做这样的事

slidesPerView={Math.floor(document.body.clientWidth / cardWidth)}

它将计算出可以放置多少张卡片，并返回一个数字。