移动端项目开发心得

时间 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文档中的代码便可，一次开发，重复利用，方便高效。开发

在非技术方面：文档

　　以往的我太过于急功近利，认为好的技术应该尽快掌握，浮躁地去汲取新的知识，又缺乏反复练习，掌握不牢固，理解不清晰，每每拔苗助长，小黄教导咱们，好的技术不少，解决方案数不胜数，但是当下该作的，是拿咱们已有的技术来解决问题，而不是一边寻找解决方案一边作项目。一言惊醒梦中人，的确如此，即使如今运用的不是最好的方法，也没有关系，学习就是不断推翻过去的本身，等我学到了更深刻的知识，更好的技术时再回过头来对项目进行优化，才是正确的作法，现阶段的开发是必然的，不该该限于知识上的缺陷而畏手畏脚，放手去干，由于作得再差，能作出来就不算太差，作得再好，过一段时间看回如今写的代码也不会以为好，只有不断推翻如今的项目，从新优化，才能进步！衷心感谢小黄。