【博学谷学习记录】超强总结，用心分享 _ 前端开发 移动端css重难点总结

---

Less：

& ：表示当前选择器

<a href="#" class="current"></a>

a{
	&.current{
			        
	}
}

1. 安装

安装vscode插件：easy less ， less文件保存自动生成css文件

2. 计算能力

width: 100+50px ; 
height: 5*32px ;
width: (100/4px)  或者  100 ./ 4px
less4新语法，以前可以直接写 100/4px

3. 导入与导出

导入：  @import “文件路径”; 
导出： 
	方法一： 
		配置插件： 设置 → 搜索EasyLess → 在setting.json中编辑 → 添加代码（注意，必须是双引号） 
	方法二：
		Less文件第一行添加如下代码, 注意文件夹名称后面添加 / 
		//out :  ./less/
禁止导出：   //out : false  （比如base.less  common.less）

弹性盒

要想使用弹性盒，就要先将元素设置成弹性容器
display : flex ;  块级弹性容器
display : inline-flex ;    行内弹性容器

主轴方向：
	flex-direction : row                          横向，自左向右
				row-reverse                       自右向左
				column                    纵向，自上向下
				column-reverse                 自下向上
	flex-wrap : wrap   自动换行
			 wrap-reverse  反向换行
			 nowrap    默认，不换行
	简写：flex-flow : row wrap       （添加在父元素身上）
	主轴上的对齐方式（水平对齐方式）：        （添加在父元素身上）
	justify-content : flex-start     主轴起点
				 flex-end       主轴终点
				 center          中间
				 space-between     将空白区域平均分配到之间
				 space-evenly        元素两侧都有（距离相等）
				 space-around       先放在元素之间，其余放在前后
				 stretch         拉伸撑满
	align-content   行对齐方式（行与行之间的排列关系，水平方向换行下去的元素，与垂直对齐没关系）
测轴方向：
	侧轴上的对齐方式（垂直对齐方式）：          （添加在父元素身上）
	align-items : flex-start     主轴起点
			    flex-end       主轴终点
			    center          中间
			    stretch         拉伸撑满（如果子元素不设置高度）
	align-self  ：控制某个弹性盒子在侧轴的对齐方式     （添加在子元素身上）

使用flex属性修改弹性盒子伸缩比：子元素身上
	flex : 整数          只占用父元素盒子的剩余尺寸

总结：如果给子元素设置align-items : center，子元素不给宽高的话 ，子元素的高会撑满，宽度被内容撑开，设置align-items : center的元素宽高都被内容撑开

弹性盒 省略号

弹性盒中，单行文本，超出部分变省略号，因为弹性盒的尺寸可以被内容撑开，不换行的文字可以是盒子的尺寸，导致省略号不出现，所以可以加width : 0

div{         外层盒子
	flex: 1;
	width: 0;
}
p{           内部段落文字
	text-overflow: ellipsis;        /*超出部分显示省略号*/
	white-space: nowrap;                 /*规定段落中的文本不进行换行 */
	overflow: hidden; 
}

移动端适配

1. rem

相对单位rem
1rem = HTML的1 font-size （HTML默认16px）
rem 取决于页根元素的字体大小，即html元素的字体大小。

em与rem区别：
	font-size : 200px;
	width : 1em;       
	1em = 1 font-size(1em等于1个字体大小)    
	em  取决于他们使用的字体大小。 受从父元素继承过来的字体大小影响，除非显式重写与一个具体单位。

2. 媒体查询

为不同的设备，不同的屏幕大小设置不同的样式
目前rem布局方案中，将网页等分成10份， HTML标签的字号为视口宽度的 1/10

@media (width:375px) {
    html{
        font-size: 37.5px;   
    } 
}
@media (width:320px) {
    html{
        font-size: 32px;
    } 
}

.box{
    width: 5rem;
    height: 3rem;
}

代码中的尺寸rem = 设计稿中得到的尺寸 px /（设备宽度/10）

@rootSize : 37.5rem
height : (50/@rootSize)

3. vw / vh

相对于视口的尺寸计算结果。 1vw=1%视口宽度
vw单位尺寸 = px单位数值 / (1/100视口宽度)
vw与vh不可以混用，否则盒子会变形