最后前端到底应该怎么学才好？
如果你打算靠自己摸索自学，那么你首先要了解学习前端的基本大纲，这是你将要学习的主要内容，理解以及掌握好这些内容，便可以找到一份初级的前端开发工作。你还需要有一套完整的前端学习教程，作为初学者最好的方式就是看视频教程学习，初学者容易理解接受。
不要选择买书学习，这样的方式没有几个人能学会，基本都是看不下去书，也看不懂书。如果喜欢看书的学弟，可以买一些经典的书籍作为辅助即可，主要还是以看教程为主。每天抽出固定几个小时学习，做好长期学习的准备。学习编程并不是每天光看视频，你学习编程最重要的目的是为了编写软件产品，提供给大众使用，所以用手写出代码实现功能才是我们要做的事情。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
less编译：本质上，less包含一套自定义的语法以及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的CSS文件。所以，我们需要把我们的less文件，编译生成为CSS文件，这样我们的html页面才能使用。使用easy less插件编译。
2.3.1 Less嵌套
说白了就是子元素的样式直接写到父元素里面就好了。
语法：
1、选择器的嵌套：
#header .logo{
width：300px;
}
Less嵌套写法：
#header{
.logo{
width：300px;
}
}
2、选择器的嵌套：
a:hover{
color:red;
}
Less嵌套写法：
a{
&:hover{
color:red;
}
}
注意：
如果遇见（交集|伪类|伪元素选择器）
1、内层选择器的前面没有&符号，则它被解析为父选择器的后代；
2、如果有&符号，它就被解析为父元素或者父元素的伪类。
2.3.1 Less运算
任何数字、颜色或者变量都可以参与运算。就是Less提供了加（+）、减（-）、乘（*）、除（/）算术运算。
less里面写：
@width：10px + 5;
div{
border:@width solid red;
}
生成的css：
div{
border:15px solid red;
}
less甚至还可以这样：
width:(@width + 5) * 2;
注意：
-
乘号（*）和除号（/）的写法；
-
运算符中间左右有个空格隔开1px +5；
-
对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位；
-
如果两个值之间只有一个值有单位，则运算结果就取该单位；
-
让一些不能等比自适应的元素，达到当设备尺寸发生改变的时候，等比例适配当前设备。
-
使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化元素尺寸也会发生变化，从而达到等比缩放的适配。
3.1 设计稿常见宽度
iPhone4.5：640px;
iPhone678：750px;
Android：常见320px、375、360、384、400、414、500、720px，
大部分4.7~5寸的安卓设备为720px。
现在基本以750px为准。
3.2 动态设置html标签font-size大小步骤
-
假设设计稿是750px;
-
假设我们把整个屏幕划分为15等份（划分标准不一可以是20份也可以是10等份）;
-
每一份作为html字体大小，这里就是50px;
-
那么在320px设备的时候，字体大小为320/15就是21.33px;
-
用我们页面元素的大小除以不同的html字体大小会发现他们比例还是相同的；
-
比如我们以750px为标准设计稿
-
一个100_100像素的页面元素在750px屏幕下，就是100/50转换为rem是2rem_2rem比例是1比1；
-
320屏幕下，html字体大小为21.33，则2rem=42.66px，此时宽和高都是42.66，但是宽和高的比例还是1比1；
-
但是已经能实现不同屏幕下，页面元素盒子等比例缩放的效果。
3.3 元素大小取值方法
-
公式：页面元素的rem值=页面元素值（px）/(屏幕宽度/划分的份数)
-
屏幕宽度/划分的份数就是html font-size的大小；
-
页面元素的rem值=页面元素值（px）/html font-size字体大小；
======================================================================
就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。
设备划分：
-
超小屏幕（手机）：<768px;
-
小屏设备（平板）：>=768~<992px;
-
中等屏幕（桌面显示器）：>=992px~<1200px;
-
宽屏设备（大桌面显示器）：>=1200px;
响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果。
原理：
就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。
平时响应式尺寸划分：
1、超小屏幕：设置宽度100%；
2、小屏幕：设置宽度为750px；
3、中等屏幕：宽度设置为970px；
4、大屏幕：宽度设置为1170px；
bootstrap简介：
bootstrap来自twitter（推特），是目前最受欢迎的前端框架。bootstrap是基于HTML、CSS和JAVASCRIPT的，它简洁灵活，使得web开发更加快捷。
框架：顾名思义就是一套架构，它有一套比较完整的网页功能解决方案，而且控制权在框架本身，有预制样式库、组件和插件。使用者要按照框架所规定的某种规范进行开发。
优点：
1、标准化的html+css编码规范；
2、提供了一套简洁、直观、强悍的组件；
3、有自己的生态圈，不断的更新迭代；
4、让开发更简单，提高了开发的效率；
bootstrap使用：
1、创建文件夹结构
跳槽是每个人的职业生涯中都要经历的过程，不论你是搜索到的这篇文章还是无意中浏览到的这篇文章，希望你没有白白浪费停留在这里的时间，能给你接下来或者以后的笔试面试带来一些帮助。
也许是互联网未来10年中最好的一年。WINTER IS COMING。但是如果你不真正的自己去尝试尝试，你永远不知道市面上的行情如何。这次找工作下来，我自身感觉市场并没有那么可怕，也拿到了几个大厂的offer。在此进行一个总结，给自己，也希望能帮助到需要的同学。
面试准备
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
面试准备根据每个人掌握的知识不同，准备的时间也不一样。现在对于前端岗位，以前也许不是很重视算法这块，但是现在很多公司也都会考。建议大家平时有空的时候多刷刷leetcode。算法的准备时间比较长，是一个长期的过程。需要在掌握了大部分前端基础知识的情况下，再有针对性的去复习算法。面试的时候算法能做出来肯定加分，但做不出来也不会一票否决，面试官也会给你提供一些思路。
4480
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
