移动端项目开发心得

Posted zona_house

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了移动端项目开发心得相关的知识，希望对你有一定的参考价值。

　　通过这次项目开发，使我对布局有了更深层次的理解，对float和position的运用也更得心应手。体会到float和position对页面的负面影响。其中，position:absoulte/fiexd会让元素脱离文档流，其后面的元素（暂且称为候补元素吧）会占据原来的位置，需要对候补元素的margin padding做出相应调整；而float同样会让元素脱离文档流，后面的元素同样会占据其原来的位置，不同的是，其候补元素的内容会环绕在float元素周围。

 

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>

演示结果

　　　　

 

对移动端的认知有了更深刻的认识，由于手机屏幕几乎每一个地方都能对用户做出反应，所以移动开发会大量使用到a链接作为元素容器，为了便于设置宽高，应在公共样式中设置：　

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

 

同样重要的还有对图片的处理，应将小图片制作成雪碧图，这样做不但节省了引入照片的开发时间，还能节省宽带，带来更好的用户体验。

 

另外，还要培养组件开发的思想，页面中存在大量可重复调用的组件，将他们写入html文件并注释,在base.css中写入样式，那么其他页面中需要用到时，直接复制HTML文档中的代码即可，一次开发，重复利用，方便高效。

 

在非技术方面：

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

 

以上是关于移动端项目开发心得的主要内容，如果未能解决你的问题，请参考以下文章

移动端项目开发心得

基于 Vue 和 TS 的 Web 移动端项目实战心得

基于Vue和TS的Web移动端项目实战心得

基于 Vue和 TS的Web移动端项目实战心得

解决移动端报错：Unable to preventDefault inside passive event listener due to target being treated as……(代码片段

移动端网页设计经验与心得