Question

我在向图像输入文本时遇到一些问题，我为图像使用了滑动滑块，并为此类文本创建了一个类，

@media screen and (min-width: 970px) {
  .swiper-slide .title {
    position: absolute;
    top: 240px;
    left: 10px;
    color: white;
    font-weight: bold;
    font-size:12pt;
    font-family: 'Mark Bold' !important;
  }

  .swiper-slide .medsos {
    position: absolute;
    top: 265px;
    left: 10px;
    color: white;
    font-size: 10pt;
  }

  .swiper-slide .role {
    position: absolute;
    top: 285px;
    left: 10px;
    color: white;
    font-size: 10pt;
  }
}

我将布局调整为971px

@media screen and (max-width: 971px)

我测试了971px，但是当我使用手机的大小时，它消失了，我必须对每个像素进行布局吗？从桌面版到移动版，如何使文本具有响应性并在相同的位置？

Answer 1

@media screen and (min-width: 970px) {
  .swiper-slide .title {
    position: absolute;
    top: 240px;
    left: 10px;
    color: white;
    font-weight: bold;
    font-size:12pt;
    font-family: 'Mark Bold' !important;
  }

  .swiper-slide .medsos {
    position: absolute;
    top: 265px;
    left: 10px;
    color: white;
    font-size: 10pt;
  }

  .swiper-slide .role {
    position: absolute;
    top: 285px;
    left: 10px;
    color: white;
    font-size: 10pt;
  }
}

@media screen and (max-width: 971px) {
 // put the style rules that you want to show in moblie devices
}

如何使用CSS制作文字并遵循图片大小

1 个答案: