进入第一篇
认识是从开始查询行业内部问题开始的，百度搜问题时，发现好多小伙伴都在用记录他们工作中遇到的难题和解决方法，所以打算开始在这里记录下自己的一方天地。
首先简单介绍下背景，我是一个刚转行的前端小白。之前小时候就一直对电脑感兴趣，但选择的学业方向不是这方面，恰好前段时间机缘巧合，投身了这个行业。相信接下来会有很多坑要入，也会有很多新知识要去学，在这里做个记录，方便以后遇到问题时可以有查阅，也可以吸收借鉴他人的经验。
现在开始进入正题。
今年初，三月份在本地的一家软件公司入职，很庆幸老板的面试轻松，只问了会不会做数据展示，恰好和我学习的知识对口，就直接入职了。要知道，在我们这儿能遇到和我学习内容对口的公司是屈指可数的。再次感谢好运气。
然后，入职的第二天，开始接一个全新的项目，是做一个网站，看着不难，但毕竟是学习后的第一个项目，也是检验自己知识储备的一个机会。但这也是我入坑的开始。
做项目之前，我问了产品经理，这个项目需不需要使用框架，对技术有什么要求等问题。回答是，直接写就可以，不需要任何框架。这就是第一个血的教训。不要全部听从除了公司和你职务相同的任何人的话。否则你遇到的问题是难以想象的。（也没有那么严重啦，夸张而已）总之，在做项目之前最好先问和你职务相同的前辈，会省事不少。
就这样，在没有套用任何框架的前提下，用了两周完成了人生中第一个网站，共计14页。还好都是静态页面加一些小的组件（插件）。插件是从Jquery插件库中搜索的，有些很好用，但有些下载后套用到页面很难修改，可能是能力不足导致。还是需要潜心修炼技术呀~
接下来具体总结下遇到的问题及解决方案：
1.框架的使用
前端的框架是对开发者很友好的一个化繁为简的解决之道。使用框架需要考虑的大概就是和后台人员的配合会不会冲突，向Vue的调试，如果后台不回的话，你在没有把握能解决问题的前提下，最好不使用。但像Bootstrap之类的简单框架使用起来简直不要太得心应手。
2.网页内的小组件
记得遇到的第一个问题就是，插入一个日历。因为之前写过一个简单的日历组件，就打算自己入手开始写。结果折腾了将近一天，没有写出一份满意的，主要是没有及时做到复习，导致该怎么入手完全没有头绪，所以只能求助插件库，也就是我使用插件的开始。插件的好处就很明显了，可以直接下载使用，只需要看得懂代码，然后根据自己的需求稍加调试就可以做出很漂亮的效果。但是有的代码涉及内容太多，加上刚开始熟悉，太复杂的不会调试，所以基本找些写的最少的，又好理解的。真的佩服大神们能用代码累积出这么丰富多彩的页面效果，视觉体验一级棒！
3.基础知识应用
（1）最简单的是使一张图片自适应屏幕，之前的做法是调整img标签的width,height，但有的时候图片太大或太小很难做到想要的效果
解决方法：把图片做成div的背景图片，在进行对background和background-size的调试，就可以很轻松地解决图片适应问题。
eg：
.logo {
float:left;
width:80%;
height:100%;
background:url(../images/logo.jpg)center center / 100% 100% no-repeat;
}
（2）在写页面时有一个整体思维
解决方法：把相同的页面或是样式一致的页面内容写到一个css （我用的是common-style,借鉴前辈得来的）文件中去，并对所有需要做处理的标签初始化，能省去重复性操作，也加快了开发人员的速度。
eg：
body,div,ul,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {padding:0;margin:0;box-sizing:border-box; }
ul,li{list-style:none;list-style-type:none;}
a{text-decoration:none;color:#141415;}
html ,body{width:100%;height:100%;}
body{background-color:#fff;}
（3）在写页面之前，都会遇到处理分辨率的问题
解决方法：
方法一
给css文件加一个@Midea标签，使用方法暂时不熟悉，等之后熟悉后更新
方法二
在body下加一个大div wrap包含全部内容，给他相应的属性，方便适应不同分辨率及大方向的调整。属性如下：
eg：
.app_wrap{max-width:640px;min-width:320px;width:100%;min-height:100%;margin:0 auto;position:relative;overflow-x:hidden;
/*background: pink;*/
/*border: 1px solid salmon;*/
}
（这个是做的手机端屏幕适应，注释部分是用作调试的）
（4）写清每一部分的注释
解决方法：这个真的是动动手指就可以一劳永逸的办法。把你写的代码每部分标注好，实用性命名很重要，之前就犯过标签，直接注释section，导致后来修改时自己也不清楚这是写的那部分。所以，注释规范要做好，要简明达意，使用页面上的部分也可以，中英文都行，能让人一眼就知道是对应页面哪部分就可以。也方便以后的调试和交接。
（5）命名规则
所有的html,css,js等文件都是使用英文命名的，如果你英语不好就去百度，然后把你的页面名字改成英文，这个解释起来很方便，毕竟程序是外国人创建的，使用中文有时会出现不解析或是乱码现象，注意一下就好。
像基本的，首页index。
大部分程序员喜欢建文件夹来存放不同格式的文件，所以写页面之前，一般会有四个文件夹或是更多html, css, js, images, lib等。也可能是lib包含js, css 等
（6）标签的选择
h5新增了很多标签，例如： header, nav, container, section, footer等
有些标签是低版本IE不支持的，也有些标签是全文只能使用一次的。所以建议，在适应IE的前提下，最好使用div加类，可以避免不必要的麻烦。
（7）width，height， font-size, line-height等的使用
在一个页面中，width最好给成百分比，其他涉及到高度的属性，可以使用px, em, rem
区别：px， em是固定了分辨率尺寸； rem是相对尺寸，会更精细的显示，但需要提前做转化。（也可以自己算，不嫌麻烦的话）
默认规定是：16px = 1rem
今天想到的就这么多，后期想到再补充。
我想，将来的自己一定会感谢今天辛苦码字的我，希望转行的这条路越走越顺，期待成为大神的自己，嘿嘿！
补充：以上是个人的一些经验及看法，如果有错误之处，希望大家帮忙纠正，感谢！