移动开发-rem适配布局-媒体查询

rem单位:

  1. rem (root em) 是一个相对单位，类似于em，em是父元素字体大小
  2. 不同的是rem的基准是相对于html元素的字体大小
  3. 比如, 根元素html设置font-size=12px; 非根元素设置width:2rem; 换成px表示就是24px
  4. 父元素文字大小可能不一致，但整个页面只有一个html，可以很好来控制整个页面元素大小

什么是媒体查询:

  1. 媒体查询 (Media Query) 是CSS3新语法
  2. 使用@media查询，可以针对不同的媒体类型定义不同的样式
  3. @media 可以针对不同的屏幕尺寸设置不同的样式
  4. 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
  5. 目前针对很多苹果、Android手机、平板等设备都用得到多媒体查询

语法规范:

1️⃣media type 查询类型:

  1. 将不同的终端设备划分成不同的类型，称为媒体类型
值说明
all用于所有设备
print用于打印机和打印预览
screen用于电脑屏幕，平板电脑，智能手机等

2️⃣关键词:

  1. 关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件
and可以将多个媒体特性连接到一起，相当于 且 的意思
not排除某个媒体类型，相当于 非 的意思，可省略
only指定某个特定的媒体类型，可省略

3️⃣媒体特性:

每种媒体类型都有各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格，暂且了解三个，注意他们要加小括号包含

值说明
width定义输出设备中页面可见区域的宽度
min-width定义输出设备中页面最小可见区域宽度
max-width定义输出设备中页面最大可见区域宽度

4️⃣媒体查询+rem实现元素动态大小变化:

  1. rem单位是跟着html来走的，有了rem页面元素可以设置不同大小尺寸
  2. 媒体查询可以根据不同设备宽度来修改样式
  3. 媒体查询+rem 就可以实现不同设备宽度，实现页面元素大小的动态变化

1️⃣引入资源 (理解) :

  1. 当样式繁多的时候，可以针对不同的媒体使用不同的css
  2. 原理，就是直接在link中判断设备的尺寸，然后引用不同的css文件
1
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

2️⃣维护CSS的弊端:

  1. CSS是非程序式语言，没有变量、函数、SCOPE（作用域）等概念
  2. CSS需要书写大量看似没有逻辑的代码，CSS 冗余度是比较高的
  3. 不方便维护及扩展，不利于复用
  4. CSS没有很好的计算能力
  5. 非前端开发工程师来讲，往往会因缺少CSS编写经验而很难写出组织良好且易于维护的CSS代码

Less 介绍:

  1. Less (Leaner Style Sheets) 是一门CSS扩展语言，也是CSS预处理器
  2. 做为CSS一种形式的扩展，它并没有减少CSS功能，而是在现有的CSS语法上，为CSS加入程序式语言的特性
  3. 它在CSS的语法基础之上，引入了变量，Mixin(混入)，运算以及函数等功能，大大简化了CSS的编写，并且降低了CSS的维护成本，Less可以让我们用更少的代码做更多的事
  4. Less中文网址： http://lesscss.cn/
  5. 常见的CSS预处理器：Sass、Less、Stylus
  6. 一句话：Less是一门CSS预处理语言，它扩展了CSS的动态特性

    Less 安装 (如果使用Vscode无需安装node) :

  7. 安装nodejs，可选择8.0版本，网址：http://nodejs.cn/download/
  8. 检查是否安装成功，使用cmd命令输入 node –v 查看版本
  9. 基于nodejs在线安装Less，使用cmd命令 npm install -g less
  10. 检查是否安装成功，使用cmd命令 lessc -v 查看版本

Less 使用:

Less变量、Less编译、Less嵌套、Less运算

Less 编译:

本质上，Less包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则 最终会通过解析器，编译生成对应的CSS文件

所以，只需要把我们的less文件 编译生成为css文件 就可以了

Vscode Less 插件🔴: Easy LESS

1️⃣Less 变量:

变量是指没有固定的值，可以改变的，因为CSS中的颜色和数值等 经常使用

1
@变量名:值;

2️⃣变量命名规范:

  1. 必须有@为前缀
  2. 不能包含特殊字符
  3. 不能以数字开头
  4. 大小写敏感
1
@color: pink;

3️⃣Less 嵌套:

  1. 如果要用 (交集、伪类、伪元素选择器)
  2. 内层选择器的前面没有 & 符号，则会被解析为父选择器的后代
  3. 如果有 & 符号，它就被解析为父元素自身或父元素的伪类

Less 嵌套写法:

1
2
3
4
5
.box {
     &.content {
        width: 10px;
            }
       }

4️⃣Less 运算:

  1. 任何数字、颜色、变量 都可运算, Less提供了 + 、-、乘(*)、除(/) 算术运算
  2. 乘除法中间左右空格隔开 1px + 5
  3. 对于两个不同单位的值的运算，运算结果取第一个值的单位
  4. 如果两个值之间只有一个值有单位，运算结果就取该单位
1
2
3
4
@width: 5px + 5;
border: @witdh solid pink; /*生成: 10px solid pink;*/
width: (@width + 5) * 2;   /* 生成的值是15 */
@import 'style';           /* 在less文件中导入less文件

1️⃣ rem 适配方案:

  1. 让一些不能等比自适应的元素，达到当设备尺寸发生改变时，等比例适配当前设备
  2. 使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化 元素尺寸也会发生变化，从而达到等比缩放的适配

rem 实际开发适配方案:

  1. 按设计稿与设备宽度的比例，动态计算并设置html根标签的font-size大小
  2. CSS中，设计稿元素的宽、高、相对位置等取值，按照同等比例换算为rem为单位的值

2️⃣ Less + 媒体查询 + rem 方案 :

  1. 设置html标签font-size大小
  2. 把整个屏幕划分为15等份 (划分标准不一 ,可以是20份也可以是10等份)
  3. 每一份作为html字体大小
  4. 那么假设是320px设备的时候，字体大小为320/15 就是 21.33px
  5. 用页面元素的大小 除以不同的html字体大小会发现它们比例还是相同的
  6. 50*50像素的页面元素，在320屏幕下，就是 50 / 21.33 转换为rem 就是2.34rem
  7. 320屏幕下，html字体大小为21.33，则 2rem = 42.66px 此时宽和高都是42.66
  8. 尺寸有 320px、360px、375px、384px、400px、414px、424px、480px、540px、720px、750px

元素大小取值方法:

  1. 公式：页面元素的rem值 = 页面元素值 (px) / (屏幕宽度 / 划分的份数)
  2. 屏幕宽度 / 划分的份数 就是 html font-size 的大小
  3. 或者：页面元素的rem值 = 页面元素值 (px) / html font-size 字体大小

3️⃣ Flexible.js + rem 方案 :

  1. 不需要再写不同屏幕的媒体查询，因为里面js做了处理
  2. 它的原理是把当前设备划分为10等份，在不同设备下，比例还是一致的
  3. 我们要做的，就是确定好当前设备的html文字大小就可以
  4. 比如当前设计稿是750px，那只需把html文字大小设置为 75px(750px / 10)
  5. 里面页面元素rem值：页面元素的px 值 / 75
  6. 剩余的，让flexible.js来去算
  7. Github地址：https://github.com/amfe/lib-flexible

4️⃣ VSCode px转换rem插件: CSSrem

  1. 用不同的字体大小时记得在设置里 设置字体大小

本节单词：

  1. media
  2. all
  3. print
  4. screen
  5. min
  6. max
  7. easy less
  8. flexible.js