请教修改响应式网页 电脑要求居显示2行3列,手机要求6行1列.图片自适应宽度 <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no"> <title>标题</title> <style> 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;} </style> </head> <body> <div class="horizontal stripes"></div> <div class="vertical stripes"></div> <div class="picnic stripes"></div> <div class="angled stripes"></div> <div class="angled-135 stripes"></div> <div class="checkered stripes"></div> </body> </html>]
推荐回答
额乱代码想要实现响应式要用@media screen and (max-width:600px){}属性比说宽度600px候设置层宽度90%;其余候层宽度都30%;