移动适配
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/10rem适配原理：（实现在不同宽度的设备中，网页元素尺寸等比缩放效果）
思考：工作中，书写代码的尺寸要参考设计稿尺寸，设计稿中是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: falsevw/vh：未来的解决方案
标签：网页,Less,字号,宽度,No.2,rem,CSS From： https://www.cnblogs.com/renzlllj/p/17168308.html