前端——移动Web开发04

#博学谷IT学习技术支持#

目录

1.flex布局

2.移动适配

2.1.rem

3.less

---

1.flex布局

思考：Flex布局模型中，弹性盒子默认沿着哪个方向排列？

答： 水平方向 。

思考：如何实现内容垂直排列？

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

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

属性值	作用
row	行，水平（默认值）
column	* 列, 垂直
row-reverse	行, 从右向左
column-reverse	列, 从下向上

思考：默认情况下，多个弹性盒子如何显示？

答：默认情况下排在一行

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

调整行对齐方式 ： align-content

         取值与 justify-content基本相同

2.移动适配

2.1.rem

网页效果：

        屏幕 宽度不同 ，网页元素 尺寸不同 （ 等比缩放 ）

px单位或百分比布局可以实现吗？

        px单位是绝对单位

        百分比布局特点宽度自适应，高度固定

适配方案

        rem

        vw / vh

*********************************

rem单位

         相对 单位

        rem单位是相对于 HTML标签的字号 计算结果

         1rem = 1HTML字号大小

思考

        1. 手机屏幕大小不同，分辨率不同， 如何设置不同的HTML标签字号？

                 媒体查询

                        

                         媒体查询 能够 检测视口的宽度 ，然后编写 差异化的 CSS 样式

                        当某个条件成立, 执行对应的CSS样式

 

        2. 设备宽度不同，HTML标签字号设置多少合适？

                设备宽度大， 元素尺寸大

                设备宽度小，元素尺寸小

目前rem布局方案中，将网页等分成10份， HTML标签的字号为 视口宽度 的 1/10

思考：

        工作中，书写代码的尺寸要参照设计稿尺寸，设计稿中是px还是rem？

        如何确定rem的数值？

rem单位尺寸

        1. 根据视口宽度，设置不同的HTML标签字号

        2. 书写代码，尺寸是rem单位

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

                        查看设计稿宽度 → 确定参考设备宽度(视口宽度) → 确定基准根字号（1/10视口宽度）

                2.2 rem单位的尺寸

                        N * 37.5 = 68 → N = 68 / 37.5

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

思考：咱们检测了3个视口，分别设置了根字号，有什么弊端吗？

答：手机设备多，屏幕尺寸不一，视口不仅仅有这3个

************************************************************

目标：使用flexible js配合rem实现在不同宽度的设备中，网页元素尺寸等比缩放效果

flexible.js是手淘开发出的一个用来适配移动端的js框架

核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size。

        

3.less

思考：在px单位转换到rem单位过程中，哪项工作是最麻烦的？ 

答：除法运算。 CSS不支持计算写法 。

解决方案：可以通过Less实现。

********************************************************

Less是一个 CSS预处理器 , Less文件后缀是 .less

扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力。

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

编译插件：

Easy Less :

         vscode插件

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

注释：

        单行注释：

                语法：// 注释内容

                 快捷键：ctrl + /

        块注释：

                语法：/* 注释内容 */

                快捷键： shift + alt + A

运算：

        

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

         除法 需要添加 小括号 或 .

        

注意：

        表达式存在多个单位以 第一个单位 为准

     

嵌套：

        思考：书写CSS选择器时， 如何避免样式冲突？

 

使用Less嵌套写法生成后代选择器：

嵌套：

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

语法：

        格式： 

        

        less文件内容：

        

        自动生成css 文件，内容：

        

注意：&不生成后代选择器，表示当前选择器，通常配合伪类或伪元素使用

 

思考：

        网页中, 文字文字颜色基本都是统一的， 如果网站改版，变换文字颜色， 如何修改代码？

         方法一：逐一修改属性值（太繁琐）

        方法二： 把颜色提前存储到一个容器，设置属性值为这个容器名

变量：

        

        方法二： 把颜色提前存储到一个容器，设置属性值为这个容器名

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

        语法：

                

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

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

                

 

 思考：

        开发网站时，网页如何引入公共样式？

                CSS：书写link标签

                Less：导入

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

        

思考：

        目前，Less文件导出的CSS文件位置是哪里？

出现在同一文件夹下：

 

 使用Less语法导出CSS文件：

        方法一：

                配置EasyLess插件， 实现所有Less有相同的导出路径

        配置插件： 设置 → 搜索EasyLess → 在setting.json中编辑 → 添加代码（注意，必须是双引号）

 

方法二：控制当前Less文件导出路径

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

         

思考：所有的Less文件都需要导出CSS文件吗？

         

如果有不需要导出的怎么办？

禁止导出 ：

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