视口基本介绍

1.1 视口基本介绍

1，所谓视口我们就可以理解为是浏览器用来展示网页内容的那部分大小。
2，为什么有视口：
a) 在早期的时候我们只关心大屏的 PC 界面，所以视口的概念就不是那么的明显，但是当我们需要在小屏的 移动设备上展示网页时，如果不做任何处理 直接将一个大版心的 PSD 放在小屏上进行查看，默认情况下时会出现放不下的问题。
b) 此时最早就由苹果公司提出出视口的概念，它规定每个设备在出厂的时候都会有一个默认的宽度，这个值为 560px.

1.2 视口标签基本介绍

<meat name="viemport"
content="width=device-width,
initial-scale=0.5" />

注：
01，wewport 就表示视口的意思。
02，width：就是用来设置当前视口的大小，其中 device-widch 就是指将当前的视口设置当设备的尺寸 还可以定义具体的 px 值，这个时候 所有的 设备都会将视口设置为我们所定义的 px 值。
03，initial-scale 用来设置当前页面的默认展示缩放系数，写小于 1 的数值是 表示将内容缩小，这样就可以让可用的大小变大。

1.3 设置视口大小

1，在实际项目一个移动页面我们一般 只出一版 PSD 就够了。
2，我们当下主要采用的 版心值为 750px.
3，每一个设备都会存在 设备分辨率 和物理分辨率，其中我们可以将设备分辨率理解为是当前设备的大小，而物理分辨率指的就是当前这款设备的屏幕最大能够承载的像素信息。二者之间存在着一个比值，我们也将这个比值称为 独立像素比。此时这三个 属性都是固定存在的，我们不能人为的进行修正

1.4 设置合适的视口大小

1 所谓的合适指的就是 将当前设备的视口定义的和当前设备物理分辨率是一样大小的。 ( 640 750 1242…)这样做的目的就是为了最大限度的去使用该设备的像素信息让用户看起来是最舒服的。
2 具体的做法就是引入 淘宝官方给出一个 JS 文件。

1.5 移动页面适配

1，移动页面和 APP 页面是二个不同的概念。
2，如果我们直接使用传统的 PX 做为大小单位，那么有的时候就会出现同样一个内容在小屏设备上确比大屏设备看的更清楚的问题。
3，当我们想去实现适配的时候 就可以采用 c3 当中提供的一个叫 rem 的相对单位，官方定义 lrem 就等于 当前设备视口大小的 1/10 值。且这个值 其实就是 html 元素身上的 font-size 大小。
4，我们从设计稿上量出一个具体的 px 值之后 将它转为 rem 去使用的具体公式就是：具体的px 值 / （ 设计稿的版心/10 ）
5，最我们需要记住的就是 写移动页面的时候 并不是一个 rem 单位一用到底，在合适的地方采用合理的单位即可。

1.6 Less 基本介绍

1.lees 我们就可以理解为是一种新的 文件 格式，其实就是 css 的另一种展示形式，在语法上会比传统的 css 要强大一些。我们一般会借助于 第三方的软件 将写好的 Less 文件直编译成相应的 css 供页面去使用。

1.7 Less 使用步骤和相关语法

1，新建一个包含 less 文件 项目，然后将这个项目添加到 koala 软件中进行管理。
2，找到识别出的 less 文件 手动执行编译 生成相应的 css 文件 【此过程可以设置输出路劲】
3，在 html 页面中通过 link 语句引入具体的 css 文件。
二，less 当中的常用语法
a) 嵌套：可以将之前的传统 后代选择器 一层一层套在一起使用，这样又利用模块化书写 css 样式。
b) Less 当中可以进行简单的数据运算。【+ - * /】