移動端項目開發心得

時間 2019-11-24

標籤移動項目開發心得欄目無線简体版

原文原文鏈接

　　經過此次項目開發，使我對佈局有了更深層次的理解，對float和position的運用也更駕輕就熟。體會到float和position對頁面的負面影響。其中，position:absoulte/fiexd會讓元素脫離文檔流，其後面的元素（暫且稱爲候補元素吧）會佔據原來的位置，須要對候補元素的margin padding作出相應調整；而float一樣會讓元素脫離文檔流，後面的元素一樣會佔據其原來的位置，不一樣的是，其候補元素的內容會環繞在float元素周圍。css

position:佈局

<head>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: #444;
            margin: 10px;
            color: #f00;
        }
        .position{
            position:absolute;
            top: 0;
            left: 0;
        }
        .box{
            width: 200px;
            height: 200px;
            background-color: #ccc;
        }
    </style>
</head>
<body>
    <div class="position">position</div>
    <div class="box">
        box
        <img src="1.png" alt="">
    </div>
</body>

演示效果學習

float:優化

<head>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: #444;
            margin: 10px;
            color: #f00;
        }
        .float{
            float:left;
        }
        .box{
            width: 200px;
            height: 200px;
            background-color: #ccc;
        }
    </style>
</head>
<body>
    <div class="float">float</div>
    <div class="box"><img src="1.png" alt="">
    </div>
</body>

演示結果spa

對移動端的認知有了更深入的認識，因爲手機屏幕幾乎每個地方都能對用戶作出反應，因此移動開發會大量使用到a連接做爲元素容器，爲了便於設置寬高，應在公共樣式中設置：　code

　a{ display:inline-block; text-decoration:none; color:#000; }blog

一樣重要的還有對圖片的處理，應將小圖片製做成雪碧圖，這樣作不但節省了引入照片的開發時間，還能節省寬帶，帶來更好的用戶體驗。圖片

另外，還要培養組件開發的思想，頁面中存在大量可重複調用的組件，將他們寫入HTML文件並註釋,在base.css中寫入樣式，那麼其餘頁面中須要用到時，直接複製HTML文檔中的代碼便可，一次開發，重複利用，方便高效。開發

在非技術方面：文檔

　　以往的我太過於急功近利，認爲好的技術應該儘快掌握，浮躁地去汲取新的知識，又缺乏反覆練習，掌握不牢固，理解不清晰，每每拔苗助長，小黃教導咱們，好的技術不少，解決方案數不勝數，但是當下該作的，是拿咱們已有的技術來解決問題，而不是一邊尋找解決方案一邊作項目。一言驚醒夢中人，的確如此，即使如今運用的不是最好的方法，也沒有關係，學習就是不斷推翻過去的本身，等我學到了更深刻的知識，更好的技術時再回過頭來對項目進行優化，纔是正確的作法，現階段的開發是必然的，不該該限於知識上的缺陷而畏手畏腳，放手去幹，由於作得再差，能作出來就不算太差，作得再好，過一段時間看回如今寫的代碼也不會以爲好，只有不斷推翻如今的項目，從新優化，才能進步！衷心感謝小黃。