less and 媒体查询

1.媒体查询语法

@media screen and (width:500px)
当屏幕宽度500px，执行的样式 媒体查询，就是有条件的执行css样式

媒体查询完整的写法
@media screen and (屏幕宽度) {样式}
简写 @media (屏幕宽度) {样式}

2 语法简写

@media （width：1000px）

3.@media only【not】 screen and (width:400px)

only  仅在宽度为400px 是执行 css样式
not  执行某个尺寸之外的样式

1.@media （max-witdh:500px)
2. @media (min-width:600px)
3. 3.@media （min-width：300px) and (max-width:500px)
1.屏幕宽度小于等于500px 的时候执行的样式 max-width 最大宽度 小于等于
2.屏幕宽度大于等于600px的时候执行样式 min-width 最小宽度 大于等于
3.当屏幕宽度大于等于300px 并且 小于等于 500px 的时候 执行的样式

less

less 导入
less嵌套
less混合
less变量的使用
	@变量名：值；提高开发和维护效率  @color：red；
	width：200px + 100em 运算的时候，如果2个单位不一样，以第一个为准 运算符两边加空格
可以兼容css任何样式

em和rem单位
em和rem 都是相对单位
em参考的是盒子里边文字大小
rem参考的是html根标签（浏览器） 文字大小

媒体查询+rem适配
1.开发的时候，会将ui设计稿分成若干份
以10份为列，640的设计稿，每一份的宽度是64px 每一份的宽度 屏幕尺寸/份数
2.媒体查询，不同屏幕尺寸设置 （屏幕尺寸/ 份数） 根标签文字大小
子主题 4

less嵌套

.box {
width: 500px;
height: 300px;
background-color: #ccc;
.nav {
background-color: pink;
}
p {
width: 100px;
height: 100px;
background-color: skyblue;
& 符号特指当前层级的选择器,伪类和伪元素选择器
&:nth-child(2) {
border: 10 solid red;
em {
font-size: 12px;
}
}
}
a {
color: #000;
&:hover {
color: green;
}
}

less导入

@import 后边必须有空格
@import ‘./09-less混合.less’;
.less后缀名可以省略
@import ‘./08less嵌套’;
.search {
width: 100px;
height: 100px;
background-color: pink;
}

less 混合

.box {
width: 200px;
height: 200px;
border: 1px solid #000;
}
.nav {
background-color: #ccc;
width: 200px;
height: 200px;
border: 1px solid #000;
}
.footer {
background-color: #ccc;
width: 200px;
height: 200px;
border: 1px solid #000;
}
.box {
width: 200px;
height: 200px;
border: 1px solid #000;
}
.nav {
background-color: #ccc;
// 调用其他选择器代码 选择器()
.box();
}
.footer {
.nav();
}