改下面的网页代码为响应式如可修改 电脑上要求居中显示2行3列,手机上要求6行1列.图片自适应宽度

改下面的网页代码为响应式如可修改 电脑上要求居中显示2行3列,手机上要求6行1列.图片自适应宽度 标题 body{width:100%;height:100%;font-family: "微软雅黑", serif;text-align: center;} img { max-width: 100%;-ms-interpolation-mode: bicubic;} img, object { max-width: 100%;} .stripes{height: 250px;width: 400px;float: left;margin: 4px; -webkit-background-size: 50px 50px; -moz-background-size: 50px 50px; background-size: 50px 50px; -moz-box-shadow: 1px 1px 8px gray; -webkit-box-shadow: 1px 1px 8px gray; box-shadow: 1px 1px 8px gray;} .angled{background-color: deeppink;} .angled-135{background-color: dodgerblue;} .picnic{background-color:turquoise;} .horizontal{background-color: lawngreen;} .vertical{background-color: orange;} .checkered{background-color:gold;}

好混乱啊，你为什么不按照那个格式来写呢，这样改起来也比较麻烦，如果有错，或者后期来修改的话，无形中增大了自身的工作量

额，好乱的代码，想要实现响应式，要用 @media screen and (max-width:600px){}这个属性，比如说最大宽度是600px的时候，那就设置层的宽度是90%；其余的时候层的宽度都是30%；不就可以了么