移动web第五天
媒体查询
媒体查询基本语法
/ 最简洁 /
@media (width:600px) {
body {
background-color: red;
}
}
/ 常用推荐写法 /
@media screen and (width:800px) {
body {
background-color: aqua;
}
}
媒体查询引入不同css
引入资源就是 针对不同的屏幕尺寸 调用不同的css文件
less
less变量
变量是指没有固定的值，可以改变的。
@变量名：值
如：@color:pink;
@font14:14px;
less编译
vocode Less 插件 EasyLESS 插件是来把less文件编译成css文件
less语法导出css文件
-
配置EasyLess插件，实现所有less有相同的导出路径
配置插件：设置 > 搜索EasyLess > 在setting.json中编辑 > 在"less.compi{}中"添加代码"out" : "../css"
-
指定路径导出css
在当前less中写 // out: ./abc/ 指当前文件夹下的abc文件夹中导出css
在当前less中写 // out: ./abc/index.css 指在当前文件夹下的abc文件夹中导出一个index.css文件
在当前less文件链接其他less文件，如@import "base";相当于引入一个base.css文件
定义一个mixin
.acb(@a1, @a2) {
公共样式
background-position: @a1, @a2;
}
直接在想用的标签调用使用
div{
.abc(1 , 2) ;
}
bootstrap框架
超小屏幕 <768px 容器宽度：100% 类前缀：col-xs-* 列间隙：30px
小屏幕 >=768px 容器宽度：750px 类前缀：col-sm-* 列间隙：30px
中等屏幕 >=992px 容器宽度：970px 类前缀：col-md-* 列间隙：30px
大屏幕 >=1200px 容器宽度：1170px 类前缀：col-lg-* 列间隙：30px
