【博学谷学习记录】超强总结，用心分享| 移动web

视口

 

        viewport：视口 
        width=device-width：视口宽度 = 设备宽度 
        initial-scale=1.0：缩放1倍（不缩放）

百分比布局也叫流式布局

效果： 宽度自适应，高度固定。

Flex布局/弹性布局:是一种浏览器提倡的布局模型 

        布局网页更简单、灵活 

        避免浮动脱标的问题

作用 

        基于 Flex 精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生。 

Flex布局非常适合结构化布局 

设置方式 

        父元素添加 display: flex，子元素可以自动的挤压或拉伸 

        组成部分： 弹性容器 、弹性盒子 、主轴 、侧轴 / 交叉轴

主轴对齐方式：justify-content

侧轴对齐方式

修改侧轴对齐方式属性: 

        align-items（添加到弹性容器） 

        align-self： 控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）
 

伸缩比

        属性： flex : 值; 

        取值分类 

        数值(整数) 

        注意 : 只占用父盒子剩余尺寸

主轴方向：flex-direction

        主轴默认是水平方向, 侧轴默认是垂直方向 

        修改主轴方向属性: flex-direction
 

弹性盒子换行

        弹性盒子换行显示 : flex-wrap: wrap; 

        调整行对齐方式 ：align-content 

        取值与justify-content基本相同

rem移动适配: 使用rem单位设置网页元素的尺寸

rem移动适配 -媒体查询
写法
 

 

rem适配原理

rem单位尺寸 

         确定设计稿对应的设备的HTML标签字号 

         查看设计稿宽度 → 确定参考设备宽度(视口宽度) → 确定基准根字号（1/10视口宽度）  rem单位的尺寸 
 N * 37.5 = 68 → N = 68 / 37.5 

rem单位的尺寸 = px单位数值 / 基准根字号

Less语法

Less语法快速编译生成CSS代码

        Less是一个CSS预处理器, Less文件后缀是.less 
扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力。 

注意：浏览器不识别Less代码，目前阶段，网页要引入对应的CSS文件。
 

Easy Less : 

vscode插件 

作用：less文件保存自动生成css文件

Less语法

注释：  

单行注释 

语法：// 注释内容      快捷键：ctrl + / 

块注释 
语法：/* 注释内容 */      快捷键： shift + alt + A

运算： 

        加、减、乘直接书写计算表达式  

        除法需要添加 小括号 或 .

嵌套： 

作用：快速生成后代选择器。

语法：

变量：存储数据，方便使用和修改。 

语法： 

定义变量：@变量名: 值; 

使用变量：CSS属性：@变量名;

使用Less导入写法引用其他Less文件

导入: @import “文件路径”;

使用Less语法导出CSS文件

Less文件第一行添加如下代码, 注意文件夹名称后面添加 /
 

 禁止导出 

在less文件第一行添加: // out: false

vw适配原理

vw单位尺寸 

        确定设计稿对应的vw尺寸 （1/100视口宽度）  

        查看设计稿宽度 → 确定参考设备宽度 (视口宽度) → 确定vw尺寸 （1/100 视口宽度） 

        vw单位的尺寸 = px单位数值 / ( 1/100 视口宽度 )

vh适配原理

vh单位尺寸 

确定设计稿对应的vh尺寸 （1/100视口高度） 

        查看设计稿宽度 → 确定参考设备高度 (视口高度) → 确定vh尺寸 （1/100 视口高度）  

        vh单位的尺寸 = px单位数值 / ( 1/100 视口高度 )