Cargo 网站仅针对移动设备定制 css

Question

我的网站在桌面上看起来不错，但在移动版本上，标题的位置很奇怪。如何更改标题字体大小和位置而不更改桌面版本。

而且我的图像在桌面上看起来不错，但在移动版本上都挤在一起，如何自定义 css 来控制移动版本上的图像大小？

我尝试更改CSS，但它也更改了桌面版本的大小

Answer 1

您可以使用

@media (min-width: 768px)

轻松确定桌面和移动设备的 css 样式不同

尝试标题的 CSS：

/* Define styles for desktop */
@media (min-width: 768px) {
.header {
    /* Desktop styles */
    font-size: 24px; /* Example font size */
    /* Add any other desktop-specific styles */
  }
}

/* Define styles for mobile */
@media (max-width: 767px) {
.header {
    /* Mobile styles */
    font-size: 16px; /* Example 
font size */
    /* Add any other mobile- specific styles */
  }
}

将 .header 替换为标题元素的适当类或 ID。

要自定义移动设备的图像尺寸，请尝试：

/* Define styles for desktop */
.image {
  width: 200px; /* Example width */
  height: auto; /* Maintain aspect ratio */
  /* Add any other desktop-specific styles */
}

/* Define styles for mobile */
@media (max-width: 767px) {
  .image {
      width: 100px; /* Example width for mobile */
      /* Adjust as needed */
  }
}

将 .image 替换为图像元素的适当类或选择器，并给出所需的宽度大小。