web实现电脑屏幕和手机屏幕适应

来源：互联网发布：王柳雯淘宝店编辑：程序博客网时间：2024/05/12 08:42

web实现手机屏幕适应

需要实现的效果：

排行榜web显示：

赛程报道web显示:

排行榜手机显示:

赛程报道手机显示:

实现思路：

1.布局：

（1）顶部为排行榜和赛程报道的水平排列标签，通过div浮动实现

（2）点击排行榜和赛程报道需要切换页面，通过两个非浮动的div实现。

（3）排行榜和赛程报道里面的listitem,通过块级元素（div）和行级元素(span)实现

2.样式

通过组合类对点击排行榜和赛程报道list页面进行效果展示，主要会用到div的浮动，宽高使用百分比定义

3.js

通过顶部排行榜和赛程报道的点击事件，切换排行榜和赛程报道列表的显示。

布局图如下：

手机适配布局图：

排行榜item布局图：

赛程报道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参数，实现重定向切换刷新。（有利于分享页面）

1 0