No.2.5

移动适配

rem：目前多数企业在用的解决方案

rem：（能够使用rem单位设置网页元素的尺寸）

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

px单位或百分比布局可以实现吗？　　px单位是绝对单位　　百分比布局特点宽度自适应，高度固定

适配方案　　rem　　vw / vh

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

思考： 1. 手机屏幕大小不同，分辨率不同，如何设置不同的HTML标签字号？媒体查询　　2. 设备宽度不同，HTML标签字号设置多少合适？

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

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

rem移动适配 -媒体查询：　　能够使用媒体查询设置差异化CSS样式

写法：　　@media (媒体特性) {　　　　　　　　@media (width:320px) {

　　　　　　　　选择器 {　　　　　　　　　　　　html {

　　　　　　　　　　CSS属性　　　　　　　　　　　　font-size: 32px;　　

　　　　　　　　}　　　　　　　　　　　　　　　　}

　　　　　 }　　　　　　　　　　　　　　　　 }

设备宽度不同，HTML标签字号设置多少合适？　　设备宽度大，元素尺寸大　　设备宽度小，元素尺寸小

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

rem适配原理：（实现在不同宽度的设备中，网页元素尺寸等比缩放效果）

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

如何确定rem的数值？　

计算68px是多少个rem?（假定设计稿适配375px视口）　　N * 37.5 = 68 ——> N = 68 / 37.5

rem单位尺寸　　

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

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

2.rem单位的尺寸　

N * 37.5 = 68 → N = 68 / 37.5　　rem单位的尺寸 = px单位数值 / 基准根字号

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

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

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

Less语法：（使用Less语法快速编译生成CSS代码）

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

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

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

注释：单行注释：语法：// 注释内容　　快捷键：Ctrl+/　　多行注释（块注释）：语法：/* 注释内容 */　　快捷键：Shift+alt+A

Less语法：（使用Less运算写法完成px单位到rem单位的转换）（能够使用Less嵌套写法生成后代选择器）

运算：加、减、乘直接书写计算表达式　　除法需要添加小括号或 .

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

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

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

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

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

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

语法L定义变量：@变量名: 值;　　使用变量：CSS属性: @变量名;

Less语法：（能够使用Less导入写法引入其他Less文件）

思考：开发网站时，网页如何引入公共样式？　　CSS: 书写link标签　　Less:导入

导入：@import "文件路径";　　

@import './01-体验less.less';

@import './02-注释';

如果是less文件，可以省略后缀.less

使用Less语法导出CSS文件

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

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

方法二：控制当前Less文件导出路径　　 Less文件第一行添加如下代码, 注意文件夹名称后面添加 /

// out: ./css/

//out: ./css/common.css

思考：所有的Less文件都需要导出CSS文件吗？　　禁止导出: 在less文件第一行添加:　　 // out: false

vw/vh：未来的解决方案

巴特西

No.2.5

最新文章

热门文章