@变量名:值;
2.3.1 Less编译
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、让开发更简单,提高了开发的效率;
最后
小编综合了阿里的面试题做了一份前端面试题PDF文档,里面有面试题的详细解析
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
虽只说了一个公司的面试,但我们可以知道大厂关注的东西并举一反三,通过一个知识点延伸到另一个知识点,这是我们要掌握的学习方法,小伙伴们在这篇有学到的请评论点赞转发告诉小编哦,谢谢大家的支持!