如何适配手机端不同屏幕（手机端刮刮乐实现效果）

在做手机端页面时，需要适配不同的手机屏幕（注意：每个手机的物理像素和分辨率是不同）。在这里我们可以使用媒体查询解决适配问题。步骤如下：

（1）禁止用户手动缩放按实际尺寸进行显示

<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

注释：

width:可视区域的宽度，值可为数字或关键词device-width（device-width 为设备的宽度）；

height:同width；

intial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放；

user-scalable:是否可对页面进行缩放，no 禁止缩放

（2）这里我们需要用到 less.js （less.js 使用方便，可以实现多重继承。在适配的时候，它会自动给你计算长度），那么第一步就是在html文档中“引人less.js文件”啦。

<script src="../js/less.js" type="text/javascript"></script>

（3）适配不同屏幕的公共样式

*{
  margin: 0;
  padding: 0;
}
body{
  font-family: "Microsoft YaHei";
}

@media only screen and (width: 320px){//这里将宽度分成25份，那么每份就是 320/20=12.8(一般情况下UI给的设计稿是750，但是这里的不是750)
  html {
    font-size: 12.8px;
  }
}
@media only screen and (width: 360px) {
  html {
    font-size: 14.4px;
  }
}
@media only screen and (width: 375px){
  html {
    font-size: 15px;
  }
}
@media only screen and (width: 412px){
    html {
    font-size: 16.48px;
  }
}
@media only screen and (width: 414px){
  html {
    font-size: 16.56px;
  }
}
@media only screen and (width: 768px){
  html {
    font-size: 30.72px;
  }
}

View Code

http://blog.csdn.net/baidu_34157788/article/details/51351018

这个是网上找的有关移动端媒体查询的一些尺寸参考

（4）写完公共样式后，可以新建一个less文件啦，在这个新建的less文件中引人公共适配样式的less文件，如：@import "common";

在新建的less文件中引人公共适配样式后，那么在html文件中就无需再次引用公共适配样式，只需要引用新建的less文件。

如：<link href="../css/ScratchCards.less" rel="stylesheet/less" type="text/css"/>

注：ScratchCards.less 文件引人了@import"common"; ScratchCards.less 文件如下：

@import "common";

.container{
  width: 25rem;
  background-color: #e64142;
  .top{
    background: url("../images/ggl-font.png") no-repeat;
    height: 602rem/30;
    background-size: 25rem 602rem /30;
  }
  .content{
    position: relative;
    width: 25rem;
    height: 234rem/30;
    text-align: center;
    img{
      height: 234rem/30;
      width: 702rem/30;
    }
    #myCanvas {
      position: absolute;
      /*left: 152rem/30;*/
      /*background-color: #2cab80;*/
     /* width: 562rem/30;
      height: 234rem/30;*/
      width: 702rem/30;
      height: 234rem/30;
      left: 24rem/30;
    }
    .zj{
       display: none;
       position: absolute;
       height: 189rem/30;
       width: 339rem/30;
       top: 23rem/30;
       left: 254rem/30;
       .q1{
         height: 35rem/30;
         font-size: 36rem/30;
         color: #e64142;
         text-align: center;
         margin-bottom: 14rem/30;
       }
       .q2{
         height: 30rem/30;
         font-size: 30rem/30;
         color: #323232;
         text-align: center;
       }
       img{
         display: none;
         position: absolute;
         bottom: 0;
         left: 0;
         width: 339rem/30;
         height: 83rem/30;
         cursor: pointer;
       }
     }
    .zlyc{
      display: none;
      position: absolute;
      height: 190rem/30;
      width: 339rem/30;
      top: 23rem/30;
      left: 254rem/30;
      .w1{
        height: 35rem/30;
        font-size: 36rem/30;
        color: #e64142;
        text-align: center;
        margin-bottom: 14rem/30;
      }
      .w2{
        height: 30rem/30;
        font-size: 30rem/30;
        color: #323232;
        text-align: center;
      }
      img{
        display: none;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 339rem/30;
        height: 83rem/30;
        cursor: pointer;
      }
    }
    .right{
      position: absolute;
      height: 158rem/30;
      width: 374rem/30;
      top: 39rem/30;
      left: 238rem/30;
      p{
        font-size: 30rem/30;
        font-weight: bold;
        color: #666666;

      }
      img{
        position: absolute;
        left: 18rem/30;
        bottom: 0;
        width: 335rem/30;
        height: 83rem/30;
        cursor: pointer;
      }
    }
  }
  .footer{
    width: 25rem;
    .zjjl{
      width: 25rem;
      height: 94rem/30;
      line-height: 94rem/30;
      text-align: center;
      a{
        color: #ffffff;
        font-size: 30rem/30;
      }
    }
    .bottom{
      width: 25rem;

      .bottom-inner{
        width: 702rem/30;
        border: 1px solid #e2b91a;
        margin-left: 23rem/30;
        .hdgz{
          width: 349rem/30;
         /* border-right: 1px solid #e2b91a;*/
         /* font-size: 24rem/30;*/
          color: #FFFFFF;
          display: inline-block;
          float: left;
          h6{
            height: 66rem/30;
            line-height: 66rem/30;
            font-size: 30rem/30;
            color: #f7cf72;
            text-align: center;
          }
          .p1{
            font-size: 24rem/30;
            width: 306rem/30;
          /*/!* height: 55rem/30;
            position: relative;*!/*/
            margin: 0 auto;
          }
          .p2{
            font-size: 24rem/30;
            width: 306rem/30;
          /*/!* height: 86rem/30;
            position: relative;*!/*/
            margin: 0 auto;
            margin-top: 25rem/30;
          }
          .p3{
            font-size: 24rem/30;
            width: 306rem/30;
         /* /!*height: 58rem/30;
            position: relative;*!/*/
            margin: 0 auto;
            margin-top: 25rem/30;
          }
        }
        .jpsz{
          width: 349rem/30;
          /*font-size: 24rem/30;*/
          color: #FFFFFF;
          display: inline-block;
          border-left: 1px solid #e2b91a;
          h6{
            height: 66rem/30;
            line-height: 66rem/30;
            font-size: 30rem/30;
            color: #f7cf72;
            text-align: center;
          }
          .s1{
            font-size: 24rem/30;
            position: relative;
            margin: 0 auto;
            width: 300rem/30;
          /* height: 24rem/30;*/
          margin-bottom: 20rem/30;
          }
        }
      }
    }
  }

}

View Code

（5）html部分

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/><!--禁止用户缩放-->
    <link href="../css/ScratchCards.less" rel="stylesheet/less" type="text/css"/>
    <title>刮刮乐app</title>
</head>
<body>
<script src="../js/less.js" type="text/javascript"></script>
<div class="container">
    <div class="top"></div>
    <div class="content">
        <img class="canvas-bg" src="../images/ggl-c00.png"/>
        <canvas id="myCanvas"></canvas>
        <div class="zj">
            <p class="q1">恭喜你获得特等奖!</p>
            <p class="q2">奖励您，10000元红包!</p>
            <img class="img-btn" src="../images/lq-btn.png"/>
        </div>
        <div class="zlyc">
            <p class="w1">谢谢惠顾!</p>
            <p class="w2">继续努力，永不放弃!</p>
            <img class="img-btn" src="../images/zlyc-btn.png"/>
        </div>
        <div class="right">
            <p>-  刮10000元现金大奖  -</p>
            <img class="img-btn" src="../images/ggl-btn0.png"/>
        </div>
    </div>
    <div class="footer">
        <div class="zjjl">
            <a href="WinningRecord.html">中奖记录>></a>
        </div>
        <div class="bottom">
            <div class="bottom-inner">
                <div class="hdgz">
                    <h6>活动规则</h6>
                    <div class="p1">
                        <p class="s">此刮刮卡有效期：</p><p class="">2016.11.25-2017.12.30</p>
                    </div>
                    <div class="p2">
                        <p>活动中奖率达90%以上，所有奖品的以各奖品详情为准。</p>
                    </div>
                    <div class="p3">
                        <p>本次活动可多次参与，欢迎您的参与。</p>
                    </div>
                </div>
                <div class="jpsz">
                    <h6>奖品设置</h6>
                    <div class="s1">特等奖：10000元红包</div>
                    <div class="s1">一等奖：iPhone70000</div>
                    <div class="s1">二等奖：华为P9手机</div>
                    <div class="s1">三等奖：全自动智能洗衣机</div>
                    <div class="s1">四等奖：智能微波炉</div>
                    <div class="s1">五等奖：价值50元礼包</div>
                </div>
            </div>

        </div>
    </div>
</div>


</body>
</html>
<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/ScratchCards.js" type="text/javascript"></script>
<script>
    /*alert($(window).width());*/
   /*alert($("#myCanvas").width());*/
   /* alert(document.getElementById("myCanvas").clientWidth+'px');*/
</script>

View Code

（6）js 部分

/**
 * Created by Administrator on 2016/11/28.
 */
/*点击刮奖按钮改变状态*/
$(".img-btn").click(function () {
    /*$(this).attr("src","../images/ggl-btn1.png");*/
    $(".right").hide();
/*  $(".canvas-bg").attr("src", "../images/ggl-c1.png");
    $(".jz").css("color", "#d96667");*/
/*  $(".zj").show();*/

    /*刮刮乐效果的实现*/
    var c = document.getElementById("myCanvas"),
        ctx = c.getContext('2d'),
        on = false,
        x = c.parentNode.offsetLeft,
        y = c.parentNode.offsetTop ,
        image = new Image();
    image.src = "../images/ggl-c1.png";
    ctx.drawImage(image,0,0,300,150);
    ctx.globalCompositeOperation = 'destination-out';
    c.addEventListener("mousedown",down,false);
    c.addEventListener("mousemove",move,false);
    c.addEventListener("mouseup",up,false);
    c.addEventListener("touchstart",down,false);
    c.addEventListener("touchmove",move,false);
    c.addEventListener("touchup",up,false);

    function down(e){
        e.preventDefault();
        on = true;
    }
    function up(e){
        e.preventDefault();
        on = false;
    }
    function move(e){
        e.preventDefault();
        if(on){
            if(e.changedTouches){//转换属性
                e=e.changedTouches[e.changedTouches.length-1];//获取最新一个触摸点作为event
            }
            var _x = e.pageX - x,//相对画布X
                _y = e.pageY - y + 25;//相对画布Y
            with(ctx){//在指定作用域下执行代码
                beginPath()
                arc(_x, _y, 15, 0, Math.PI * 2);//画圆
                fill();
            }
        }
    }
});

/*刮刮乐效果实现*/
window.onload = function(){

}
/*
var ctx = document.getElementById("myCanvas").getContext("2d");/!*得到画笔*!/
var w = document.getElementById("myCanvas").clientWidth;
var h = document.getElementById("myCanvas").clientHeight;
/!*
/!*canvas画东西需要两步
* 第一步：告诉系统你要画的东西饿路径
* 第二步：告诉系统你需要用的哪种方式填充路径
* *!/
/!*代码描述（你要画一条直线，那么代码应该是告诉系统我要从0,0 点
* 到100,100点设置一条路径，然后用黑色描边这条路）
* *!/
ctx.beginPath();//开始画路径
ctx.moveTo(0,0);//移动到0,0点
ctx.lineTo(w,h);//画条直线到200,200点
ctx.closePath();//闭合路劲
ctx.lineWidth = "5";//设置描边颜色为黑色
/!*至此路径描述已经结束*!/

ctx. strokeStyle="#000"//设置描边颜色为黑色
ctx.stroke();//执行描边
*!/
var touchRadius = 5;/!*默认手指触摸半径，可以自定义设置*!/

/!*默认填充灰色来遮住文字*!/
ctx.fillStyle = "#ccc";
ctx.fillRect(0, 0, w, h);    // fillRect，用矩形填充*/

View Code

posted @ 2017-03-27 17:14 三高娘子阅读(492) 评论(0) 收藏举报

三高娘子

如何适配手机端不同屏幕（手机端刮刮乐实现效果）

公告