rem
em:相对单位,它需要一个参考属性。
当前元素的字体大小。
rem:相对单位 root em。 参考值为:HTML根标签的font-size的值。
iPhone5 320px 上面有640个像素点。 1px=1个物理像素点 1px=2个物理像素点。 160/320 一半
iPhoneX 375px 187.5
rem布局的原理:
动态修改html根标签中的font-size值。
实现方式:
1.通过js
2.通过vw。
vm、vh
百分比布局缺点:
1.计算百分数不方便。
2.多层嵌套时使用不方便。
vw:1vw = 屏幕宽度的百分之一。
vh: 1vh = 屏幕高度的百分之一。
区别:
百分比参照的是父盒子
vw/vh 参照的是屏幕。
理解例子
假设有一个375宽的设计稿,也就是375像素(px),里面有一个100px100px的盒子,
当然盒子占当前屏幕的实际宽高为100100
但是不同型号的屏幕宽度与像素(px)并不都是1:1的,有1:2、1:3的,我们在写页面时不可能为每一个型号写一份代码,我们只需要在不同宽度的设备中使内容等比例缩放就可以了
此时解决这个问题有两种方式:
- 百分比
- 使用vw
但是百分比在多层嵌套时会很不方便,盒子的百分比一般情况下是相对于父盒子来计算的(绝对定位的盒子就是相对于有定位的祖先盒子计算的)。但是使用vw就不同了,vw:表示当前屏幕的百分之一(vw就像是一个%)
在上面的例子中375宽的百分之一为3.75(1vw=3.75),盒子的宽为100px,那么占设计稿多大呢?
100/375=0.2667=26.67%
每一个盒子不可能都是100*100这样容易换算的值,,那么我们就要找一个中间值,使计算简单,
rem, 使1rem=100px ,这时1rem=26.67vw,那么在写代码的时候设置标签的font-size:26.67vw
,里面的盒子直接使用rem
sass
css一些问题:
1.css需要书写大量冗余的代码。
2.不方便维护。
sass:作为css的一种扩展语言。它没有减少css的功能,而是在css的基础上引入了一些css原本没有的功能(变量,Mixin,运算,函数,嵌套)。
使用sass优点:
能让咱们写更少的代码,来实现更多的功能。
sass时css的扩展:就是在css基础上增添了一些新的属性
使用步骤:
- 安装插件,输入easy sass找到后安装
- 检查配置信息,在扩展设置中找到settings.json检查是否有一下信息,有就不用管了,没有就添加上,
"easysass.formats": [
{
"format": "expanded",
"extension": ".css"
},
{
"format": "compressed",
"extension": ".min.css"
},
],
"easysass.targetDir": "css/" //路径
- 创建两个文件夹,css文件夹与sass文件夹,且必须是同一级
- 在sass文件夹下建一个demo.scss文件,这里面写样式保存,系统会自动在同级的css文件夹下生成一个demo.css文件和一个demo.min.css文件,这两个文件的内容与demo.css文件的内容相同,但代码书写形式不同
【注】
若是系统没有自动生成,可以试试,点击 文件——打开文件夹——找到css文件夹与sass文件夹的父文件夹,打开,然后在保存一下.sass文件,就会自动生成了
1.变量
格式:以$符号开头,跟变量名即可。
$bc:teal;
2.嵌套
在css中直接使用选择器嵌套。
有些时候需要使用父选择器,这个时候则使用 & 占位符。
属性嵌套:复合属性可以使用。
border: {
style:solid;
left:{
width: 4px;
color: #888;
}
};
3.注释
单行注释:// 不会保留到编译后的css文件中。
多行注释:/* / 会保留到编译后的css文件,压缩文件则没有。
重要注释:/! */ 会保留到编译后的css文件,压缩文件也会保留,一般用于版权声明。
【注】当使用多行注释时,内容不要出现特殊符号,如“{}”就不可以
混合属性关键词
格式(eg):@mixin 可调用的名字(关键词,关键词){......}
【注】在使用混合属性时,混合属性应写在调用样式的前面
颜色的深浅
background-color: lighten(#cc3,30%);