成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

H5開發(fā)筆記

helloworldcoding / 973人閱讀

摘要：移動(dòng)開發(fā)必須的配置內(nèi)容寬為設(shè)備寬度，初始化縮放倍數(shù)為不縮放和是相對(duì)于顯示器屏幕分辨率而言的相對(duì)長(zhǎng)度單位。

這兩天H5靜態(tài)頁面開發(fā)過程中的問題總結(jié)。

1.viewport - 移動(dòng)開發(fā)必須的配置
//內(nèi)容寬為設(shè)備寬度，初始化縮放倍數(shù)為1（不縮放）
2.rem和px

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

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

適配：

利用媒體查詢?cè)O(shè)置斷點(diǎn)來控制HTML的font-size

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

根據(jù)屏幕大小動(dòng)態(tài)設(shè)置html的font-size

var deviceWidth=document.documentElement.clientWidth;  
var rootFontSize = deviceWidth / 6.4; 
document.documentElement.style.fontSize=rootFontSize + "px";
3.同行元素上下位移偏差問題

手動(dòng)設(shè)置元素居中，要不然瀏覽器會(huì)隨機(jī)渲染，必須給它一個(gè)渲染規(guī)則。

4.元素設(shè)置display:inline-block,自動(dòng)產(chǎn)生間距

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

5.自適應(yīng)布局

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

利用百分百（%）布局

6.調(diào)試換分辨率設(shè)備自動(dòng)重布局 
//orientationchange：設(shè)備更換事件 
//onresize：接收reset事件時(shí)觸發(fā)的EventHandler 
//DOMContentLoaded: 瀏覽器窗口大小發(fā)生變化事件

(function (doc, win) {     
    resizeEvt = "orientationchange" in window ? "orientationchange" : "resize",     
    recalc = function () {      
        var clientWidth=doc.documentElement.clientWidth;         
        if (!clientWidth) return;   
            //動(dòng)態(tài)計(jì)算根元素的font-size
            doc.documentElement.style.fontSize=(clientWidth / 6.4) + "px";     
        };      
        if (!doc.addEventListener) return; 
        
        //監(jiān)聽設(shè)備變化
        win.addEventListener(resizeEvt, recalc, false);  
        //監(jiān)聽瀏覽窗口變化
        doc.addEventListener("DOMContentLoaded", recalc, false);     
})(document, window);
7.總結(jié)

H5頁面的開發(fā)，因?yàn)樵O(shè)備視口大小不一致，在適配上應(yīng)該足夠細(xì)致、嚴(yán)謹(jǐn)。除了自適應(yīng)的布局之外，更應(yīng)該注意細(xì)節(jié)的處理。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/108774.html

相關(guān)文章

  • 前端復(fù)習(xí)筆記--1.html標(biāo)簽復(fù)習(xí)速查

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

    番茄西紅柿 評(píng)論0 收藏0

  • 基本方法筆記 - 收藏集 - 掘金

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

    maochunguang 評(píng)論0 收藏0

  • 實(shí)用的IT類網(wǎng)站及工具大集合

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

    rollback 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<