移动web less-响应式及栅格系统
less的插件
less的使用(方便快捷,常用)
在less里面可以书写CSS结构,以及支持标签嵌套如:
div{
width:100px;
height:100px;
span {
p { font-size:14px;
a{
color:red;
}
}
}
}
1.less的变量
固定语法 @+任意的名称(有意义的英语)
作用 把一些css的属性设置在一个地方,实现一改全改
颜色:blue
@color:blue;
div{
color:@color;
}
span {
color:@color;
}
字体大小:18px
@font:18px;
div {
font-size:@font;
}
span{
font-size:@font;
}
2.less的运算
less支持运算宽度,高度,字体大小都可以,但是注意 除法要加括号包裹,加减乘就可以直接使用
div 宽200px 高 80px 字体24px
div{
width:100px+100px;
height:100px-20px;
font-size:12px*2
}
3.less的混合
注意: 定义一个mixin (任意名称)
要 点号 开头后面要加 括号
共用属性就放在一起 背景图片的位置 a1 a2类名可以随意定义
如图:
4.less的嵌套
CSS不支持嵌套,但是在less书写就可以嵌套(更加方便快捷,节省自己书写CSS时间)
注意: 伪元素和hover书写的时候,前面一定要加 &
div {
&::before {
content: '我是div的伪元素，less伪元素写法必须要加 & ';
display: block;
width: 100px;
background-color: blue;
}
width: 300px;
border: 1px solid #000;
p {
a {
display: block;
width: 100px;
img {
width: 100%;
}
}
}
}
5.课外小知识（导航水平滚动）
给父盒子加 overflow-x:auto; 内容溢出出现滚动条
6.拓展-文字后面出现省略号
1 第一行文字 末尾出现 省略号
这三行做为一个整体一起去记
overflow:hidden;
white-space: nowrap;
text-overflow: ellipsis;
2 可以指定第几行出现省略号
display: -webkit-box;
overflow: hidden;
white-space: normal!important;
text-overflow: ellipsis;
word-wrap: break-word;
-webkit-line-clamp: n ; (n) 为几行取几
-webkit-box-orient: vertical;
7.响应式布局
只写一套代码，可以再PC端运行(体验不错) ，还可以在移动端上运行(体验不错)
响应式布局原理：
根据屏幕宽度不同 去使用不同CSS
里面有4个盒子，在一列显示
屏幕宽比较宽 里面的4个盒子的宽度去设置 25%
里面有4个盒子，在2列显示
屏幕宽比较宽 里面的4个盒子的宽度去设置 50%
而这个去使用不同的CSS呢，就是引入 媒体查询 和 引入别人的CSS、JS框架
8.媒体查询： @media ()
媒体查询就是可以根据屏幕的宽度不同 去使用不同的CSS
常见及规范写法:
@media screen and () ()里包裹屏幕宽度,高度属性及多少像素
操作示范
屏幕小于100px的时候是红色 屏幕大于500的时候是绿色 当屏幕的宽度 大于 300 小于 500px的时候是黄色 如图2示例
图1:
图2:
9.栅格系统：引入 bootstrap css 文件
bootstrap 网站里面有各种各样的字体图标,UI框架,CSS样式等等
要使用栅格系统就要引入
1 bootstrap css文件
2 jquery.js js文件
3 bootstrap.js js文件
栅格系统（boostrap的核心，也是实现响应式布局的核心 媒体查询 ）
全屏宽度： container-fluid
居中版心：container
1 bootstrap将屏幕按照宽度分成四种
1 大屏幕 lg >1200px
2 中等屏幕 md >992px-1200px
3 小屏幕 sm >768px-992px
4 极小屏幕 xs <768px
2 固定用法
1 先外层写一个 类 名字是 container (固定居中版心)
2 里面写一个类 名字是固定 row
3 根据需求 （在什么样的屏幕下 一行 显示几个元素 ）
bootstrap 默认将一行 划分成了12份 12列 1列就占一份
3
1 如果一行超过了12份 和浮动的特性一样 往下掉
2 .container 居中的版心 宽度会跟随屏幕宽度的变化而变化 （不用管多少px 版心会自动调整大小就可以了）
有些时候 网页设计
需要版心 container
全屏 .container-fluid
只要你写了栅格代码，那么就不能省略 container(版心)或container-fluid(全屏)
3 要想好 代码在每一种屏幕下的表现
1 大屏幕下 一列占一份
2 极小屏幕下 一列占二份
3 变成 中等屏幕
仅仅是因为 bootstrap自己额外做了设置而已
自动设置了 让较大屏幕 去沿用较小屏幕的设置
4 额外补充
1 栅格系统 方便我们 编写 代码 在不同的宽度下 不同表现的代码 容器而已！
2 栅格系统的核心 也是 媒体查询
3 应用
我们要根据栅格系统对于 不同屏幕的宽度的分类 来找到 当前需求 如何实现
4 比如
1 定版心的容器
5 注意事项：使用新、旧的 bootstrap 的框架不同 ，展示出的效果也不同
套用别人的项目框架，就引入对应的 bootstrap 版本
6 使用第三方的UI框架时
由于使用的是别人的代码框架，所以我们随便改代码和添加代码都容易出错，因此最好加一点代码 看一下效果
