H5開發筆記

helloworldcoding 發布于2019-08-26 13:24 / 953人閱讀

摘要：移動開發必須的配置內容寬為設備寬度，初始化縮放倍數為不縮放和是相對于顯示器屏幕分辨率而言的相對長度單位。

這兩天H5靜態頁面開發過程中的問題總結。

1.viewport - 移動開發必須的配置

//內容寬為設備寬度，初始化縮放倍數為1（不縮放）

2.rem和px

(1)px是相對于顯示器屏幕分辨率而言的相對長度單位。

(2)rem是相對根元素的font-size大小的相對單位，可以做到只修改根元素font-size大小就成比例地調整所有字體大小。

適配：

利用媒體查詢設置斷點來控制HTML的font-size

html {         
    font-size:16px;  
}  
@media (max-width:414px) 
{ 
    html {         
        font-size: 18px; 
    }  
} 
@media (max-width:375px) { 
    html { 
        font-size: 20px;
    }
}

根據屏幕大小動態設置html的font-size

var deviceWidth=document.documentElement.clientWidth;  
var rootFontSize = deviceWidth / 6.4; 
document.documentElement.style.fontSize=rootFontSize + "px";

3.同行元素上下位移偏差問題

手動設置元素居中，要不然瀏覽器會隨機渲染，必須給它一個渲染規則。

4.元素設置display:inline-block,自動產生間距

解決:給父元素設置font-size:0； letter-spacing: -4px; 子元素再另外設置font-size和letter-spacing。

5.自適應布局

父元素設置display:flex ,子元素flex屬性值設置比列。

利用百分百（%）布局

6.調試換分辨率設備自動重布局

//orientationchange：設備更換事件 
//onresize：接收reset事件時觸發的EventHandler 
//DOMContentLoaded: 瀏覽器窗口大小發生變化事件

(function (doc, win) {     
    resizeEvt = "orientationchange" in window ? "orientationchange" : "resize",     
    recalc = function () {      
        var clientWidth=doc.documentElement.clientWidth;         
        if (!clientWidth) return;   
            //動態計算根元素的font-size
            doc.documentElement.style.fontSize=(clientWidth / 6.4) + "px";     
        };      
        if (!doc.addEventListener) return; 
        
        //監聽設備變化
        win.addEventListener(resizeEvt, recalc, false);  
        //監聽瀏覽窗口變化
        doc.addEventListener("DOMContentLoaded", recalc, false);     
})(document, window);

7.總結

H5頁面的開發，因為設備視口大小不一致，在適配上應該足夠細致、嚴謹。除了自適應的布局之外，更應該注意細節的處理。

GPU云服務器云服務器 java開發入門筆記 h5 webrtc 開發 h5開發android應用 h5前端開發工程師

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/108774.html

前端復習筆記--1.html標簽復習速查

摘要：可讀性，提高代碼的可讀性，便于多人的修改維護，提高開發效率。主流瀏覽器都兼容的新標簽，對于及以下版本不認識的新元素，可以使用創建一個沒用的元素來解決，例如，也可以使用來解決兼容性問題，詳情可參考概覽 showImg(https://segmentfault.com/img/bV5JXT?w=1880&h=1050); 文檔章節導航表示和主要內容不相關的區域表示一個獨...

番茄西紅柿 2019-08-01 18:42 評論0 收藏0
基本方法筆記 - 收藏集 - 掘金

摘要：探討判斷橫豎屏的最佳實現前端掘金在移動端，判斷橫豎屏的場景并不少見，比如根據橫豎屏以不同的樣式來適配，抑或是提醒用戶切換為豎屏以保持良好的用戶體驗。探討判斷橫豎屏的最佳實現 - 前端 - 掘金在移動端，判斷橫豎屏的場景并不少見，比如根據橫豎屏以不同的樣式來適配，抑或是提醒用戶切換為豎屏以保持良好的用戶體驗。判斷橫豎屏的實現方法多種多樣，本文就此來探討下目前有哪些實現方法以及其中的優...

maochunguang 2019-08-20 17:44 評論0 收藏0
實用的IT類網站及工具大集合

摘要：整理的一些實用的類網站及工具。鏈接云適配有時候我們做出的網站沒有用到響應式布局，也可能我們的網站的像素寬度已經規定成具體的多少像素了。同時提供多個開放，功能實用，非常強大。整理的一些實用的IT類網站及工具。 1.聚合數據大家在開發過程中，可能會用到各種各樣的數據，想找一些接口來提供一些數據。比如天氣預報查詢，火車時刻表查詢，彩票查詢，身份證查詢等等。有了這個接口，直接調用即可。各種...

rollback 2019-05-29 17:49 評論0 收藏0