前端移动端相关的代码（pc端与移动端自动切换）

 一、PC端与移动端自动切换相应的链接地址

<script type="text/javascript">
    $(function(){
        try {
            var urlhash = window.location.hash;
            if (!urlhash.match("fromapp")){
                //移动端
                if ((navigator.userAgent.match(/(iPhone|iPod|Android|ios|iPad)/i))){

                    window.location.href='/cn/index.htm';
                //pc端
                }else{
                    window.location.href='/cn/index.htm';
                }
            }
        }catch(err){}
    });
</script>

 二、媒体查询关键代码

一共需要两步（head里面加meta+媒体查询的尺寸限制）

   2.1 head里面的代码

<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">

  2.2 需要写的代码

/*只有在PC下才执行的样式*/
@media screen and (min-width: 992px) {
    h1 {
        font-size: 36px;
        margin: 30px 0 10px 0;
    }
    .box {
        border: 1px solid #a33;
        color: #a33;
        background-color: #fee;
        margin: 10px;
        padding: 10px;
    }
}
/*只有在PAD下才执行的样式*/
@media screen and (min-width: 768px) and (max-width: 992px) {
    h1 {
        font-size: 28px;
        margin: 20px 0 10px 0;
    }
    .box {
        border: 1px solid #3a3;
        color: #3a3;
        background-color: #efe;
        margin: 10px;
        padding: 10px;
    }
}
/*只有在PHONE下才执行的样式*/
@media screen and (max-width: 767px) {
    h1 {
        /*font-size: 28px;
        margin: 20px 0 10px 0;*/
        display: none;
    }
    .box {
        border: 1px solid #33a;
        color: #33a;
        background-color: #eef;
        margin: 10px;
        padding: 10px;
    }
}

三、rem的使用方法

操作步骤：

转载于:https://www.cnblogs.com/haley168/p/phone-1.html