html圖片自適應(yīng)手機(jī)屏幕大小的css寫法
發(fā)布時(shí)間:2014-08-22 11:14:47 作者:佚名
我要評(píng)論

在html里面插入圖片,讓其自適應(yīng)屏幕大小,可以通過css來完成,下面有個(gè)示例,希望對(duì)大家有所幫助

復(fù)制代碼
代碼如下: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;}
復(fù)制代碼
代碼如下:<!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">家居體驗(yàn)</span>
<p> 好的家具讓當(dāng)代人心情愉悅,放松,好的家居設(shè)計(jì)非常重要。 </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>免預(yù)存</li>
<li><span class="icon"></span>套餐7.5-8.5折優(yōu)惠;</li>
<li><span class="icon"></span>唯一渠道辦理終端補(bǔ)貼合約機(jī);</li>
<li><span class="icon"></span>可為集團(tuán)客戶統(tǒng)一辦理集團(tuán)套餐;</li>
</ul>
</div>
</div>
</body>
</html>
注:在html里面插入圖片,如果想讓圖片自適應(yīng)屏幕的小而不是寬高固定不變可以在css代碼里加入img { height: auto; width: auto\9; width:100%; }
相關(guān)文章
jquery實(shí)現(xiàn)自適應(yīng)窗口大小導(dǎo)航菜單源碼
基于jQuery自適應(yīng)窗口大小導(dǎo)航菜單。這是一款響應(yīng)式導(dǎo)航菜單特效,支持手機(jī)導(dǎo)航菜單代碼,需要的小伙伴快來學(xué)習(xí)吧2015-09-02jQuery實(shí)現(xiàn)的自適應(yīng)窗口大小導(dǎo)航菜單效果源碼
是一款實(shí)現(xiàn)了可以根據(jù)當(dāng)前屏幕分辨率大小自適應(yīng)調(diào)整長(zhǎng)度的導(dǎo)航菜單效果代碼,擁有響應(yīng)式導(dǎo)航菜單特效,支持手機(jī)導(dǎo)航菜單,本段代碼適應(yīng)于所有網(wǎng)頁(yè)使用,有興趣的朋友們可以2015-08-19jquery自適應(yīng)頁(yè)面寬度大小的照片瀑布流效果
一款基于jQuery實(shí)現(xiàn)的照片瀑布流顯示自適應(yīng)頁(yè)面寬度大小點(diǎn)擊查看大圖預(yù)覽2014-05-27背景圖片自適應(yīng)瀏覽器分辨率大小并自動(dòng)拉伸全屏代碼
圖片怎么全屏,找了好長(zhǎng)時(shí)間都沒有找到,今天偶遇,在此與大家分享下背景圖片自適應(yīng)分辨率瀏覽器大小自動(dòng)拉伸全屏代碼,希望對(duì)大家有所幫助2014-04-17jQuery實(shí)現(xiàn)背景圖片隨著窗口的改變自動(dòng)調(diào)整自適應(yīng)窗口大小
當(dāng)用戶調(diào)整瀏覽器窗口大小時(shí),背景圖片會(huì)隨著窗口的改變自動(dòng)調(diào)整自適應(yīng)窗口大小2013-08-20jQuery自適應(yīng)圖片大小帶前后切換的相冊(cè)代碼
自適應(yīng)圖片大小相冊(cè)代碼支持prev、next前后切換2013-08-06自適應(yīng)圖片大小比例的3D立體圖片左右切換展示效果
3D立體圖片左右切換效果,JS會(huì)自動(dòng)根據(jù)圖片不同的比例合理設(shè)置寬度高度2013-02-18jquery插件ez-bg-resize背景自適應(yīng)瀏覽器的大小
不適用CSS,通過jQuery控制背景圖片自適應(yīng)瀏覽器,全屏顯示背景效果的jquery插件z-bg-resize2012-10-24移動(dòng)端網(wǎng)頁(yè)大小自適應(yīng)的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄苿?dòng)端網(wǎng)頁(yè)大小自適應(yīng)的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-24