今天小编跟大家讲解下有关html图片自适应手机屏幕大小的css写法 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关html图片自适应手机屏幕大小的css写法 的相关资料，希望小伙伴们看了有所帮助。
复制代码代码如下: body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,input,legend,li,ol,p,select,table,td,textarea,th,ul { margin: 0; padding: 0 } body { min-width: 320px; font-family: 'microsoft yahei',Verdana,Arial,Helvetica,sans-serif; color: #333; -webkit-text-size-adjust: none } fieldset,img { border: 0 } ol,ul { list-style: none } address,em { font-style: normal } a { color: #000; text-decoration: none } table { border-collapse: collapse } #clear { clear: both; width: 100%; background-color: #fff } #clear: after { display: block; clear: both; height: 1px; content: '' } img, fieldset { border: 0; } img { height: auto; width: auto\9; width:100%; } .content-step ul li .red{ color:#e5362b; background:none; width:inherit; vertical-align:inherit} * { -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box } .doc { padding:10px; margin: 0 auto; } .doc h1 {font-size:16px;color:#333;padding:10px 0;font-weight:500;} .shop-title {padding:10px 0;} .author {padding:10px 0;font-size:12px;} .author span {color:#333;} .author a {color:#2B8CB2;} .content {padding:20px 0;} .f-bold {background-color:#CCC5C0;color:#E5362B;padding:5px;line-height:24px;font-size:14px;} .content p {line-height:24px;padding:10px 0;text-indent:2em; font-size:14px;} .content-time {padding:20px 0;color:#000;font-weight:500;line-height:40px;} .content-time span {color:#000;} .content-time em {color:#E5362B;} .content-step {} .content-step ul {padding:20px 0;} .content-step ul li {line-height:30px;color:#5D5D5D; font-size:14px; padding-top:0} .content-step ul li .icon{ display:inline-block; background:url(../images/icon.jpg) no-repeat scroll; width:20px; height:20px; background-size:20px 20px; vertical-align:middle; margin-right:8px;} .shop-list {} .shop-list li {text-align:center;padding:20px 0;} .shop-list li p {text-align:left;color:#7A7878; text-indent:2em;} .shop-list li img {margin:0 auto;} .content-contact {color:#F15050;padding:20px 10px;line-height:30px;text-indent:2em;} .cmbc-qrcode {text-align:center;padding:20px 0;} .down-cmbc {text-align:center;display:block;margin:0 auto;} .down-cmbc img {margin:0 auto;} .list li{display:-moz-box; display:-webkit-box; display:box;} .list li p{ width:90%} .last{ text-align:right ; font-size:12px; color:#bdbdbd; padding-right:20px; margin-bottom:10px;} 复制代码代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport"content="width=device-width; initial-scale=1.0"> <meta name="keywords"content="test"/> <meta name="description"content=""/> <title>test</title> <link rel="stylesheet"type="text/css"href="https://www.aidi.net.cn//css/style/css/mobile.css"/> </head> <body> <div class="doc"> <h1>房屋装修</h1> <div class="author"> <span>20014-07-08</span> </div> <div class="shop-title"> <img src="https://www.aidi.net.cn//css/style/images/5.jpg"width="640"height="406"alt=""/> </div> <div class="content"> <span class="f-bold">家居体验</span> <p> 好的家具让当代人心情愉悦 放松 好的家居设计非常重要。 </p> </div> <div class="content-step"><img src="https://www.aidi.net.cn//css/style/images/step-1.jpg"width="574"height="68"alt=""/></div> <div class="content-step"> <ul> <li><span class="icon"></span>免预存</li> <li><span class="icon"></span>套餐7.5-8.5折优惠；</li> <li><span class="icon"></span>唯一渠道办理终端补贴合约机；</li> <li><span class="icon"></span>可为集团客户统一办理集团套餐；</li> </ul> </div> </div> </body> </html> 注：在html里面插入图片 如果想让图片自适应屏幕的小而不是宽高固定不变可以在css代码里加入img { height: auto; width: auto\9; width:100%; }来源：爱蒂网
