一、媒体查询
Snipaste_2022-04-11_22-16-13.png
1.媒体特性常用写法
1.max-width
2.min-width
2.区分设备类型
Snipaste_2022-04-11_22-18-43.png
3.媒体特性
数值:width,height,max-width,max-height,min-width,min-height
屏幕方向:orientation(属性):portrait(竖屏)、landscape(横屏)
Snipaste_2022-04-11_22-24-13.png
二、BootStrap
中文官网: https://www.bootcss.com/
bootstrap使用步骤
1.引入:bootstrap提供的css代码
<link rel="stylesheet" href="./bootstrap-3.3.7/css/bootstrap.css">
2.调用类:使用bootstrap提供的样式
.container是BootStrap中专门提供的类名,所有应用该类名的盒子,默认已被指定宽度且居中。
.container-fluid也是BootStrap中专门提供的类名,所有应用该类名的盒子,宽度均为100%。
分别使用.row类名和.col类名定义栅格布局的行和列。
注意: 1. container类自带间距15px;
- row类自带间距-15px
BootStrap栅格系统
栅格化是指将整个网页的宽度分成若干等份
BootStrap3默认将网页分成12等份
Snipaste_2022-04-11_23-15-43.png