移动开发基础

最新推荐文章于 2024-09-14 17:54:00 发布

苜蓿草茸茸

最新推荐文章于 2024-09-14 17:54:00 发布

阅读量1.1k

点赞数 8

分类专栏： Web前端文章标签： html5 css 前端 web app

本文链接：https://blog.csdn.net/soosky/article/details/141846677

版权

Web前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

移动开发学习笔记

作者：王珂
邮箱：49186456@qq.com

前言

本文主要介绍移动端开发所需具备的基础知识和技能，可当作移动端开发的参考和查阅资料。主要介绍视口、移动端开发方案、Flex布局、Rem布局、Less语法等。

一、移动端基础

1.1 基础

浏览器现状

移动端常见浏览器：UC浏览器，QQ浏览器，欧朋浏览器，百度浏览器，360安全浏览器，谷歌浏览器，搜狗手机浏览器，猎豹浏览器，以及其他杂牌浏览器。

国内的UC和QQ，百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自主研发的内核，就像国内的手机操作系统都是基于Android修改开发的一样。

总结：兼容移动端主流浏览器，处理Webkit内核浏览器即可。

手机平面现状

移动端设备屏幕尺寸非常多，碎片化严重。
安卓(Android)设备有多种分辨率：480x800, 480x854, 540x960, 720x1280, 1080x1920等，还有传说中的2K, 4k屏。
近年来iPhone的碎片化也加剧了，其设备的主要分辨率有：640x960, 640x1136, 750x1334, 1242x2208等。
作为开发者无需关注这些分辨率，因为我们常用的尺寸单位是 px。

常见的移动端平面尺寸

华为

设备	尺寸（英寸）	开发尺寸（px）	物理像素比（dpr)

小米

设备	尺寸（英寸）	开发尺寸（px）	物理像素比（dpr）

Oppo

设备	尺寸（英寸）	开发尺寸（px）	物理像素比（dpr)

Vivo

设备	尺寸（英寸）	开发尺寸（px）	物理像素比（dpr）

荣耀

设备	尺寸（英寸）	开发尺寸（px）	物理像素比（dpr）

iPhone系列

设备	尺寸（英寸）	开发尺寸（px）	物理像素比（dpr)
iPhone3G

1.2 视口

视口（viewport）就是浏览器显示页面内容的平面区域。视口分为布局视口、视觉视口和理想视口。

1.2.1 布局视口

Layout viewport 布局视口：

一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期PC端页面在手机上的问题。
IOS、Android基本上都将这个视口的分辨率设置微980px，所以PC上的网页大多数都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。

1.2.2 视觉视口

Visual Viewport 视觉视口，是用户可以看到的网站区域。可以通过缩放操作视觉视口，单不会影响布局视口，布局视口任保持原有的宽度。

1.2.3 理想视口

为了使网站在移动端有理想的浏览和阅读而设定
需要手动添加meta视口标签通知浏览器操作
meta视口的主要目的：布局视口的宽度应该和理想视口的宽度一致。简单理解就是设备有多宽，布局视口就有多宽。

理想视口是乔布斯提出来的

meta视口

<meta name="viewport" content="width=device-width, user-scalabe=no, inital-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"

属性	说明
width	viewport的宽度，可以设置device-width的特殊值
inital-scale	初始化缩放比例，大于0的数字
maximum-scale	最大的缩放比例，大于0的数字
minimum-scale	最小的缩放比例，大于0的数字
user-scalable	用户是否可以缩放，yes或no(0或1)

1.3 二倍图

1.3.1 物理像素&物理像素比

物理像素是屏幕显示的最小颗粒，是物理存在的。在出厂时厂商已经设置好了，比如：苹果6\7\8是750*1334；
PC端页面，1px等于1个物理像素，但是移动端就不尽相同；
我们开发的时候1px不是等于1个物理像素；
1个px能够显示的物理像素点的个数，称为物理像素比或屏幕像素比；

设备	尺寸	开发尺寸（px）	物理像素比(dpr)
iPhone	3.5
iPhone3G/3Gs	3.5	320*480	1.0
iPhone4/4s	3.5	320*480	2.0
iPhone5/5s/5c	4.0	320*568	2.0
iPhone6	4.7	375*667	2.0
iPhone6s
iPhone6 Plus	5.5	414*736	3.0
iPhone6s Plus			2.0
iPhoneSE
iPhone7
iPhone7 Plus
iPhone8	4.7	750*1334	2.0
iPhone8 Plus	5.5
iPhone X	5.8
iPhone XR	6.1
iPhone XS	5.8
iPhone XS Max	6.5
iPhone 11	6.1
iPhone 11 Pro	5.8
iPhone 11 Pro Max	6.5
iPhone SE(第二代)	4.7
iPhone 12	6.1
iPhone 12 mini	5.4
iPhone 12 Pro	6.1
iPhone 12 Pro Max	6.7
iPhone 13	6.1
iPhone 13 mini	5.4
iPhone 13 Pro	6.1
iPhone 13 Pro Max	6.7
iPhone SE(第三代)	4.7
iPhone 14	6.1
iPhone 14 Plus	6.7
iPhone 14 Pro	6.1
iPhone 14 Pro Max	6.7
iPhone 15	6.1	2556*1179
iPhone 15 Plus	6.7	2796*1290
iPhone 15 Pro	6.1	2556*1179
iPhone 15 Pro Max	6.7	2796*1290

Retina（视网膜屏幕）是一种显示技术，可以将更多的物理像素点压缩至一块屏幕里，从而达到更高的分辨率，并提高屏幕显示的细腻程度。

1.3.2 多倍图

对于一张50px*50px的图片，在手机Retina屏中打开，按照物理像素比会放大倍数，这样会造成图片模糊；
在标准viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题；
通常使用二倍图，因为iPhone6\7\8的影响，但是现在还存在三倍、四倍图的情况，这个看时间开发需求；
北京图片注意缩放问题；

示例：当需要一个50x50像素（CSS像素）的图片，直接放到iPhone8里面会放大2倍称为100x100，此时会显示模糊。采取的策略是，放一张100*100像素的图片，然后把这个图片缩小为50x50。这种方式就是2倍图。

/* 图片为 100*100 */
img {
    width: 50px;
    height: 50px;
}

背景图片也是可以缩放的

/*
  1.如果只写一个参数，则是图片的宽度，高度会等比例缩放。
  2.里面的单位可以跟%，是相对于父盒子来说的。
*/
background-size: 图片的宽度 图片的高度;

单位：长度|百分比IcoverIcontain;
cover：把背景图像宽度高度等比例放大，以使背景图像完全覆盖背景区域。例如：将图片进行发大，如果宽度到了，但是高度未到，会一直放大直至高度到达。

contain：把背景图像宽度高度等比例放大，以使其宽度和高度完全适应内容区域。例如图片进行放大，如果宽度到了，就停止放大，尽管高度尚未到达。反之亦然。

精灵图二倍图

1）background-size将精灵图的宽度缩放为原来的一半；

2）在firework里面进行测量时，先把精灵图等比例缩放为原来的一半再测量；

二、移动端开发

2.1 移动端主流方案

单独制作移动端页面（主流）

京东商城手机版

淘宝触屏版

苏宁易购手机版

通常，网站域名前面加m(mobile)可以打开移动端。通过判断设备，如果是移动设备打开，则跳转到移动端页面。
移动网站
响应式页面兼容移动端（其次）

缺点：制作麻烦，需要花很大精力去调兼容性问题。

三星手机官网

2.2 移动端解决方案

CSS初始化normalize.css

移动端CSS初始化推荐使用normalize.css

官网：

http://necolas.github.io/normalize.css/

Normalize.css: 保护了有价值的默认值

Normalize.css: 修复了浏览器的bug
Normalize.css: 是模块化的
Normalize.css: 拥有详细的文档

特殊样式

/*CSS3盒子模型*/
box-sizing: border-box;
-webkit-box-sizing: border-box;
/*点击高亮我们需要清除 设置为transparent完成透明*/
-webkit-tap-highlight-color: transparent;
/*在移动端浏览器默认的外观在ios上加上这个属性才能给按钮和输入框自定义样式*/
webkit-appearance: none;
/*禁用长按页面时的弹出菜单*/
img,a { -webkit-touch-callout:none;}

2.3 移动端常见布局

单独制作移动端页面

1）流式布局（百分比布局）
```
 京东
```
2）flex弹性布局（强烈推荐）
```
 携程网
```
3）less+rem+媒体查询布局
```
 苏宁
```
4）混合布局
响应式页面兼容移动端

1）媒体查询

2）bootstrap

2.3.1 流式布局（百分比布局）

流式布局，就是百分比布局，也称非固定像素布局。
将盒子的宽度设置成百分比，根据屏幕的宽度来进行自动伸缩，不受固定像素的限制，内容向两侧填充。
流式布局方式是移动web开发使用的比较常见的布局方式。
max-width 最大宽度(max-height 最大高度)
min-width 最小宽度(min-height 最小高度)

三、Flex布局

Flexible Box意为”弹性布局“，用来为盒装模型提供最大的灵活性，任何一个容器都可以指定为flex布局。

采用Flex布局的元素称为Flex容器（Flex container）,它的所有子元素自动成为容器成员，称为Flex项目（Flex Item）。

Flex布局原理

通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。

Flex布局注意点

当给父盒子设置了flex布局之后，子元素的float, clear和vertical-align属性将生效。
伸缩布局 = 弹性布局 = 伸缩合布局 = 弹性盒布局 = flex布局。

传统布局与Flex布局对比

传统布局	Flex布局
兼容性好	操作方便，布局简单，移动端应用广泛
布局繁琐	PC端浏览器支撑情况较差
局限性，不能在移动端很好的布局	IE11或更低版本，不支持或仅部分支持

建议：如果是PC端页面布局，还是用传统布局；如果是移动端或不考虑兼容性的PC端页面布局，建议使用flex弹性布局。

3.1 Flex布局属性

3.1.1 父项属性

1）flex-direction: 主轴方向

主轴和侧轴

在flex布局中，分为主轴和侧轴两个方向（或称：行、列；x轴、y轴）。

默认主轴方向是x轴方向，水平向右默认侧轴方向是y轴方向，垂直向下

属性值

属性值说明
row 默认从左到右
row-reverse 从右到左
column 从上到下
column-reverse 从小到上

属性值	说明
row	默认从左到右
row-reverse	从右到左
column	从上到下
column-reverse	从小到上

2）justify-content: 主轴上子元素的排列方式

主轴上子元素对齐方式

属性值	说明
flex-start	默认从头开始，如果主轴是x轴，则从做到右
flex-end	从尾部开始排列
center	在主轴居中对齐（如果主轴）
space-around	平分剩余空间
space-between	先两边贴边，再平分剩余空间

3）flex-wrap: 子元素是否换行

 默认情况下，项目都排列在主轴上。flex布局中默认是不换行的，当主轴上排列不下时，会缩小项目的宽度。

 nowrap: 不换行，默认值

 wrap: 换行

4）align-items: 设置侧轴上子元素的排列方式（单行）

该属性是控制子项在侧轴（默认是y轴）上的排列方式。在子项为单项的时候使用

属性值说明
flex-start 从上到下
flex-end 从下到上
center 垂直居中（挤在一起居中）
stretch 拉伸（注意：此时子项目不要设置高考，否则不起作用）

属性值	说明
flex-start	从上到下
flex-end	从下到上
center	垂直居中（挤在一起居中）
stretch	拉伸（注意：此时子项目不要设置高考，否则不起作用）

5）align-content: 设置侧轴上子元素的排列方式（多行）

设置子项在侧轴上的排列方式，并且只能用于子项出现换行的情况（多行），在单行下没有效果。

属性值	说明
flex-start	默认值在侧轴头部开始排列
flex-end	在侧轴尾部开始排列
center	在侧轴中间显示
space-around	子项在侧轴平分剩余位置
space-between	子项在侧轴先分布在两头，再平分剩余空间
strech	设置子项高度平分父元素高度

6）flex-flow: 复合属性，相当于设置了flex-direction和flex-wrap

 flex-flow属性是flex-direction和flex-wrap属性的符合属性。

示例：flex-flow: column wrap;

3.1.2 子项属性

1）flex属性：子项占的份数

 flex属性定义子项目分配剩余空间，用flex来表示占多少份数

 flex: <number>; /* default 0 */

  flex: 1 /* 表示占1份 */

 flex: 20% /*表示占1/5*/

2）align-self控制子项自己在侧轴上的排列方式

 align-self控制子项自己在侧轴上的排列方式，允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值：auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

span:nth-child(2) {
    /* 设置自己在侧轴上的排列方式 */
    align-self: flex-end;
}

3）order子项的排列顺序（前后顺序）

数值越小，排列越靠前，默认为0。

注意：和z-index不一样。

div:nth-child(2) {
    order: -1;
}

四、Rem适配布局

4.1 Rem基础

Rem单位

rem(root em)是一个相对单位，类似em，em是父元素字体单位。

不同的是rem的基准是相对于html元素的字体大小。

比如：根元素html设置的 font-size=12px; 非根元素设置 width: 2rem; 则换成px就是24px;

Em单位

em单位是相对于父元素的字体大小来说的。

优点

rem的优点是可以通过改变html中文字的大小来改变页面中元素的大小。

4.2 媒体查询

什么是媒体查询

媒体查询（Media Query）是CSS3的新语法。

使用@media查询，可以针对不同的媒体类型定义不同的样式；
使用@media查询，可以针对不同的屏幕尺寸设置不同的样式；
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面；
目前针对苹果手机、安卓手机、平板等设备都用到媒体查询；

媒体查询语法

@media mediatype and|not|only(media feature) {
    ...
}

用@media开头声明媒体查询
mediatype 媒体类型

将不同的终端设备划分成不同的类型，称为媒体类型

值解释说明
all 用于所有设备
print 用于打印机和打印预览
screen 用于电脑屏幕、平板电脑、智能手机等
关键字and not only

将媒体类型或多个媒体特性连接到一起做媒体查询的条件。

and: 将多个媒体特性连接到一起，相当于"且"的意思

not: 排除某个媒体类型，相当于"非"的意思，可以省略

only: 指定某个特定的媒体类型，可以省略
media feature 媒体特性，必须有小括号包含

每种媒体类型都具有各自不同的特性，根据不同的媒体类型的媒体特性设置不同的展示风格。暂时了解三个：

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

值	解释说明
all	用于所有设备
print	用于打印机和打印预览
screen	用于电脑屏幕、平板电脑、智能手机等

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

示例：根据不同的屏幕尺寸设置样式

/* 在屏幕上 并且 最大的宽度是 800px，设置需要的样式 */
/* max-width: 800px 是<= 800px */
/* 根据不同的屏幕尺寸设置样式 */
@media screen and (max-width: 800px) {
    body {
        background-color: pink;
    }
}

引入资源

当样式比较繁多的时候，我们可以针对不同的媒体使用不同stylesheets(样式表)。

原理：就是直接在link中判断设备的尺寸，然后引用不同的css文件。

语法1：

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="stylesheet.css">

示例：当我们屏幕大于等于 640px以上的，我们让div 一行显示2个；当我们屏幕小于640 我们让div一行显示一个。（建议: 我们媒体查询最好的方法是从小到大）

<link rel="stylesheet" href="style320.css" media="screen and (min-width: 320px)">
<link rel="stylesheet" href="style640.css" media="screen and (min-width: 648px)">

4.3 Rem适配方案

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

实际开发设计方案

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

技术方案

技术方案1

less，媒体查询，rem
技术方案2（推荐）

flexible.js, rem

目前两种方案都存在，方案2更为简单。

4.3.1 Rem适配方案1

rem + 媒体查询 + less

常见设计稿尺寸宽度

设备	常见宽度
iPhone4, 5	640px
iPhone6, 7, 8	750px
Android	320px, 360px, 375px, 384px, 400px, 414px, 500px, 720px（大部分4.7~5寸的安卓设备为720px）

一般情况下，我们以一套或两套效果图适应大部分的屏幕，放弃极端屏或对其优雅降级，牺牲一些效果，现在基本以750为准。

动态设置html的font-size

1）假设设计稿是750px；
2）假设我们把整个屏幕划分为15等份(划分标准不一，可以是10等份也可以是20等份)；
3）每一份作为html字体大小，这里就是750/15=50px；
4）那么在320px设备的时候，字体大小为320/15=21.33px；
5）用我们页面元素的大小除以不同的 html 字体大小会发现他们比例还是相同的；
6）比如我们以750为标准设计稿；
7）一个100 * 100像素的页面元素在750屏幕下，就是100/50，转换为rem是：2rem * 2rem，比例是 1比1；
8）320屏幕下，html字体大小为21.33，则2rem=42.66px 此时宽和高都是 42.66。但是宽和高的比例还是 1比1；
9）但是已经能实现不同屏幕下页面元素盒子等比例缩放的效果；

/* 将页面分为15等份 */
@media screen and (min-width: 320px) {
    html {
        font-size: 21.33px; /* 320px/15=21.33 */
    }
}
@media screen and (min-width: 750px) {
    html {
        font-size: 50px; /* 750px/15=50px */
    }
}

/* 一个100px * 100px 的div，换算成rem, 100 / 50 = 2rem */
div {
    width: 2rem;
    height: 2rem;
}

元素取值的方法

1）最后的公式：页面元素的rem值 = 页面元素值(px) / (屏幕宽度/划分的份数)

2）屏幕宽度/划分的份数就是html的font-size的值

3）页面元素rem值：页面元素值(px)/html的font-size的值

步骤

1）首先，我们选一套标准尺寸，750为准

2）用屏幕尺寸 / 划分的分数得到 html的font-size值

3）用元素rem值 = 页面元素的px值 / html的font-size值

common.less

1）新建common.less 设置好最常见的屏幕尺寸,利用媒体査询设置不同的html字体大小，因为除了首页其他页面也需要；
2）我们关心的尺寸有320px、360px、375px、384px、400px、414px、424px、480px、540px、720px、750px；
3）划分的份数我们定为15等份；
4）因为我们pc端也可以打开我们苏宁移动端首页，我们默认html字体大小设置为50px，注意这句话写到最上面；

// 如果在PC端打开，直接设置字体大小50px（一定要写在最上面）
html {
    font-size: 50px;
}

// 屏幕划分的等份
@number: 15;

// 屏幕尺寸为320px
@media screen and (min-width: 320px) {
    html {
        font-size: (320px / @number);
    }
}

// 屏幕尺寸为360px
@media screen and (min-width: 360px) {
    html {
        font-size: (360px / @number);
    }
}

// 屏幕尺寸为375px
@media screen and (min-width: 375px) {
    html {
        font-size: (375px / @number);
    }
}

// 屏幕尺寸为384px
@media screen and (min-width: 384px) {
    html {
        font-size: (384px / @number);
    }
}

// 屏幕尺寸为400px
@media screen and (min-width: 400px) {
    html {
        font-size: (400px / @number);
    }
}

// 屏幕尺寸为414px
@media screen and (min-width: 414px) {
    html {
        font-size: (414px / @number);
    }
}

// 屏幕尺寸为424px
@media screen and (min-width: 424px) {
    html {
        font-size: (424px / @number);
    }
}

// 屏幕尺寸为480px
@media screen and (min-width: 480px) {
    html {
        font-size: (480px / @number);
    }
}

// 屏幕尺寸为540px
@media screen and (min-width: 540px) {
    html {
        font-size: (540px / @number);
    }
}

// 屏幕尺寸为720px
@media screen and (min-width: 720px) {
    html {
        font-size: (720px / @number);
    }
}

// 屏幕尺寸为750px
@media screen and (min-width: 750px) {
    html {
        font-size: (750px / @number);
    }
}

4.3.2 Rem适配方案2

简介高效的rem适配方案flexible.js

技术方案（推荐）

rem + flexible.js

flexible

手机淘宝团队出的简洁高效的移动端适配库，再也不需要写不同屏幕的媒体查询（flexible库已经做了处理）。

原理是把当前设备划分为10等份，但是不同设备下，比例还是一致的。我们要做的就是确定好我们当前设备的htm文字大小就可以了。比如当前设计稿是750px，那么我们只需要把html文字大小设置为75px(750px/10)就可以，里面页面元素rem值：页面元素的px值 / 75剩余的，让flexible.js来计算。

github地址

https://github.com/amfe/lib-flexible

五、Less语法

CSS的弊端

CSS 是一门非程序式语言，没有变量、函数、SCOPE(作用域)等概念。

CSS 需要书写大量看似没有逻辑的代码，CSS冗余度是比较高的；
不方便维护及扩展，不利于复用；
CSS 没有很好的计算能力；
非前端开发工程师会因为缺少CSS编写经验而很难写出组织良好且易于维护的CSS代码；

Less介绍

Less（Leaner Style Sheet）是一门CSS扩展语言，也称为CSS预处理器。

做为 CSS 的一种形式的扩展，它并没有减少CSS的功能，而是在现有的 CSS语法上，为CSS加入程序式语言的特性。
它在 CSS 的语法基础之上，引入了变量，Mixin(混入)，运算以及函数等功能，大大简化了CSS 的编写并且降低了CSS 的维护成本，就像它的名称所说的那样，Less可以让我们用更少的代码做更多的事情。

Less中文网址

http://lesscss.cn

常见的CSS预处理器：Less、Sass、Stylus

5.1 Less的使用

扩展名.less

5.1.1 变量

语法

@变量名: 值;

变量命名规范

必须有@为前缀
不能包含特殊字符
不能以数字开头
大小写敏感

@width: 10px;
@height: @width + 10px;

#header {
  width: @width;
  height: @height;
}

5.1.2 混入

混入是一种将一组属性从一个规则集中包含（“混合进入”）到另一个规则集中的方法。

5.1.2 编译

本质上，Less包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的CSS文件。
所以，我们需要把我们的less文件，编译生成为css文件，这样我们的html页面才能使用。

VSCode Less插件：Easy LESS
在这里插入图片描述

5.1.3 嵌套

使用嵌套代替级联，或与级联结合使用。

级联CSS如下：

.header {
  color: black;
}
.header .navigation {
  font-size: 12px;
}
.header .logo {
  width: 300px;
}

修改为嵌套

.header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

伪类（伪元素）选择器的写法

在内层选择器前添加&符号，他就被解析为父元素自身或父元素的伪类。

a {
    /* 伪类 */
    &:hover {
      color: #ccc;  
    }
    /* 为元素 */
    &::before {
       color: #bbb;
    }
}

解析之后

a:hover {
  color: #ccc;
}
a::before {
  color: #bbb;
}

嵌套的@规则和冒泡

诸如 @media 或 @supports 之类的 @ 规则可以与选择器相同的方式嵌套。@ 规则放在最前面，与同一规则集中其他元素的相对顺序保持不变。这称为冒泡。

.component {
  width: 300px;
  @media (min-width: 768px) {
    width: 600px;
    @media  (min-resolution: 192dpi) {
      background-image: url(/img/retina2x.png);
    }
  }
  @media (min-width: 1280px) {
    width: 800px;
  }
}

5.1.4 运算

任何数字、颜色或者变量都可以参与运算。就是Less提供了加(+)、减(-)、乘(*)、除(/)算术运算。

示例：

@width: 10px + 5;
div {
    border: @width solid red;
    width: (@width + 5) * 2;
    background-color: #666 - #222;
}

注意：

乘号(*)和除号(/)的写法；
运算符左右有个空格隔开1px + 5；
对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位；
如果两个值之间只有一个值有单位，则运算结果就取该单位；

5.1.5 导入

使用@import将一个样式文件导入到另一个样式中。

@import "common"