一 媒体查询
①@media (max-width:768px){
body{
background-color:pink;
}
}
当视口宽度小于768时将背景颜色变为粉红色(从大到小进行书写)
②@media (min-width:1000px){
body{
background-color:pink;
}
}
当视口宽度大于1000时将背景颜色变为粉红色(从小到大进行书写)
③通过link标签引入媒体查询
<link rel="stylesheet" href=".css' media="(min-width:1000px)">
④电商平台响应式的方法:隐藏内容 display:none
⑤bootstrap栅格系统
.container是响应式布局版心 自带左右padding15px
采用浮动实现盒子横向排列,将视口宽度分为12份
类前缀:col-lg-3 大屏 col-md-6中屏 col-sm-12小屏
container-fluid 宽度100% row 自带间距-15px 让子集贴着父级