React中如何为styled component添加不同图片并实现移动端响应式

按以下优先级排查验证即可解决多张图片渲染崩溃的问题：

1. 确认所有图片资源已正确导入 #

90%的单张正常多张崩溃的原因是仅导入了第一张图s1，其余s2到s9没有在文件头部引入，直接引用未定义变量会触发React运行时错误。
请确保文件开头补全所有图片的导入语句，示例：

import s1 from './你的图片路径/s1.png'
import s2 from './你的图片路径/s2.png'
// 依次补全s3到s9的导入语句

2. 修复JSX根节点缺失问题 #

React要求组件返回的JSX必须有唯一根节点，你当前的代码是多个平级的Storycontentcardcontainer直接暴露，没有外层包裹，会直接触发渲染错误。
可以用空标签（Fragment）把所有内容包起来：

<>
{/* 你原来所有的Storycontentcardcontainer代码都放在这个标签内部 */}
</>

3. 优化冗余代码避免手动复制出错 #

你当前所有卡片结构完全一致，手动复制9次极易出现标签闭合错误、属性漏写问题，建议用数组遍历渲染：

// 先把所有图片和对应文案放到数组里，后续修改也更方便
const storyList = [
  { img: s1, desc: '在被摧毁的日本燃烧城市中生存，这里失控的从者正在四处猎杀其他从者和幸存的人类' },
  { img: s2, desc: '对应s2的描述文案' },
  // 依次补全s3到s9的配置项
]

// 渲染部分直接遍历即可
<>
  {storyList.map((item, index) => (
    <Storycontentcardcontainer key={index}>
      <Storycontentcard>
        <Storycontentheader src={item.img} alt="Fuyuki singularity logo" />
        <Storycontent>{item.desc}</Storycontent>
      </Storycontentcard>
    </Storycontentcardcontainer>
  ))}
</>

4. 修复样式潜在异常 #

你当前给Storycontentcard设置了height: 20%，百分比高度需要父元素有明确的高度值，多张卡片渲染时会因为高度计算异常出现布局错乱甚至渲染崩溃，建议改成固定高度或者最小高度：

const Storycontentcard = styled.div`
    overflow: auto;
    background: -webkit-linear-gradient(#C7D3DC,#5B798E);  
    background: -moz-linear-gradient(#C7D3DC,#5B798E);  
    background: -o-linear-gradient(#C7D3DC,#5B798E);  
    background: linear-gradient(#C7D3DC,#5B798E);
    width: 70vw;
    margin: 10px;
    min-height: 200px; /* 替换原来的height:20%，可根据你的需求调整数值 */
`

你原本写的响应式媒体查询逻辑没有问题，修复上述问题后移动端适配效果可以正常生效。

内容的提问来源于stack exchange，提问作者Randy Steward