移动端适配
一、简介
移动端的适配一直都在困扰开发者，众多的移动端设备分辨率都不尽相同，而且也难以规范标准，要做到十分完美的适配比较困难，所以在开发中会采用一些方法来尽可能解决这方面问题。
目前据我了解到的，移动端的适配并不是只用到某一种方法
- 媒体查询
- rem布局
- flexible.js
二、媒体查询
作用：感受到屏幕的变化；可以根据屏幕不同的宽，从而获得不同的样式，然后实现不同的样式显示。
- CSS3 新语法，是一个查询屏幕的过程，通过查询当前屏幕尺寸属于哪个范围，从而有哪个范围的样式生效；
- 感受屏幕变化，屏幕变化就是宽度的变化，通过预设置，当屏幕到了我已经预设置的变化的范围，就会把我提前设置好的样式进行生效；
2.1 语法
2.1.1 媒体类型
| 值 | 描述 |
|---|---|
| all | 所有设备 |
| 打印机和打印预览 | |
| screen | 电脑屏幕，平板电脑，智能手机等 |
| speech | 屏幕阅读器等发声设备 |
2.1.2 查询条件
| 值 | 描述 |
|---|---|
| aspect-ratio | 定义输出设备中的页面可见区域宽度与高度的比率 |
| color | 定义输出设备每一组彩色原件的个数。如果不是彩色设备，则值等于0 |
| color-index | 定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于0 |
| device-aspect-ratio | 定义输出设备的屏幕可见宽度与高度的比率。 |
| device-height | 定义输出设备的屏幕可见高度。 |
| device-width | 定义输出设备的屏幕可见宽度。 |
| grid | 用来查询输出设备是否使用栅格或点阵。 |
| height | 定义输出设备中的页面可见区域高度。 |
| max-aspect-ratio | 定义输出设备的屏幕可见宽度与高度的最大比率。 |
| max-color | 定义输出设备每一组彩色原件的最大个数。 |
| max-color-index | 定义在输出设备的彩色查询表中的最大条目数。 |
| max-device-aspect-ratio | 定义输出设备的屏幕可见宽度与高度的最大比率。 |
| max-device-height | 定义输出设备的屏幕可见的最大高度。 |
| max-device-width | 定义输出设备的屏幕最大可见宽度。 |
| max-height | 定义输出设备中的页面最大可见区域高度。 |
| max-monochrome | 定义在一个单色框架缓冲区中每像素包含的最大单色原件个数。 |
| max-resolution | 定义设备的最大分辨率。 |
| max-width | 定义输出设备中的页面最大可见区域宽度。 |
| min-aspect-ratio | 定义输出设备中的页面可见区域宽度与高度的最小比率。 |
| min-color | 定义输出设备每一组彩色原件的最小个数。 |
| min-color-index | 定义在输出设备的彩色查询表中的最小条目数。 |
| min-device-aspect-ratio | 定义输出设备的屏幕可见宽度与高度的最小比率。 |
| min-device-width | 定义输出设备的屏幕最小可见宽度。 |
| min-device-height | 定义输出设备的屏幕的最小可见高度。 |
| min-height | 定义输出设备中的页面最小可见区域高度。 |
| min-monochrome | 定义在一个单色框架缓冲区中每像素包含的最小单色原件个数 |
| min-resolution | 定义设备的最小分辨率。 |
| min-width | 定义输出设备中的页面最小可见区域宽度。 |
| monochrome | 定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0 |
| orientation | 定义输出设备中的页面可见区域高度是否大于或等于宽度。 |
| resolution | 定义设备的分辨率。如：96dpi, 300dpi, 118dpcm |
| scan | 定义电视类设备的扫描工序。 |
| width | 定义输出设备中的页面可见区域宽度。 |
2.1.1 css样式
/*
条件:and 并且 not 不满足 only 仅仅满足
media feature 查询条件:width,min-with,max-width
*/
@media mediatype and|not|only (media feature) {
CSS-Code;
}
2.1.2 引用资源
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
2.2 使用范例
/* min-width/max-width：最小界值，最大界值；查询条件包含等于号；*/
@media screen and (max-width: 501px) {
/* 相对应的css代码 */
body {
background: orange;
}
}
2.3 适配需求
- 档位1：w<320 px w <= 319 px；
- 档位2：w>=320px and w< 640px；
- 档位3：w>=640px
三、rem
3.1 rem介绍
rem 是一个相对单位，类似于em，但rem的基准是相对于html元素的字体大小，em是父元素字体大小。
3.1.1 作用
让一些不能等比自适应的元素，达到当设备尺寸发生改变的时候，等比例适配当前设备。
3.1.2 特性
rem单位，可以控制整个页面所有元素有关PX类；（width、height、padding、margin、top…）只要是你设置数值 的地方都可以实现控制；root:1rem代表HTML的font-size大小；
3.1.3 语法
在哪里设置？设置什么？
/* 1.根 html 为 10px */
html {
font-size: 10px;
}
/* 2.此时 div 的宽就是 150px */
div {
width: 15rem;
}
理解：rem 就是一个换算的单位，上面例子中根节点中设定了 font-size 大小，那么在 div 中使用 15rem 就是15*10等于150px了
3.2 rem应用
rem布局的核心是 rem+媒体查询，媒体查询可以把屏幕划分为不同的挡位，rem可以通过HTML的字体大小来控制rem的变化，实现适配
3.2.1 使用
@media screen and (min-width: 320px) {
html {
font-size: 20px;
}
}
@media screen and (min-width: 640px) {
html {
font-size: 40px;
}
}
/* div的 大小会根据屏幕来自动适配 */
div {
width:1rem;
height:1rem;
}
3.2.2 rem布局核心
- 媒体查询：屏幕到达不同的范围下，HTML的font-size大小会有不同的取值；
- 1rem 背后的代表的px值 = 当前档位 HTML 字体大小所代表的大小
- 而后使用rem单位的元素就会发生等比的变化；
四、less
参考
介绍：Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言。这里呈现的是 Less 的官方文档（中文版），包含了 Less 语言以及利用 JavaScript 开发的用于将 Less 样式转换成 CSS 样式的 Less.js 工具。
作用：写更少的代码，实现相同的效果
常见的CSS预处理器：Sass、Less、Stylus
我们可以利用Less的计算能力，来帮助我们计算像素，比如
@media screen and (min-width:540px) {
html {
font-size: 54px;
}
}
div {
width: 200/54rem;
height: 200/54rem;
background: #000;
}
编译后的css文件为
@media screen and (min-width: 540px) {
html {
font-size: 54px;
}
}
div {
width: 3.7037037rem;
height: 3.7037037rem;
background: #000;
}
4.1 Less语言特性
4.1变量
比较简单，就是定义变量，后面使用变量，要注意的命名规则：必须有@为前缀；不能包含特殊字符~=+、不能以数字开头；大小写敏感
/* @变量名:值; */
@bg:#333;
.box_1 {
background-color: @bg;
}
.box_2 {
background-color: @bg;
}
4.2 嵌套
Less 提供了使用嵌套（nesting）代替层叠或与层叠结合使用的能力。
4.2.1 语法
/* css 写法 */
#header .logo {
width: 300px;
}
/* less 写法 */
#header {
.logo {
width: 300px;
}
}
4.2.2 交集|伪类|伪元素选择器
/* css写法 */
a:hover{
color:red;
}
/* less写法 */
a{
&:hover{
color:red;
}
}
4.3 混合（Mixins）
混合是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法。
4.4 @规则嵌套和冒泡css
@ 规则（例如 @media 或 @supports）可以与选择器以相同的方式进行嵌套。@ 规则会被放在前面，同一规则集中的其它元素的相对顺序保持不变。这叫做冒泡（bubbling）
4.5 运算（Operations）
术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算。如果可能的话，算术运算符在加、减或比较之前会进行单位换算。计算的结果以最左侧操作数的单位类型为准。如果单位换算无效或失去意义，则忽略单位。无效的单位换算例如：px 到 cm 或 rad 到 % 的转换。
单位选择：
- 如果两个值之间只有一个值有单位，则运算结果就取该单位
- 对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位
// 所有操作数被转换成相同的单位
@conversion-1: 5cm + 10mm; // 结果是 6cm
@conversion-2: 2 - 3cm - 5mm; // 结果是 -1.5cm
// conversion is impossible
@incompatible-units: 2 + 5px - 3cm; // 结果是 4px
// example with variables
@base: 5%;
@filler: @base * 2; // 结果是 10%
@other: @base + @filler; // 结果是 15%
值得注意的是： 乘法和除法不作转换。因为这两种运算在大多数情况下都没有意义，一个长度乘以一个长度就得到一个区域，而 CSS 是不支持指定区域的。Less 将按数字的原样进行操作，并将为计算结果指定明确的单位类型。
4.6 转义（Escaping）
允许你使用任意字符串作为属性或变量值。任何 ~"anything" 或 ~'anything' 形式的内容都将按原样输出，除非 interpolation。
4.7 函数（Functions）
Less 内置了多种函数用于转换颜色、处理字符串、算术运算等。
下例介绍如何利用 percentage 函数将 0.5 转换为 50%，将颜色饱和度增加 5%，以及颜色亮度降低 25% 并且色相值增加 8 等用法：
@base: #f04615;
@width: 0.5;
.class {
width: percentage(@width); // returns `50%`
color: saturate(@base, 5%);
background-color: spin(lighten(@base, 25%), 8);
}
4.8 命名空间和访问符
(不要和 CSS @namespace 或 namespace selectors 混淆了)。
有时，出于组织结构或仅仅是为了提供一些封装的目的，你希望对混合（mixins）进行分组。你可以用 Less 更直观地实现这一需求。假设你希望将一些混合（mixins）和变量置于 #bundle 之下，为了以后方便重用或分发
4.9 映射（Maps）
从 Less 3.5 版本开始，你还可以将混合（mixins）和规则集（rulesets）作为一组值的映射（map）使用。
4.10 作用域（Scope）
Less 中的作用域与 CSS 中的作用域非常类似。首先在本地查找变量和混合（mixins），如果找不到，则从“父”级作用域继承。
4.11 注释（Comments）
块注释和行注释都可以使用
/* 一个块注释
* style comment! */
@var: red;
// 这一行被注释掉了！
@var: white;
4.12 导入（Importing）
可以用“导入”的方式导入一个 .less 文件，此文件中的所有变量就可以全部使用。如果导入的文件是 .less 扩展名，则可以将扩展名省略掉
@import "library"; // library.less
@import "typo.css";
五、移动端布局的解决方案
5.1 rem+媒体查询+ less
通过设置不同的档位下，设置不同的1rem值；效果为阶梯式变化；
5.2 rem+flexible.js+less
通过js设置不同的1rem值，效果为连续变化；这个看起来更为连贯，适配任何屏幕。
5.3 rem计算
function setRem () {
// docEl.clientWidth JS获取当前屏幕的宽度
// 除以10,得到基础块
var rem = docEl.clientWidth / 10;
docEl.style.fontSize = rem + 'px';
}
个人学习笔记，仅供参考，如有错误之处，敬请联系我改正