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 日
© 允许规范转载
谢谢老板打赏