移动web开发相关笔记（二）
1.逻辑思维脑图（XMind）
2.web端解决图片分辨的率的问题，在ios中会准备多张图片，早期的web开发中也会准备多张图片，现在流行的是准备一张大图，然后进行压缩，是用background-sizing进行压缩。
3.移动端屏幕适配布局方式：
◆宽度半分比，高度固定，再使用viewport属性
4.抽取通用的样式：
◆方便使用。
◆将常用的样式定义为通用的资源，使用的时候直接添加class即可。
5.推荐一个css布局的网站：http://zh.learnlayout.com/（学习css布局），推荐一个less语法学习的网站：http://www.1024i.com/demo/less/index.html（Less）
6.LessCss是一种动态样式语言，属于css预处理语言的一种，它使用类似css的语法，为css赋予了动态语言的特性，如变量、继承、运算、函数等，更方便css的编写和维护，LessCss可以在多种语言环境中使用，包括浏览器端、桌面客户端、服务器端，相当于less文件就是css文件的模板，编译就相当于是在替换模板中的内容，最后生成css文件。
★less文件必须先用考拉编译进行编译一下，然后才能够在sublime中使用ctrl+s自动编译为css文件
◆变量的定义使用@和：号，@变量名:属性值;
【
//less文件（这种注释不会在css文件中生成）
@jdRed:rgb(201,21,35);
/*给背景设置颜色*/（这种注释会在css文件中生存）
body {
background-color:@jdRed;
}
//css文件
/*给背景设置颜色*/
body {
background-color:rgb(201,21,35);
}
】，//的注释不会被编译，只有css的/**/注释才会被编译。
◆混合与函数的定义与使用，可以把一个定义好的class完全引入到另一个class中
【
//less文件
//混合
.red1 {
border:1px solid red;
color:red;
}
//函数
.oneColor(@color:orange) {
background-color:@color;
color:@color;
}
body {
.red1(); //如果只是想要.red1中的样式，不传递任何参数，可以直接写.red1也行。
}
ul {
.oneColor();
}
li {
.oneColor(red);
}
//css文件
.red1 {
border: 1px solid red;
color: red;
}
body {
border: 1px solid red;
color: red;
}
ul {
background-color: #ffa500;
color: #ffa500;
}
li {
background-color: #ff0000;
color: #ff0000;
}
】
◆嵌套写法，可以使你css文件更加清晰，非常不错，很像是html的结构一样
【
//less文件
.main {
width:100%;
.main_left {
width:90px;
ul {
width:100%;
li {
width:100%;
text-align:ceter;
height:50px;
line-height:50px;
border-bottom:1px solid gray;
border-right:1px solid gray;
a {
color:black;
//&表示当前层的元素标签 代指a
&:hover {
color:red;
}
}
}
}
}
}
//css文件
.main {
width: 100%;
}
.main .main_left {
width: 90px;
}
.main .main_left ul {
width: 100%;
}
.main .main_left ul li {
width: 100%;
text-align: ceter;
height: 50px;
line-height: 50px;
border-bottom: 1px solid gray;
border-right: 1px solid gray;
}
.main .main_left ul li a {
color: black;
}
】
7.考拉编译注意点：
◆新建一个less文件夹，然后再新建的less文件夹中写less文件，使用考拉编译后会自动生成一个css文件夹，否则会在同一个文件夹下
◆如果弹出红色框框，则意味着写错了代码。
8.sublime安装less插件：
◆下载sublime的less压缩包
◆点击sublime菜单中Preference,然后点击浏览程序包
◆弹出文件夹之后，把压缩包拷贝进去，然后右键解压
◆重新开启sublime，如果无效可以点击相同菜单中package setting中Less 查看是否读取成功。
★less只是一个纯文本，装插件只是显示高亮效果，并不影响代码的编写。
9.less的使用
◆创建后缀是.less的文件
◆需要运行考拉
◆将less的文件夹拖入考拉
◆只要保存.less文件然后ctrl+s,考拉就会自动进行编译，编译的原理就是将less文件中的模板替换并转化为css文件，所以less也是有自己的语法的，学习语法可以到http://www.1024i.com/demo/less/index.html（Less）学习。
2.web端解决图片分辨的率的问题，在ios中会准备多张图片，早期的web开发中也会准备多张图片，现在流行的是准备一张大图，然后进行压缩，是用background-sizing进行压缩。
3.移动端屏幕适配布局方式：
◆宽度半分比，高度固定，再使用viewport属性
4.抽取通用的样式：
◆方便使用。
◆将常用的样式定义为通用的资源，使用的时候直接添加class即可。
5.推荐一个css布局的网站：http://zh.learnlayout.com/（学习css布局），推荐一个less语法学习的网站：http://www.1024i.com/demo/less/index.html（Less）
6.LessCss是一种动态样式语言，属于css预处理语言的一种，它使用类似css的语法，为css赋予了动态语言的特性，如变量、继承、运算、函数等，更方便css的编写和维护，LessCss可以在多种语言环境中使用，包括浏览器端、桌面客户端、服务器端，相当于less文件就是css文件的模板，编译就相当于是在替换模板中的内容，最后生成css文件。
★less文件必须先用考拉编译进行编译一下，然后才能够在sublime中使用ctrl+s自动编译为css文件
◆变量的定义使用@和：号，@变量名:属性值;
【
//less文件（这种注释不会在css文件中生成）
@jdRed:rgb(201,21,35);
/*给背景设置颜色*/（这种注释会在css文件中生存）
body {
background-color:@jdRed;
}
//css文件
/*给背景设置颜色*/
body {
background-color:rgb(201,21,35);
}
】，//的注释不会被编译，只有css的/**/注释才会被编译。
◆混合与函数的定义与使用，可以把一个定义好的class完全引入到另一个class中
【
//less文件
//混合
.red1 {
border:1px solid red;
color:red;
}
//函数
.oneColor(@color:orange) {
background-color:@color;
color:@color;
}
body {
.red1(); //如果只是想要.red1中的样式，不传递任何参数，可以直接写.red1也行。
}
ul {
.oneColor();
}
li {
.oneColor(red);
}
//css文件
.red1 {
border: 1px solid red;
color: red;
}
body {
border: 1px solid red;
color: red;
}
ul {
background-color: #ffa500;
color: #ffa500;
}
li {
background-color: #ff0000;
color: #ff0000;
}
】
◆嵌套写法，可以使你css文件更加清晰，非常不错，很像是html的结构一样
【
//less文件
.main {
width:100%;
.main_left {
width:90px;
ul {
width:100%;
li {
width:100%;
text-align:ceter;
height:50px;
line-height:50px;
border-bottom:1px solid gray;
border-right:1px solid gray;
a {
color:black;
//&表示当前层的元素标签 代指a
&:hover {
color:red;
}
}
}
}
}
}
//css文件
.main {
width: 100%;
}
.main .main_left {
width: 90px;
}
.main .main_left ul {
width: 100%;
}
.main .main_left ul li {
width: 100%;
text-align: ceter;
height: 50px;
line-height: 50px;
border-bottom: 1px solid gray;
border-right: 1px solid gray;
}
.main .main_left ul li a {
color: black;
}
】
7.考拉编译注意点：
◆新建一个less文件夹，然后再新建的less文件夹中写less文件，使用考拉编译后会自动生成一个css文件夹，否则会在同一个文件夹下
◆如果弹出红色框框，则意味着写错了代码。
8.sublime安装less插件：
◆下载sublime的less压缩包
◆点击sublime菜单中Preference,然后点击浏览程序包
◆弹出文件夹之后，把压缩包拷贝进去，然后右键解压
◆重新开启sublime，如果无效可以点击相同菜单中package setting中Less 查看是否读取成功。
★less只是一个纯文本，装插件只是显示高亮效果，并不影响代码的编写。
9.less的使用
◆创建后缀是.less的文件
◆需要运行考拉
◆将less的文件夹拖入考拉
◆只要保存.less文件然后ctrl+s,考拉就会自动进行编译，编译的原理就是将less文件中的模板替换并转化为css文件，所以less也是有自己的语法的，学习语法可以到http://www.1024i.com/demo/less/index.html（Less）学习。
