前端移動端相關的代碼（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的使用方法

操作步驟：