html图片自适应手机屏幕大小代码,Css代码库,德仔网

代码语言
代码分类
【Css】 html图片自适应手机屏幕大小
作者: / 发布于2018/8/2/ 1106
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;} 
/* 
@media screen and (min-width: 480px) { 
.doc { 
font-size: 21px 
} 
}@media screen and (min-width: 640px) {
.doc { 
font-size: 28px 
} 
} 
*/ 
.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="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="style/images/5.jpg" width="640" height="406" alt="" /> </div>
<div class="content"> <span class="f-bold">家居体验</span> 
 好的家具让当代人心情愉悦，放松，好的家居设计非常重要。  
</div> 
<div class="content-step"><img src="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%; }
试试其它关键字
同语言下
可能有用的
贡献的其它代码Label