移动端适配
一、简介
移动端的适配一直都在困扰开发者,众多的移动端设备分辨率都不尽相同,而且也难以规范标准,要做到十分完美的适配比较困难,所以在开发中会采用一些方法来尽可能解决这方面问题。
目前据我了解到的,移动端的适配并不是只用到某一种方法
- 媒体查询
- 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';
}
个人学习笔记,仅供参考,如有错误之处,敬请联系我改正