一、em和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。
二、vw和vh
-
百分比布局缺点:
1.计算百分数不方便。
2.多层嵌套时使用不方便。 -
vw:
1vw = 屏幕宽度的百分之一。 -
vh:
1vh = 屏幕高度的百分之一。 -
区别:
百分比参照的是父盒子
vw/vh 参照的是屏幕。
假设:拿到的设计稿是3.75rem的。 我们有个盒子 100*50;
使用vw表示1rem。
26.6667vw=1rem;
26.67vw=26.67% 1.1041rem -
过程方法:
1.拿到一个设计稿,假设这张设计稿是宽3.75rem。
2.其中一个盒子30px*100px。但是因为px是绝对单位,在别的移动端设备中,显示的效果就会不同。
3.应该使用百分比形式去表示盒子的宽高。
4.可选方案:
方法1 百分数 不好计算,特别是多个盒子嵌套时。
方法2 vw ,引入rem更好计算 -
总结:
100px/375=26.67%=26.67vw计算麻烦
设100px相当于1rem,则100px为1rem,30px为0.3rem
设置HTML根标签的font-size的值为26.67vm
盒子用rem来表示
html {
/* 对于375的设计稿来说,100px=1rem */
font-size: 26.67vw;
}
.box {
margin: 0 auto;
/* 30px*100px的一个盒子 */
width: 0.3rem;
height: 1rem;
background-color: brown;
}
三、sass
- css一些问题:
1.css需要书写大量冗余的代码。
2.不方便维护。 - sass:
作为css的一种扩展语言。它没有减少css的功能,而是在css的基础上引入了一些css原本没有的功能(变量,Mixin,运算,函数,嵌套)。 - 使用sass优点:
能让咱们写更少的代码,来实现更多的功能。
1.变量
格式:以$符号开头,跟变量名即可。
定义了一个变量。 变量名:变量值。
如果变量嵌套在字符串中,则必须写在#{}里面。
$bc-color:red;
$m-r:right;
2.嵌套
①在css中直接使用标签嵌套。
②有些时候需要使用父选择器,这个时候则使用 & 占位符。
③如果变量嵌套在字符串中,则必须写在#{}里面。
④属性嵌套:复合属性可以使用。
.button-group {
//直接使用标签嵌套
button {
font-size: 24px;
border: none;
border-radius: 4px;
color: #ffffff;
box-shadow: 0px 5px 5px black;
padding: 10px 20px;
//如果变量嵌套在字符串中,则必须写在#{}里面。
margin-#{$m-r}: 40px;
//需要使用父选择器,这个时候则使用 & 占位符。
&:hover {
animation: jumpjump 1s;
}
//属性嵌套:复合属性可以使用。
border: {
style: solid;
left: {
width: 4px;
color: #888888;
}
}
}
}
3.注释
- 单行注释:
//
不会保留到编译后的css文件中。 - 多行注释:
/* */
会保留到编译后的css文件,压缩文件则没有。 - 重要注释:
/*! */
会保留到编译后的css文件,压缩文件也会保留,一般用于版权声明。
4.mixin和继承
定义一个 混合。
参数名:默认值
混入(mixin)通过 @mixin 指令来定义。 @mixin name { property: value; property: value; … }
@mixin boxStyle($bc, $fc:red) {
background-color: $bc;
p {
color: $fc;
}
}
.box,
.box2 {
width: 200px;
height: 200px;
@include boxStyle(pink, salmon);
p {
width: 100%;
height: 100%;
line-height: 200px;
text-align: center;
}
}
5.继承
可以让一个选择器继承另一个选择器的所有样式。
@extend
.box2 {
@extend .box;
@include boxStyle(seagreen, tomato)
}
6.计算
div {
padding: 2px *4;
margin: 20px + 2px;
font-size: 16px - 2;
// 除法必须加小括号
border: (10px/2);
// 取绝对值
margin: abs(-10px);
// 四舍五入
margin: round(3.6px);
// 向上取整
margin: ceil(3.2px);
// 向下取整
margin: floor(3.999px);
width: percentage(36px/100px);
}
7.颜色
改变颜色的深浅
background-color: lighten(#cc3, 30%);
background-color: darken(#cc3, 40%);