html圖片自適應手機屏幕大小的css寫法

2020-03-24 15:55:31

字體：大中小

來源：轉載

供稿：網友

復制代碼代碼如下:
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
h1 房屋裝修 /h1
div span 20014-07-08 /span /div
div img src="style/images/5.jpg" width="640" height="406" alt="" / /div
div span 家居體驗 /span
p 好的家具讓當代人心情愉悅，放松，好的家居設計非常重要。 /p
/div
div img src="style/images/step-1.jpg" width="574" height="68" alt="" / /div
div
ul
li span /span 免預存 /li
li span /span 套餐7.5-8.5折優惠； /li
li span /span 唯一渠道辦理終端補貼合約機； /li
li span /span 可為集團客戶統一辦理集團套餐； /li
/ul
/div
/div
/body
/html

注：在html里面插入圖片，如果想讓圖片自適應屏幕的小而不是寬高固定不變可以在css代碼里加入img { height: auto; width: auto/9; width:100%; }更多編程語言

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：div+css布局中選擇使用html標簽的方法

下一篇：HTML+CSS布局(常用css控制屬性)小結