Skip to content

Commit d393667

Browse files
quanruquanru
committed
CSS样式适配iPhone
1 parent 34bcc4c commit d393667

38 files changed

+749
-394
lines changed

‎addFriends.html

+2
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,11 @@
44
<link rel="stylesheet" type="text/css" href="./css/reset.css">
55
<link rel="stylesheet" type="text/css" href="./css/share.css">
66
<link rel="stylesheet" type="text/css" href="./css/addFriends.css">
7+
<link rel="stylesheet" type="text/css" href="./css/phone.css">
78
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
89
<script type="text/javascript" src="./js/util.js"></script>
910
<script type="text/javascript" src="./js/addFriends.js"></script>
11+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
1012
<meta charset="UTF-8">
1113
<title>wechat</title>
1214
</head>

‎album.html

+7-5
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,11 @@
44
<link rel="stylesheet" type="text/css" href="./css/reset.css">
55
<link rel="stylesheet" type="text/css" href="./css/share.css">
66
<link rel="stylesheet" type="text/css" href="./css/album.css">
7+
<link rel="stylesheet" type="text/css" href="./css/phone.css">
78
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
89
<script type="text/javascript" src="./js/util.js"></script>
910
<script type="text/javascript" src="./js/album.js"></script>
11+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
1012
<meta charset="UTF-8">
1113
<title>wechat</title>
1214
</head>
@@ -26,11 +28,11 @@ <h4>我的相册</h4>
2628
</div>
2729
<div id="myAlbum">
2830
<div id="banner">
29-
<img src="./img/banner.jpg" alt="相册横幅">
30-
</div>
31-
<div id="userBox">
32-
<img src="./img/aniang.jpg" alt="头像">
33-
<h5 class="person" id="userName">劝儒</h5>
31+
<img id="bannerImg" src="./img/banner.jpg" alt="相册横幅">
32+
<div id="userBox">
33+
<img src="./img/aniang.jpg" alt="头像">
34+
<h5 class="person" id="userName">劝儒</h5>
35+
</div>
3436
</div>
3537
<ul id="photos">
3638
<li class="user" id="photo0">

‎cardBag.html

+2
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,11 @@
44
<link rel="stylesheet" type="text/css" href="./css/reset.css">
55
<link rel="stylesheet" type="text/css" href="./css/share.css">
66
<link rel="stylesheet" type="text/css" href="./css/cardBag.css">
7+
<link rel="stylesheet" type="text/css" href="./css/phone.css">
78
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
89
<script type="text/javascript" src="./js/util.js"></script>
910
<script type="text/javascript" src="./js/cardBag.js"></script>
11+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
1012
<meta charset="UTF-8">
1113
<title>wechat</title>
1214
</head>

‎chatRoom.html

+2
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,11 @@
44
<link rel="stylesheet" type="text/css" href="./css/reset.css">
55
<link rel="stylesheet" type="text/css" href="./css/share.css">
66
<link rel="stylesheet" type="text/css" href="./css/chatRoom.css">
7+
<link rel="stylesheet" type="text/css" href="./css/phone.css">
78
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
89
<script type="text/javascript" src="./js/util.js"></script>
910
<script type="text/javascript" src="./js/chatRoom.js"></script>
11+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
1012
<meta charset="UTF-8">
1113
<title>wechat</title>
1214
</head>

‎collect.html

+2
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,11 @@
44
<link rel="stylesheet" type="text/css" href="./css/reset.css">
55
<link rel="stylesheet" type="text/css" href="./css/share.css">
66
<link rel="stylesheet" type="text/css" href="./css/collect.css">
7+
<link rel="stylesheet" type="text/css" href="./css/phone.css">
78
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
89
<script type="text/javascript" src="js/util.js"></script>
910
<script type="text/javascript" src="js/collect.js"></script>
11+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
1012
<meta charset="UTF-8">
1113
<title>wechat</title>
1214
</head>

‎contacts.html

+6-4
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,11 @@
44
<link rel="stylesheet" type="text/css" href="./css/reset.css">
55
<link rel="stylesheet" type="text/css" href="./css/share.css">
66
<link rel="stylesheet" type="text/css" href="./css/contacts.css">
7+
<link rel="stylesheet" type="text/css" href="./css/phone.css">
78
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
89
<script type="text/javascript" src="./js/util.js"></script>
910
<script type="text/javascript" src="./js/contacts.js"></script>
11+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
1012
<meta charset="UTF-8">
1113
<title>wechat</title>
1214
</head>
@@ -40,7 +42,7 @@ <h5 class="user">标签</h5>
4042
<img src="./img/news.jpg" alt="">
4143
<h5 class="user">公众号</h5>
4244
</li>
43-
<li class="nav" id="A">A</li>
45+
<li class="gap" id="A">A</li>
4446
<li class="friend">
4547
<img src="./img/ashen.jpg" alt="">
4648
<h5 class="user">阿婶</h5>
@@ -53,17 +55,17 @@ <h5 class="user">阿娘</h5>
5355
<img src="./img/ajiu.jpg" alt="">
5456
<h5 class="user">阿舅</h5>
5557
</li>
56-
<li class="nav" id="D">D</li>
58+
<li class="gap" id="D">D</li>
5759
<li class="friend">
5860
<img src="./img/dcr.jpg" alt="">
5961
<h5 class="user">董存瑞</h5>
6062
</li>
61-
<li class="nav" id="H">H</li>
63+
<li class="gap" id="H">H</li>
6264
<li class="friend">
6365
<img src="./img/hjg.jpg" alt="">
6466
<h5 class="user">黄继光</h5>
6567
</li>
66-
<li class="nav" id="Z">Z</li>
68+
<li class="gap" id="Z">Z</li>
6769
<li class="friend">
6870
<img src="./img/zjz.jpg" alt="">
6971
<h5 class="user">张居正</h5>

‎css/album.css

+7-3
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,17 @@
55
overflow: scroll;
66
overflow-x: hidden;
77
height: 100%;
8+
width: 100%;
89
position: absolute;
910
background: #fff;
1011
}
11-
#userBox {
12+
#banner{
1213
position: relative;
13-
left: 330px;
14-
top: -50px;
14+
}
15+
#userBox {
16+
position: absolute;
17+
right: 20px;
18+
bottom: -30px;
1519
}
1620
#userBox img {
1721
width: 70px;

‎css/chatRoom.css

+4-4
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
padding-right: 20px;
1010
border-radius: 5px;
1111
position: relative;
12-
margin-left: 170px;
12+
left: 170px;
1313
margin-top: 20px;
1414
border: 1px solid #7FB140;
1515
}
@@ -32,16 +32,16 @@
3232
#inputBar {
3333
position: absolute;
3434
bottom: 0;
35-
width: 480px;
35+
width: 100%;
3636
height: 55px;
3737
border-top: 1px solid #f0f0f0;
3838
background: #fff;
3939
}
4040
#inputBar input {
4141
font-size: 23px;
42-
padding-top: 15px;
42+
padding-top: 14px;
4343
padding-left: 5px;
44-
width: 320px;
44+
width: 66.6%;
4545
height: 30px;
4646
color: #474b4a;
4747
outline: medium;

‎css/collect.css

+2-1
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,15 @@
44
#friendNews{
55
overflow: scroll;
66
overflow-x: hidden;
7+
width: 100%;
78
height: 100%;
89
position: absolute;
910
background: #fff;
1011
}
1112
#friendNews li{
1213
border-bottom: 1px solid #eee;
1314
padding-top: 15px;
14-
width: 480px;
15+
width: 100%;
1516
height: 100px;
1617
position: relative;
1718
}

‎css/contacts.css

+5-8
Original file line numberDiff line numberDiff line change
@@ -5,28 +5,25 @@
55
padding: 9px 15px;
66
border-bottom: 1px solid #f0f0f0;
77
}
8-
h5.user {
8+
.user {
99
font-size: 20px;
1010
font-weight: normal;
1111
position: relative;
1212
top: -14px;
1313
display: inline;
1414
height: 55px;
1515
}
16-
li.nav {
17-
line-height: 25px;
16+
.gap {
17+
font-size: 20px;
1818
width: 480px;
19-
height: 25px;
2019
text-indent: 20px;
21-
color: #868686;
22-
background: #ebebeb;
2320
}
24-
li.friends, li.friend {
21+
.friends, .friend {
2522
height: 55px;
2623
padding: 15px 15px 0 15px;
2724
border-bottom: 1px solid #f0f0f0;
2825
}
29-
li.friends img, li.friend img {
26+
.friends img, .friend img {
3027
width: 42px;
3128
height: 42px;
3229
}

‎css/find.css

-27
Original file line numberDiff line numberDiff line change
@@ -1,27 +0,0 @@
1-
li.findLi {
2-
height: 50px;
3-
border-bottom: 1px solid #f0f0f0;
4-
background: #fff;
5-
cursor: pointer;
6-
}
7-
.findLi img {
8-
position: relative;
9-
top: 10px;
10-
float: left;
11-
padding: 0 25px;
12-
}
13-
h5.find {
14-
font-size: 20px;
15-
font-weight: normal;
16-
line-height: 50px;
17-
float: left;
18-
height: 50px;
19-
}
20-
li.gap {
21-
line-height: 25px;
22-
width: 480px;
23-
height: 25px;
24-
text-indent: 20px;
25-
color: #868686;
26-
background: #ebebeb;
27-
}

‎css/friendCircle.css

+9-5
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,13 @@
1414
position: absolute;
1515
z-index: 2;
1616
}
17-
#userBox {
17+
#banner{
1818
position: relative;
19-
left: 330px;
20-
top: -50px;
19+
}
20+
#userBox {
21+
position: absolute;
22+
right: 20px;
23+
bottom: -30px;
2124
}
2225
#userBox img {
2326
width: 70px;
@@ -36,7 +39,7 @@
3639
#friendUpdate li{
3740
border-bottom: 2px solid #eee;
3841
padding-top: 15px;
39-
width: 480px;
42+
width: 100%;
4043
height: 300px;
4144
position: relative;
4245
}
@@ -68,4 +71,5 @@
6871
height: 50px;
6972
margin-left: 25px;
7073
margin-right: 10px;
71-
}
74+
}
75+

‎css/me.css

+8-37
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,21 @@
1-
li.meLi {
2-
height: 50px;
3-
border-bottom: 1px solid #f0f0f0;
4-
background: #fff;
5-
}
6-
.meLi img {
7-
position: relative;
8-
top: 10px;
9-
float: left;
10-
padding: 0 30px;
11-
}
12-
h5.me {
13-
font-size: 20px;
14-
font-weight: normal;
15-
line-height: 50px;
16-
float: left;
17-
}
181
#personality {
192
height: 90px;
203
cursor: pointer;
4+
background: #fff;
215
}
226
#personality h6 {
237
font-size: 15px;
248
font-weight: normal;
25-
position: relative;
26-
top: 55px;
27-
left: -50px;
289
color: #a7a7a7;
2910
}
3011
#personality img {
31-
top: 20px;
32-
width: 53px;
33-
height: 53px;
34-
margin-left: -5px;
12+
float: left;
13+
width: 50px;
14+
height: 50px;
15+
padding: 20px;
3516
}
3617
#personality h5 {
37-
line-height: 90px;
38-
position: relative;
39-
top: -10px;
40-
left: -10px;
41-
height: 90px;
42-
}
43-
li.gap {
44-
line-height: 25px;
45-
width: 480px;
46-
height: 25px;
47-
text-indent: 20px;
48-
color: #868686;
49-
background: #ebebeb;
18+
font-size: 20px;
19+
font-weight: normal;
20+
padding: 20px 0 10px 0;
5021
}

0 commit comments

Comments
 (0)