子元素的选择器可以直接写在父元素里面。
如果不是它的后代元素，比如你想写伪类选择器、交集选择器，需要在前面加&号。
导入less文件
@import "less文件名称（不带后缀名）"，比如：@import "common"
rem可以自适应网页。
在我们设计移动端的时候，常见的宽度有iPhone 6 7 8是750px，Android是720px（普遍的）
动态设置html标签的font-size大小
需要把整个屏幕划分成几个等份，每一份作为html字体大小，这样就能保证是等比例的一个布局
元素大小取值方法是：页面元素的rem值=页面元素值（px）/（屏幕宽度/划分的份数）
屏幕宽度/划分的份数就是html font-size的大小
案例：
html
0610
CSS
body
{
min-width:320px;
margin:0 auto;
width:15rem;
line-height:1.5;
font-family:Arial,Helvetica;
background:#f2f2f2;
}
a
{
text-decoration:none;
}
.search-content
{
display:flex;
position:fixed;
top:0;
left:50%;
transform:translateX(-50%);
width:15rem;
height:88rem/50;
background-color:#fec000;
}
.classify
{
float:left;
width:0.88rem;
height:1.4rem;
margin:0.22rem 0.5rem 0.14rem 0.48rem;
background:url(../images/classify.png) no-repeat;
background-size:0.88rem 1.4rem;
}
.login
{
float:right;
width:1.5rem;
height:1.4rem;
line-height:1.4rem;
margin:0.2rem;
text-align:center;
text-decoration:none;
font-size:0.5rem;
color:white;
}
.search
{
flex:1;
}
.search input
{
outline:none;
height:1.32rem;
width:100%;
border:0;
border-radius:0.66rem;
margin-top:0.24rem;
font-size:0.5rem;
padding-left:1.1rem;
color:#666;
}
.banner
{
width:15rem;
height:7.36rem;
}
.banner img
{
width:100%;
height:100%;
}
.ad
{
display:flex;
width:15rem;
}
.ad a
{
flex:1;
}
.ad a img
{
width:100%;
}
nav
{
width:15rem;
}
nav a
{
float:left;
width:3rem;
height:2.8rem;
text-align:center;
}
nav a img
{
display:block;
width:1.64rem;
height:1.64rem;
margin:0.2rem auto 0;
}
nav a span
{
font-size:0.5rem;
color:#333;
}这是一种简洁高效的移动端适配库。原理是吧当前设备划分成10等份，但是不同设备下，比例是一样的。我们只需要确定当前设备的html文字大小即可。
比如：设计是750px，html文字需要设置为75px可以，里面元素的rem值等于页面元素的px值/75即可。
JS文件的引用：
原理利用媒体查询判断当前的尺寸来进行不同的布局和样式的设置，从而适配不同设备的目的。
响应式布局需要让父级做为布局容器，来配合子级元素实现变化效果。
- container类
响应式布局的容器 固定宽度
- container-fluid类
流式布局容器百分比宽度，占全部视口的容器
bootstrap把系统分成了12列
栅格系统用于通过一系列的行与列的组合来创建页面布局，你的内容就可以放入倒这些创建好的布局当中。
示例：
0610
1
2
3
4
1
2
3
4
列嵌套的时候，最好加一个row，可以去掉父元素的padding值，并且高度自动和父元素一样
使用offset-md-*类可以将列实现右偏移，这些类实际是通过使用*选择器为当前元素增加了左侧的边距（margin）
0610
左边
右边
order-* 类可以实现改变列的顺序。
0610
左边
右边
在类名称后面加一个visible （显示） invisible（隐藏）
0610
左边
右边
或者是d-*-*-none,是隐藏，下面这个示例是表示在md的模式下，隐藏
分为几块：
xs：
sm
md
lg
0610
@media screen and (min-width:1280px)
{
width:1280px;
}
ul
{
list-style:none;
margin:0;
padding:0;
}
a
{
color:#666;
text-decoration:none;
}
a:hover
{
text-decoration:none;
}
.logo
{
background-color:#00adea;
}
.logo img
{
display:block;
max-width:100%;
margin:0 auto;
}
.logo span
{
display:block;
color:#fff;
text-align:center;
padding:5px 10px;
font-size:18px;
}
.nav
{
background-color:#eee;
width:100%;
border-bottom:1px solid #ccc;
}
.nav ul
{
width:100%;
}
.nav ul li
{
width:100%;
}
.nav ul li a
{
display:block;
width:100%;
height:50px;
color:#666;
text-align:center;
line-height:50px;
font-size:16px;
}
.nav ul li a:hover
{
background-color:#fff;
color:#333;
}
@media screen and (max-width:971px)
{
.nav ul li
{
float:left;
width:20%;
}
article
{
margin-top:10px;
}
}
@media screen and (max-width:767px)
{
.nav ul li a
{
font-size:14px;
padding:0px;
}
.container .news li:nth-child(1)
{
width:100%!important;
}
.container .news li
{
width:50%!important;
}
.publish h3
{
font-size:14px;
}
}
.news
{
width:100%;
}
.news li
{
float:left;
width:25%;
height:128px;
margin-bottom:10px;
}
.news li a
{
display:block;
position:relative;
width:100%;
height:100%;
padding-right:10px;
}
.news li:nth-child(1)
{
width:50%;
height:266px;
}
.news li:nth-child(1) a p
{
font-size:20px;
width:100%;
line-height:41px;
}
.news li a img
{
width:100%;
height:100%;
}
.news li a p
{
position:absolute;
width:100%;
height:41px;
bottom:0px;
left:0px;
margin-bottom:0px;
background:rgba(0,0,0,.5);
font-size:20px;
color:#fff;
}
.publish
{
width:100%;
overflow:hidden;
border-top:1px solid #ccc;
}
.publish .row
{
border-bottom:1px solid #ccc;
padding:0 10px;
margin-bottom:10px;
}
.pic img
{
width:100%;
height:100%;
}
.banner img
{
width:100%;
}
.hot
{
display:block;
margin-top:20px;
padding:0px 20px;
border:1px solid #ccc;
}
.hot span
{
margin-bottom:20px;
border-radius:0px;
}
使用VW单位设置网页元素的尺寸：
相对单位
- VW：viewport width
- VH：viewport height
VW划分成100等份，VH也是1%等份。和rem布局需要除以相对应的px值是一样的。