自適應PC端網頁制作使用REM

做一個PC端的網頁,設計圖是1920X1080的. 要在常見屏上顯示正常(比例正確可) 1280X720 1366X768 1440X900 1920X1080

現在前端框架越來越完善，除了個別頁面，大多數情況下都能做到各屏幕的適配

有哪些頁面吶？具體的就不多說了，這里就舉例一個有背景圖的登錄頁面（尺寸1920*1080 ），除了背景圖，還有一個就是要做適應的登錄框了。

下面這張圖是1920*1080的效果，如果我們登錄框用的px來設計，在1920*1080的頁面顯示是沒什么問題的，但是如果是在更小的屏幕尺寸顯示的話，那結果就可想而知了。

所以為了讓登錄框能夠更好的個屏幕中顯示，就是我們接下來要做的。

 

 

 

使用以下幾種辦法：

一、媒體查詢方法

做過響應式網站的幾乎都知道，必須要用到的就是媒體查詢，使用媒體查詢，我們可以在同一套樣式資源，讓網頁在PC端和移動端能更好的展示。

@media screen and (max-width:1920px) { }   // 當屏幕寬度小於1920時的樣式

@media screen and (min-width:1366px) { }   // 當屏幕寬度大於1366時的樣式

@media screen and (min-width:768px)  and (max-width:1366px) { }  // 當屏幕寬度大於768小於1366時的樣式

具體的這里不多介紹，如想了解更多，這里推薦一片不錯的文章給大家 https://www.cnblogs.com/lguow/p/9316598.html

 

二、使用 rem 實現自適應

width,height,margin,padding,left top都采用了rem。

HTML 的 font-size 設置的為100px，是為了計算方便。此時 body 的  font-size 要設置為正常值,例如12px，不然的話，其它的DOM都會繼承HTML的100px的  font-size ,導致字體效果巨大。

 

 

 

 

$(function(){
    //頁面初始化，針對屏幕不是1920*1080的頁面尺寸
    let designSize = 1920; // 設計圖尺寸            
    let html = document.documentElement;            
    let wW = html.clientWidth;// 窗口寬度
    let rem = wW * 100 / designSize;             
    document.documentElement.style.fontSize = rem + 'px';
            
    // 頁面縮放時 font-size 的調整        
    $(window).resize(function (){            
        let designSize = 1920; // 設計圖尺寸            
        let html = document.documentElement;            
        let wW = html.clientWidth;// 窗口寬度
        let rem = wW * 100 / designSize;             
        document.documentElement.style.fontSize = rem + 'px';
    });
})

 

修改后，下面的效果圖是在1366*768 的屏幕試下的顯示效果：

 

 

補充一點：

這樣實現，細心的人會發現，白色登錄框會閃現一下，我們可以這樣處理，給整個 body 加個透明度的顯示動畫，這樣子頁面打開是會顯得更柔和更舒服。

優化后的css樣式：

*{margin: 0;padding: 0;}
html{height: 100%;overflow: hidden;font-size: 100px;}
body{position: relative; font-size: 12px;background:#0073E5;height: 100%;background-size:cover;background-repeat: no-repeat;animation:showOpacity 1s infinite;animation-iteration-count:1;}           
p{font-size: 16px;line-height: 21px;margin-bottom: 10px;color: #fff;}
.haha{position: absolute;top: 50%;left:50%;text-align: center;transform: translate(-50%,-50%);color: #fff;font-size:0.5rem;}
.box{
    background: #fff;
    border-radius: 0.1rem;
    width:3.82rem;
    height:4.87rem;
    position: absolute;
    z-index: 999;
    right:1.62rem;
    top:2.46rem;
    padding:0.15rem 0.25rem;
}
@keyframes showOpacity
{
    from {opacity:0;}
    to {opacity:1;}
}