圖片大小自適應手機螢幕程式碼例項

antzone發表於2017-03-14
原文網址 : https://www.softwhy.com/article-3219-1.html

現在手機端的使用者越來越多，所以相關問題也應該得到應有的重視，下面就分享一段程式碼例項，它能夠實現圖片自適應手機螢幕大小的效果，當然本站是無法演示自適應效果的，只給出相關的程式碼，需要的朋友可以做一下參考。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<style type="text/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;
}
/* 
@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;
}
</style>
</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>
    <p> 好的傢俱讓當代人心情愉悅，放鬆，好的家居設計非常重要。 </p>
  </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>

相關文章