web實現電腦螢幕和手機螢幕適應
阿新 • • 發佈：2019-01-08
web實現手機螢幕適應
需要實現的效果：
排行榜web顯示：
賽程報道web顯示:
排行榜手機顯示:
賽程報道手機顯示:
實現思路：
1.佈局：
（1）頂部為排行榜和賽程報道的水平排列標籤，通過div浮動實現
（2） 點選排行榜和賽程報道需要切換頁面，通過兩個非浮動的div實現。
（3） 排行榜和賽程報道里面的listitem,通過塊級元素（div）和行級元素(span)實現
2.樣式
通過組合類對點選排行榜和賽程報道list頁面進行效果展示，主要會用到div的浮動，寬高使用百分比定義
3.js
通過頂部排行榜和賽程報道的點選事件，切換排行榜和賽程報道列表的顯示。
佈局圖如下：
手機適配佈局圖：
排行榜item佈局圖：
實現程式碼:
intex.html:
<!DOCTYPE html> <html> <head> <title>股王爭霸賽</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta charset="utf-8"> <link type="text/css" rel="stylesheet" href="../css/index.css"> <link type="text/css" rel="stylesheet" href="../css/common.css"> <!--[if lt IE 9]> <![endif]--> <script type="text/javascript" src="../js/jquery-1.7.min.js"></script> <script type="text/javascript" src="../js/index.js"></script> <script type="text/javascript"></script> </head> <body> <div class="content_1"> <div class="content_1_title"> <div id="paihang" class="title paihang">排行榜</div> <div id="baodao" class="title baodao">賽程報道</div> <div class="clear"></div> </div> <div class="aa"> <div class="content_1_list"> <div> <div class="border-bottom-1px-solid" > <div class="list_left"> <div class="a"> <img src="../images/aaaa.jpg" class="imgW60H60" /> </div> <div class="a">一朵花</div> <div class="clear h10" ></div> </div> <div class="list_right"> <div class="a"> <div>4623817</div> <div>資產</div> </div> <div class="a"> <div>200%</div> <div>總收益率</div> </div> </div> <div class="clear h10" ></div> </div> <div class="list_intro"> <div>建立時訊 買入 19.9 1000股</div> <div>建立時訊 買入 19.9 1000股</div> </div> </div> </div> <div class="h10 bgcolor_cccccc"></div> <div class="content_1_list"> <div> <div class="border-bottom-1px-solid" > <div class="list_left"> <div class="a"> <img src="../images/aaaa.jpg" class="imgW60H60" /> </div> <div class="a">一朵花</div> <div class="clear h10" ></div> </div> <div class="list_right"> <div class="a"> <div>4623817</div> <div>資產</div> </div> <div class="a"> <div>200%</div> <div>總收益率</div> </div> </div> <div class="clear h10" ></div> </div> <div class="list_intro"> <div>建立時訊 買入 19.9 1000股</div> <div>建立時訊 買入 19.9 1000股</div> </div> </div> </div> <div class="h10 bgcolor_cccccc"></div> <div class="content_1_list"> <div> <div class="border-bottom-1px-solid" > <div class="list_left"> <div class="a"> <img src="../images/aaaa.jpg" class="imgW60H60" /> </div> <div class="a">一朵花</div> <div class="clear h10" ></div> </div> <div class="list_right"> <div class="a"> <div>4623817</div> <div>資產</div> </div> <div class="a"> <div>200%</div> <div>總收益率</div> </div> </div> <div class="clear h10" ></div> </div> <div class="list_intro"> <div>建立時訊 買入 19.9 1000股</div> <div>建立時訊 買入 19.9 1000股</div> </div> </div> </div> <div class="h10 bgcolor_cccccc"></div> <div class="content_1_list"> <div> <div class="border-bottom-1px-solid" > <div class="list_left"> <div class="a"> <img src="../images/aaaa.jpg" class="imgW60H60" /> </div> <div class="a">一朵花</div> <div class="clear h10" ></div> </div> <div class="list_right"> <div class="a"> <div>4623817</div> <div>資產</div> </div> <div class="a"> <div>200%</div> <div>總收益率</div> </div> </div> <div class="clear h10" ></div> </div> <div class="list_intro"> <div>建立時訊 買入 19.9 1000股</div> <div>建立時訊 買入 19.9 1000股</div> </div> </div> </div> <div class="h10 bgcolor_cccccc"></div> <div class="content_1_list"> <div> <div class="border-bottom-1px-solid" > <div class="list_left"> <div class="a"> <img src="../images/aaaa.jpg" class="imgW60H60" /> </div> <div class="a">一朵花</div> <div class="clear h10" ></div> </div> <div class="list_right"> <div class="a"> <div>4623817</div> <div>資產</div> </div> <div class="a"> <div>200%</div> <div>總收益率</div> </div> </div> <div class="clear h10" ></div> </div> <div class="list_intro"> <div>建立時訊 買入 19.9 1000股</div> <div>建立時訊 買入 19.9 1000股</div> </div> </div> </div> <div class="h10 bgcolor_cccccc"></div> </div> <div class="content_2 displayNone"> <div class="last_sai"> <div class="h10"></div> <div class="title">好多事空間按罰款了就瘋狂了大神就瘋狂拉昇就煩死了空間瘋狂</div> <div class="intro"> <span class="time">2015-11-24</span> <span class="pin_num"> <img src="../images/pinglun2.png" class="W30" /> 8 </span> <div class="clear"></div> </div> </div> <div class="last_sai"> <div class="h10"></div> <div class="title">好多事空間按罰款了就瘋狂了大神就瘋狂拉昇就煩死了空間瘋狂</div> <div class="intro"> <span class="time">2015-11-24</span> <span class="pin_num"> <img src="../images/pinglun2.png" class="W30" /> 8 </span> <div class="clear"></div> </div> </div> <div class="last_sai"> <div class="h10"></div> <div class="title">好多事空間按罰款了就瘋狂了大神就瘋狂拉昇就煩死了空間瘋狂</div> <div class="intro"> <span class="time">2015-11-24</span> <span class="pin_num"> <img src="../images/pinglun2.png" class="W30" /> 8 </span> <div class="clear"></div> </div> </div> <div class="last_sai"> <div class="h10"></div> <div class="title">好多事空間按罰款了就瘋狂了大神就瘋狂拉昇就煩死了空間瘋狂</div> <div class="intro"> <span class="time">2015-11-24</span> <span class="pin_num"> <img src="../images/pinglun2.png" class="W30" /> 8 </span> <div class="clear"></div> </div> </div> <div class="last_sai"> <div class="h10"></div> <div class="title">好多事空間按罰款了就瘋狂了大神就瘋狂拉昇就煩死了空間瘋狂</div> <div class="intro"> <span class="time">2015-11-24</span> <span class="pin_num"> <img src="../images/pinglun2.png" class="W30" /> 8 </span> <div class="clear"></div> </div> </div> <div class="last_sai"> <div class="h10"></div> <div class="title">好多事空間按罰款了就瘋狂了大神就瘋狂拉昇就煩死了空間瘋狂</div> <div class="intro"> <span class="time">2015-11-24</span> <span class="pin_num"> <img src="../images/pinglun2.png" class="W30" /> 8 </span> <div class="clear"></div> </div> </div> <div class="last_sai"> <div class="h10"></div> <div class="title">好多事空間按罰款了就瘋狂了大神就瘋狂拉昇就煩死了空間瘋狂</div> <div class="intro"> <span class="time">2015-11-24</span> <span class="pin_num"> <img src="../images/pinglun2.png" class="W30" /> 8 </span> <div class="clear"></div> </div> </div> </div> </div> </body> </html>
index.css:
body { background-color: white; font: normal 100% helveticaneue, tahoma, hiragino sans gb, stheiti, wenquanyi micro hei, "黑體", "宋體" sans-serif; margin: 0; padding: 0; } body header .headImg { width: 100%; height: 100px; background: red; } body .content_1 { background-color: #ffffff; } body .content_1 .content_1_title{ text-align: center; width: 100%; } body .content_1 .content_1_title .title{ width: 48%; float: left; font-size: 1.5em; } body .content_1 .content_1_title .title:nth-child(2){ border-left: 2px solid #CCCCCC; } body .content_1 .content_1_title .title:hover{ border-bottom: 2px solid red; cursor: pointer; } body .content_1 .content_1_list .list_left{ width: 50%; float: left; } body .content_1 .content_1_list .list_right{ width: 50%; float: right; text-align: center; } body .content_1 .content_1_list .list_right .a{ float: left; text-align: center; margin: 10px; font-size: 1em; color: red; } body .content_1 .content_1_list .list_right .a div:nth-child(2){ color:#cccccc; } body .content_1 .content_1_list .list_left .a{ float: left; margin: 10px; font-size: 1em; } body .content_1 .content_1_list .list_intro { margin-top: 1em; margin-left: 2em; } body .content_2 .last_sai{ border-bottom: 1px solid gray; } body .content_2 .title{ margin: 10px; } body .content_2 .intro .time{ margin: 10px; float: left; } body .content_2 .intro .pin_num{ margin: 10px; float: right; }
common.css:
.clear{
clear: both;
}
.h10{
height: 10px;
}
/*bgcolor_cccccc*/
.bgcolor_cccccc{
background-color: #cccccc;
}
.imgW60H60{
width:60px;height: 60px;
}
.W30{
width: 30px;
}
.border-bottom-1px-solid{
border-bottom:1px solid #ededed;
}
.displayNone{
display: none;
}index.js:
window.onload=function () {
var paihang=document.getElementById('paihang');
var baodao=document.getElementById('baodao');
paihang.style.borderBottom="2px solid red";
$(".paihang").click(function(){
$(".aa").css({display:"block"});
$(".content_2").css({display:"none"});
paihang.style.borderBottom="2px solid red";
baodao.style.borderBottom="";
})
$(".baodao").click(function(){
$(".aa").css({display:"none"});
$(".content_2").css({display:"block"});
baodao.style.borderBottom="2px solid red";
paihang.style.borderBottom="";
})
}後端人員拿到改頁面後的擴充套件思路：
（1）、通過ajax切換排行榜和賽程報道時，根據靜態佈局樣式，動態生成listView頁面（有利於頁面效果與體驗）
（2）、通過在請求頭增加get引數，實現重定向切換重新整理。（有利於分享頁面）