vw和vh适配
目标:实现在不同的设备中,网页元素尺寸等比例缩放效果
vw 单位尺寸
- 1.确定设计稿对应
vw 尺寸
(1/100视口宽度) - 2.vw 单位的尺寸 =
px 单位数值 /
(1/100视口宽度)
vh 单位尺寸
- 1.确定设计稿对应
vh 尺寸
(1/100视口高度) - 2.vh 单位的尺寸 =
px 单位数值 /
(1/100视口高度)
响应式布局
1.开发常用写法
媒体特性常用写法
max-width (从大到小)
min-width (从小到大)
@media (媒体特性) {
选择器 {
样式
}
}
2.link 引入
<link rel="stylesheet" media="(媒体特性)" href="xx.css">
3.bootstrap 使用步骤
目标:使用 bootstrap
框架快速
布局响应式
网页
使用步骤
1.引入
:bootstrap 提供的CSS代码
<link rel="stylesheet" href"=./bootstrap-3.3.7/css/bootstrap.css">
2.调用类
:使用 bootstrap 提供的样式container
: 响应式布局版心类
4.使用 bootstrap 栅格系统布局响应式网页
- 栅格化是指将整个网页的
宽度分成若干等分
- bootstrap3 默认将网页分成
12等分
超小屏幕 | 小屏幕 | 中屏幕 | 大屏幕 | |
---|---|---|---|---|
响应断电 | <768px | >=768px | >=992px | >=1200px |
别名 | xs | sm | md | lg |
容器宽度 | 100% | 750px | 970px | 1170px |
类前缀 | col-xs-* | col-sm-* | col-md-* | col-lg-* |
列数 | 12 | 12 | 12 | 12 |
列间隙 | 30px | 30px | 30px | 30px |
.container
是 bootstrap 中专门提供的类名,所有应用改类名的盒子,默认指定宽度且居中
.container-fluid
也是 bootstrap 中专门提供的类名,宽度为100%
- 分别使用 .row 类名和 .col 类名定义栅格布局的行和列
注意:
- 1.
.container 类自带间距 15px
- 2.
.row 类自带间距 -15px
2 条评论
大佬不更新了吗
有点忙最近,后面更