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 使用步骤

官网:https://www.bootcss.com

目标:使用 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
别名xssmmdlg
容器宽度100%750px970px1170px
类前缀col-xs-*col-sm-*col-md-*col-lg-*
列数12121212
列间隙30px30px30px30px
  • .container 是 bootstrap 中专门提供的类名,所有应用改类名的盒子,默认指定宽度且居中
  • .container-fluid 也是 bootstrap 中专门提供的类名,宽度为100%
  • 分别使用 .row 类名和 .col 类名定义栅格布局的行和列

注意:

  • 1. .container 类自带间距 15px
  • 2. .row 类自带间距 -15px
最后修改:2021 年 10 月 24 日
谢谢老板打赏