移动Web 第五天

81 阅读2分钟

移动适配

1.长度单位

a.rem 能够使用rem单位设置网页元素的尺寸

em单位:

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

2.rem移动适配 - 媒体查询

能够使用媒体查询设置差异化CSS样式 1.媒体查询能够检测视口的宽度,然后编写差异化的 CSS 样式 2. 当某个条件成立, 执行对应的CSS样式

2.写法 :

image.png

3.rem移动适配

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

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

image.png

2.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.flexible

使用flexible js配合rem实现在不同宽度的设备中,网页元素尺寸等比缩放效果 1.flexible.js是手淘开发出的一个用来适配移动端的js框架。 2.核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size。

image.png

二、Less

1.Less语法

使用Less运算写法完成px单位到rem单位的转换

  1. Less是一个CSS预处理器, Less文件后缀是.less 2 扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力。
  2. 注意:浏览器不识别Less代码,目前阶段,网页要引入对应的CSS文件

2.注释:

  1. 单行注释 1. 语法:// 注释内容 2. 快捷键:ctrl + / l 2.块注释 1.语法:/* 注释内容 */ 2. 快捷键: shift + alt + A

3.运算:

  1. 加、减、乘直接书写计算表达式 2. 除法需要添加 小括号 或 . 3.注意: 1. 表达式存在多个单位以第一个单位为准

image.png

4.用Less嵌套写法

image.png

5.设置属性

能够使用Less变量设置属性值 变量 1. 方法二: 把颜色提前存储到一个容器,设置属性值为这个容器名 变量:存储数据,方便使用和修改。 2.语法: 1. 定义变量:@变量名: 值; 2. 使用变量:CSS属性:@变量名

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

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