十一國慶期間，公司要做一個活動，設計部交過來一張圖，只有一個按鈕需要我敲，其他部分只有一張圖，如下

完整設計稿

切圖如下：

設計稿寬是1875px

以下為html程式碼：

<div class="box" style="background-image: url(@assetURL/img/iPhone-7.png)">
    <button onclick="clickBtn();">去APP Store下載</button>
</div>

以下為css程式碼：

.box{
    background-repeat: no-repeat;
    background-position: center center;
    background-size:cover;
    width: 100%;
    height: 100%;
    position: relative;
}
button{
    width: 13.4rem;
    padding: 0.6rem 0;
    background : #cf002d;
    border: none;
    border-radius: 13px;
    position: absolute;
    left: 50%;
    margin-left: -6.7rem;
    top: 50%;
    margin-top: 7rem;
    color: #fff;
    font-size: 1rem;
}
 

以下為js程式碼：

//判斷寬高,實際內容被剪下返回false
//w1,h1:原圖寬高
//w2,h2:需要展示內容區的裝置的寬高
//conW,conH:內容區在原圖的寬高
function judgeSize(w1,h1,w2,h2,conW,conH) {
    var radio1 = w1/h1;
    var radio2 = w2/h2;
    var realW,realH;
    var radio;
    if(radio1 < radio2) {//水平鋪滿，垂直方向被剪下
        radio = w1/w2;
        realH = conH/radio;
        if(realH < h2) {//垂直方向被剪下不影響展示效果時，返回hT
            return 'hT';
        }else {//垂直方向被剪下影響展示效果時，返回hF
            return 'hF';
        };
    }else if (radio1 > radio2) {//垂直方向鋪滿，水平方向被剪下
        radio = h1/h2;
        realW = conW/radio;
        if(realW < w2) {//水平方向被剪下不影響展示效果時，返回wT
            return 'wT';
        }else {//水平方向被剪下影響展示效果時，返回wF
            return 'wF';
        }
    }else {//等比例縮放時，返回w&hT
        radio = 1;
        return 'w&hT'
    }
}
//頁面初始化時判斷是否需要滾動條
function judgeScroll() {
    var winW = document.documentElement.clientWidth;
    var winH = document.documentElement.clientHeight;
    document.documentElement.style.fontSize = winW / 1875 * 100 + "px";//做rem單位適配
    var size = parseInt(document.documentElement.style.fontSize);
    //當頁面根元素的fontsize小於12時不再做適配
    if(size < 12){
        $('body').css({'width':'18.75rem','height':'30rem','minHeight':winH,'minWidth':winW});
        return
    };
    var str = judgeSize(1875,3014,winW,winH,1440,2170);
    if(str == 'hF') {
        //內容區垂直方向被遮擋時，body的高等於設計稿的高，寬等於裝置寬
        $('body').css({'width':winW,'height':'30rem'});
    }else if(str == 'hT' || str =='wT' || str == 'w&hT') {
        //內容區水平方向或垂直方向或兩個方向同時都沒有被遮擋時，body的寬或高或寬高分別等於裝置的寬高
        $('body').css({'width':winW,'height':winH});
    }else if (str == 'wF') {
        //內容區的水平方向被遮擋時，body的寬等於設計稿的寬，高等於裝置高
        $('body').css({'width':'18.75rem','height':winH});
    };
}
 

直接呼叫：

judgeScroll();

效果圖：

iphone6 (375/667):

ipad (768/1024):

在裝置很小時，顯示滾動條（200/300）: