视口概念与less语法
一 视口基本概念
早期的设计都是为传统的大屏 PC 做，这些设备的屏幕分辨率比较大，设备尺寸也比较大，所以 CSS中的1px 就等于 屏幕的中的 1 物理像素。因此版心在 900-1200px之间的时候在这些设备上都能显示完全，所以不需要视口。
随着用户上网的设备类型越来越多，但是设备尺寸确越来越小，这个时候CSS中的1px 必然不等于屏幕的 1物理像素。所以直接将900-1200版心的设计稿直接放在这样的设备上去查看，如果不做处理肯定会出现水平滚动条或者元素重叠。
在这种大环境下最早有苹果公司提出了视口的概念，它规定手机在出厂时浏览器都会有一个默认的宽度，一般会 980px 。后来其它厂商纷纷效仿，有一些window phone 设备默认值为 1024px。
二 视口标签定义
在页面中通过 meta 标签 可以设置视口的相关信息
<meta name=”viewport” content=”width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0″ />
01 width:用来设置当前视口的大小，可以是具体的数值也可以是关键字 device-width【当前设备的宽度】
02 user-scalable: 是否允许用户手指缩放操作,默认值是 no
03 initial-scale: 设置页面默认显示的缩放系数，相当于对浏览器进行放大和缩小操作。常用来在百分百还原设计稿的时候缩放html 大小。
04 maximum-scale 和 minimum-scale : 表法允许当前页面最大和最小的缩放系数，一般都为1或者和 intial-scale 同值。
三 设置合适的视口大小
为了百分之百的按着当前设备屏幕能显示的像素点来渲染我们的页面，所以在实现的时候会将 html 的大小缩放为当前屏幕的物理分辨率。做法就是利用当前设备的尺寸大小配合当前设备的独立像素比进行缩放操作。
01独立像素比= 屏幕物理分辨率/逻辑分辨率【这个比值是只可读不可写的】
02 在JS 中 通这 window.devicePixelRatio可以求出当前屏的独立像素比
03 重写 meta 视口标签语句
document.write( ‘<meta name=”viewport” content=”width=device-width, user-scalable=no, initial-scale=’+ iScale +’, maximum-scale=’+ iScale +’, minimum-scale=’+ iScale +'” />’ )
四 常见移动端适配方案
01 将视口大小设置为当前设备的尺寸大小，此时 CSS中的 1px 就等于屏幕中的 1物理像素，在布局上采用的是定高不定度的流式布局。一般用于文件居多且格式非常统一的网站【 不能按着屏幕的最大像素来渲染设计稿 】
02 利用独立像素比配合设备尺寸动态的缩放设置视口大小，这样的做的好处就中可以按着屏幕能显示的最大像素信息来渲染设计稿。布局的时候采用 rem 相对单位进行适配，可能计算稍显麻烦，一般用于移动端综合类的网页
03 应用平台内的页面( 微信场景页面 )，对于这种页面一般以效果为主，布局很简单，图片很多。所以一般取一个居中的值( 640px ) 来做为视口大小，然后让设备自已根据这个大小来缩放页面的展示效果。
五 Less书写
Less或者 Sass 都可以理解为一种文件格式，在开发项目编写CSS的时候可以直接书写相应的 less 文件，然后利用第三方软件将它们编译成同名的 css 文件供项目使用。
less使用步骤
01 在编辑器中新建 less 文件（ 也可以手动新建记事本修改后缀名为 less ）
02 利用软件管理( 执行编译 koala ) ，默认第一次需要手动编译
less 中的语法
1 定义变量： 利用 @变量名 ： 变量值 语法定义变量
2 嵌套 ： 可以在一个祖先元素下进行层层嵌套操作，方便实现CSS模块化编写。
3 嵌套：有参数+没有参数( 有默认值|没有默认值 )
01： 没有参数的混合语法看起来和定义类名完全一致，使用时直接将 .混合名 拿来即可
02：有默认值的混合在调用时可以不设置参数，没有默认值的混合在调用时必须传参。
-
计算： 在 less中可以进行简单的数学计算( + – * / )
六 真机测试
在实际的工作中一切以真机测试的结果为准来调节移动端页面
01在本地搭建一个服务器环境( 去网上下载集成开发环境安装即可 比如wamp lamp xampp ….. )
02 开启上步中安装好的服务在地址栏中输入 127.0.0.1 看到 it’s work 就表示成功
03 在cmd命令行中输入 ipconfig 查找本机 ipv4公网地址 例如：192.168.0.23
04 将制作好的项目存放在安装好的服务器目录下，通过公网地址访问到该页面
05 用本机开启一个 wifi 网络，用测试手机连接上这个wifi
06 将第四步中的网址生成一个二维码，然后用测试手机扫描访问即可成功
