视口

视口（viewport）就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口

布局视口 layout viewport

  • 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。
  • IOS，Android基本都将这个视口分辨率设置为980px，所以PC上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。

视觉视口 visual viewport

  • 字面意思，它是用户正在看到的网站的区域。注意：是网站的区域。
  • 可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口就仍保持原来的宽度。

理想视口

  • 为了使网站在移动端有最理想的浏览和阅读宽度而设定
  • 理想视口，对设备来讲，是最理想的视口尺寸
  • 需要手动填写meta视口标签通知浏览器操作
  • meata视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，那么布局视口就有多宽

meta视口标签

1
2
<meta name="viewport" content="width=device-width, user-scalable=no,
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
属性 解释说明
width 宽度设置的是viewport宽度，可以设置device-width特殊值
initial-scale 初始缩放比，大于0的数字
maximum-scale 最大缩放比，大于0的数字
minimum-scale 最小缩放比，大于0的数字
user-scalable 用户视口可以缩放，yes或no（1或0）

标准的viewport设置

  • 视口宽度和设置保持一致
  • 视口的默认缩放比为1.0
  • 不允许用户自行缩放
  • 最大允许的缩放比例为1.0
  • 最小允许的缩放比例为1.0

二倍图

物理像素&物理像素比

  • 物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。这是厂商在出厂时就设置好了，比如苹果6\7\8 是 750*1334
  • 开发时的1px不是一定等于1个物理像素的
  • PC端页面，1个px等于一个物理像素的，但是移动端就不尽相同
  • 一个px的能显示的物理像素点的个数，称为物理像素比或屏幕像素比

多倍图

  • 对于一张50px*50px的图片，在手机Retina屏中打开，按照1：2的物理像素比会放大倍数，这样会造成图片模糊
  • 在标准的viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题
  • 通常使用二倍图，因为iPhone 6\7\8的影响，但是现在也存在3倍图4倍图的情况，这个看实际开发需求
  • 背景图片 注意缩放问题

一般采用将图片比例缩小2倍，再放到页面上，这样在移动端打开，放大后还是原来的比例大小。

背景缩放 background-size

background-size属性规定背景图像的尺寸

1
background-size: 背景图片宽度 背景图片高度;

单位：长度|百分比|cover|contain;

cover把背景图片扩展至足够大，以使背景图像完全覆盖背景区域

contain把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域

二倍精灵图做法

  • 在firework（画图软件）里面把精灵图等比例缩放为原来的一半
  • 之后根据大小测量坐标
  • 注意代码里面background-size也要写原来精灵图宽度的一半

移动端开发选择

单独制作移动页面

通常情况下，网站渔民前面家m（mobile）可以打开移动端。通过判断设备，如果使移动端设备打开，则跳过移动端页面。

响应式页面

通过判断屏幕宽度来改变样式，以适应不同终端。

缺点：制作麻烦，需要花很大精力去调兼容性问题

移动端技术解决方案

CSS初始化 normalize.css

移动端CSS 初始化推荐使用normalize.css

Normalize.css：保护了有价值的默认值，修复了浏览器的bug，使模块化的，拥有详细的文档。

官网地址：http://necolas.github.io/normalize.css/

CSS3 盒子模型 box-sizing

1
box-sizing: border-box;

传统模式宽度计算：盒子的宽度 = CSS中设置的width + border + padding

CSS3盒子模型：盒子的宽度 = CSS中设置的宽度width里面包含了border和padding，即padding和border不会撑大盒子了。

特殊样式

1
2
3
4
5
6
7
8
9
10
11
/* css3盒子模型 */
box-sizing: border-box;
-webkit-box-sizing: border-box;
/* 移动端浏览器点击链接会高亮，设置为transparent 则会完全透明 */
-webkit-tap-highlinght-color: transparent;
/* 在移动端浏览器上，ios中按钮会有默认外观，加上该属性后才能给按钮和输入框自定义样式 */
-webkit-appearance: none;
/* 禁用长按页面时的弹出菜单 */
img,a {
  -webkit-touch-callout: none;
}

移动端常见布局

流式布局（百分比布局）

  • 流式布局，就是百分比布局，也称非固定像素布局。
  • 通过盒子的宽度设置成百分比来根据屏幕的宽来进行伸缩，不受固定像素的限制，内容向两侧填充
  • 流式布局方式是移动web开发使用的比较常见的布局方式
  • max-width 最大宽度（max-height 最大高度）
  • min-width 最小宽度（min-height 最小高度）

flex 布局（弹性布局）

flex 布局原理

flex是flexible Box的缩写，意为弹性布局，用来为盒状魔心提供最大的灵活性，任何一个容器都可以指定为flex布局。

  • 当为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效。
  • 伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex布局
  • 采用flex布局的元素，称为flex容器（flex container），简称容器。它的所有子元素自动成为容器成员，称为flex项目（flex item），简称项目。

flex 布局父项常见属性

flex-direcrion 设置主轴的方向在

  1. 主轴与侧轴

在flex布局中，是分为主轴盒侧轴两个，同样的叫法有：行和列、x轴和y轴

  • 默认主轴方向就是x轴方向，水平向右
  • 默认侧轴方向就是y轴方向，水平向下
  1. 属性值

flex-direction属性决定主轴的方向（即项目的排列方向）

注意：主轴和侧轴是会变化的，就看flex-direction设置谁为主轴，剩下的就是侧轴。子元素是跟着主轴来进行排列的

属性值 说明
row 默认值从左到右
row-reverse 从右到左
column 从上到下
column-reverse 从下到上

justify-content 设置主轴上的子元素排列方式

justify-content属性定义了项目在主轴上的对齐方式

注意：使用这个属性之前一定要确定好主轴是哪个

属性值 说明
flex-start 默认值 从头部开始 如果主轴是x轴，则从左到右
flex-end 从尾部开始排列
center 在主轴居中对齐（如果主轴是x轴则水平居中）
space-around 评分剩余空间
space-between 先两边贴边 再平分剩余空间（重要）

flex-wrap 设置子元素是否换行

默认情况下，项目都排在一条线（又称“轴线”）上。flex-wrap属性定义，flex布局中默认是不换行的

属性值 说明
nowrap 默认值，不换行
wrap 换行

align-items 设置侧轴上的子元素排列方式（单行）

该属性是控制子项在侧轴（默认是y轴）上的排列方式，一般在子项为单项的时候使用

属性值 说明
flex-start 从上到下
flex-end 从下到上
center 挤在一起居中（垂直居中）
stretch 拉伸（默认值）

align-content 设置侧轴上的子元素的排列方式（多行）

设置子项在侧轴上的排列方式，并且只能用于子项出现换行的情况（多行），在单行下是没有效果的。

属性值 说明
flex-start 默认值，在侧轴的头部开始排列
flex-end 在侧轴的尾部开始排列
center 在侧轴的中间显示
space-around 子项在侧轴平分剩余空间
space-between 子项在侧轴先分布在两头，再平分剩余空间
stretch 设置子项元素高度为平分父元素的高度（不能手动设置子项元素高度）

align-content 和 align-items 区别

  • align-items 适用于单行情况下，只有上对齐、下对齐、居中和拉伸
  • align-content是适应于换行（多行）的情况下（单行情况下无效），可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值。
  • 总结就是单行找align-items，多行找align-content

flex-flow

flex-flow属性是flex-direction和flex-wrap属性的复合属性

1
flex-flow: row wrap;

flex 布局子项常见属性

flex 属性

flex属性定义子项目分配剩余空间，用flex来表示占多少份数

1
2
3
4
p span {
  /* default 0 */
  flex: <number>;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<html>
<head>
  <style>
    p {
      display: flex;
      width: 60%;
      height: 150px;
      background-color: pink;
      margin: 100px auto;
    }

    /* 第一和第三个span盒子各占父盒子的一份 */
    p span {
      flex: 1;
      color: #fff;
      line-height: 150px;
      text-align: center;
    }

    /* 第二个span盒子占父盒子的两份 */
    p span:nth-child(2) {
      flex: 2;
      background-color: blue;
    }
  </style>
</head>
<body>
  <p>
    <span>1</span>
    <span>2</span>
    <span>3</span>
  </p>
</body>
</html>

align-self 控制子项自己在侧轴上的排列方式

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

1
2
3
4
span:nth-child(2) {
  /* 设置自己在侧轴上的排列方式 */
  align-selft: flex-end;
}

order 属性定义项目的排列顺序

数值越小，排列越靠前，默认为0.

注意：和z-index不一样。

rem 布局

rem 基础

rem（root em）是一个相对单位，类似于em，em是父元素字体大小。

不同的是rem的基准是相对于html元素的字体大小。

比如，根元素（html）设置font-size:12px; 非根元素设置width: 2rem; 则换成px表示就是24px。

媒体查询

定义

  • 使用@media查询，可以针对不同的媒体类型定义不同的样式
  • @meida可以针对不同的屏幕尺寸设置不同的样式
  • 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
  • 目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询

语法规范

1
2
3
@media mediatype and|not|only (media feature) {
  css-code;
}
  • 用@media开口 注意@符号
  • mediatype 媒体类型
  • 关键字 and not only
  • media feature 媒体特性 必须有小括号包含
  1. mediatype 媒体类型

将不同的终端设备划分成不同的类型，称为媒体类型

值 解释说明
all 用于所有设备
print 用于打印机和打印预览
screen 用于电脑屏幕，平板电脑，智能手机等
  1. 关键字

关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件

  • and：可以将多个媒体特性连接到一起，相当于“且”的意思。
  • not：排除某个媒体特性，相当于“非”的意思，可以省略。
  • only：指定某个特定的媒体类型，可以省略。
  1. 媒体特性

每种媒体类型都具有各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格。

值 解释说明
width 定义输出设备中页面可见区域的宽度
min-width 定义输出设备中页面最小可见区域宽度
max-width 定义输出设备中页面最大可见区域宽度 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<html>
<head>
  <style>
    /* 当屏幕宽度小于等于（不大于）399px时，背景颜色设置为蓝色 */
    @media screen and (max-width: 399px) {
      body {
        background-color: blue;
      }
    }

    /* 当屏幕宽度大于等于（不小于）400px时，背景颜色设置为绿色，但是由于css的层叠性，
      第三个媒体查询设置会覆盖掉该查询中屏幕宽度大于等于500px的时候，故该设置的宽度范围
      应为400px到499px*/
    @media screen and (min-width: 400px) {
      body {
        background-color: green;
      }
    }

    /* 与第二个媒体查询功能一致 */
    /* @media screen and (min-width: 400px) and (max-width: 499px) {
      body {
        background-color: green;
      }
    } */

    /* 当屏幕宽度大于等于（不小于）500px时，背景颜色设置为蓝色 */
    @media screen and (min-width: 500px) {
      body {
        background-color: red;
      }
    }
  </style>
</head>
<body>
  
</body>
</html>

引入资源

当样式比较繁多的时候，可以针对不同的媒体使用不同stylesheets（样式表）

原理，就是直接在link中判断设备的尺寸，然后引用不同的css文件

1
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

less 基础

维护 css 的弊端

CSS是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。

  • CSS需要书写大量看似没有逻辑的代码，CSS沉余度是比较高的
  • 不方便维护及扩展，不利于复用。
  • CSS没有很好的计算能力
  • 非前端开发工程师来讲，往往会因为缺少CSS编写经验而很难写出组织良好且易于维护的CSS代码项目。

Less 介绍

Less（Leaner Style Sheets的缩写）是一门CSS扩展语言，也成为CSS预处理器

做为CSS的一种形式的扩展，它并没有减少CSS的功能，而是在现有的CSS语法上，为CSS加入程序式语言的特性

它在CSS的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了CSS的编写，并且降低了CSS的维护成本，就像它的名称所说的那样，Less可以让我们用更少的代码做更多的事情。

Less中文网址：http://lesscss.cn/

Less 变量

变量是指没有固定的值,可以改变的。因为我们CSS中的一些颜色和数值等经常使用。

1
@变量名:值;

变量命名规范

  • 必须有@为前缀
  • 不能包含特殊字符
  • 不能以数字开头
  • 大小写敏感
1
2
3
4
5
6
7
8
9
@color: pink;
@font14: 14px;
body {
  background-color: @color;
}
div {
  color: @color;
  font-size: @font14;
}

Less 编译

本质上，Less包含一套自定义的语法及要给解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的CSS文件。

故，less文件要通过编译成css文件，html页面才能使用。

Less 嵌套

1.常规嵌套

1
2
3
#header .logo {
  width: 300px;
}
1
2
3
4
5
#header {
  .logo {
    width: 300px;
  }
}

2.特殊嵌套

如果是交集|伪类|伪元素选择器

  • 内层选择器的没有&，则它被解析成父选择器的后代；
  • 如果有&符号，它就被解析为父元素自身或父元素的伪类。
1
2
3
a:hover {
  color: red;
}
1
2
3
4
5
a {
  &:hover {
    color: red;
  }
}

Less 运算

任何数字、颜色或者变量都可以参与运算。就是Less提供了加（+）、减（-）、乘（*）、除（/）算术运算。

1
2
3
4
5
6
7
8
9
10
11
/* Less 里面写 */
@width: 10px + 5;
div {
  border: @width solid red;
}
/* 生成的css */
div {
  border: 15px solid red;
}
/* Less 甚至还可以这样 */
width: (@width + 5） * 2;

注意：

  • 乘号(*)和除号(/)的写法
  • 运算符中间左右有个空格隔开
  • 对于两个不同的单位的值之间的运算,运算结果的值取第一个值的单位
  • 如果两个值之间只有一个值有单位,则运算结果就取该单位

rem 布局适配方案

  1. 技术方案1：less + 媒体查询 + rem
  2. 技术方案2：flexible.js + rem

响应式布局

响应式开发原理

使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的

设备划分 尺寸区间
超小屏幕（手机） <768px
小屏设备（平板） >=768px ~ <992px
中等屏幕（桌面显示器） >=992px ~ < 1200px
宽屏设备（大桌面显示器） >=1200px

响应式布局容器

响应式需要一个父级做为布局容器,来配合子级元素来实现变化效果。

原理就是在不同屏幕下,通过媒体查询来改变这个布局容器的大小,再改变里面子元素的排列方式和大小,从而实现

不同屏幕下,看到不同的页面布局和样式变化。

一般响应式尺寸划分：

  • 超小屏幕(手机,小于768px):设置宽度为100%
  • 小屏幕(平板,大于等于768px):设置宽度为750px
  • 中等屏幕(桌面显示器,大于等于992px):宽度设置为970px
  • 大屏幕(大桌面显示器,大于等于1200px):宽度设置为1170px
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>响应式导航栏</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            width: 750px;
            margin: 0 auto;
        }

        ul {
            list-style: none;
        }

        .container ul li {
            float: left;
            width: 93.75px;
            height: 30px;
            background-color: pink;
        }

        @media screen and (max-width: 767px){
            .container {
                width: 100%;
            }
            .container ul li {
                width: 33.33%;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <ul>
            <li>导航栏</li>
            <li>导航栏</li>
            <li>导航栏</li>
            <li>导航栏</li>
            <li>导航栏</li>
            <li>导航栏</li>
            <li>导航栏</li>
            <li>导航栏</li>
        </ul>
    </div>
</body>
</html>

Bootstrap 前端开发框架

Bootstrap 简介

Bootsrap来自Twitter（推特），是目前最受欢迎的前端框架。Bootstrap是基于HTML、CSS和JavaScript的，它简洁灵活，使得Web开发更加便捷

中文官网:http://www.bootcss.com/

官网:http://getbootstrap.com/

推荐使用:http://bootstrap.css88.com/

布局容器

Bootstrap需要为页面内容和栅格系统包裹一个.container容器,Bootstarp预先定义好了这个类,叫.container
它提供了两个作此用处的类。

  1. container类
  • 响应式布局的容器 固定宽度
  • 大屏(>=1200px)宽度定为1170px
  • 中屏(>=992px)宽度定为 970px
  • 小屏(>=768px)宽度定为 750px
  • 超小屏(100%)
  1. container-fluid 类
  • 流式布局容器 百分百宽度
  • 占据全部视口（viewport）的容器
  • 适合于单独做移动端开发

Bootsrap 栅格系统

栅格系统简介

栅格系统英文为“grid systems“,也有人翻译为“网格系统”,它是指将页面布局划分为等宽的列,然后通

过列数的定义来模块化页面布局。

Bootstrap提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,

系统会自动分为最多12列。

Bootstrap里面 container宽度是固定的,但是不同屏幕下,container的宽度不同,我们再把container划分为12等份。

栅格选项参数

栅格系统用于通过一系列的行（row）与列（colomn）的组合来创建页面布局

超小屏幕（手机）<768px 小屏设备（平板）>=768px 中等屏幕（桌面显示器）>= 992px 宽屏设备（大桌面显示器）>=1200px
.container 最大宽度 自动（100%） 750px 970px 1170px
类前缀 .col-xs- .col-sm- .col-md- .col-lg-
列（column）数 12
  • 行(row)必须放到container布局容器里面
  • 我们实现列的平均划分 需要给列添加类前缀
  • xs-extra small:超小;sm-small:小;md-medium:中等;lg-large:大;
  • 列(column)大于12,多余的“列(column)”所在的元素将被作为一个整体另起一行排列
  • 每一列默认有左右15像素的padding
  • 可以同时为一列指定多个设备的类名,以便划分不同份数 例如class=”col-md-4 col-sm-6”
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <!-- 要求当前网页使用IE浏览器最高版本的内核来渲染 -->
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- [if lt IE 9] -->
        <!-- 解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题 -->
        <script src="https://oss.maxcdn.com/htm15shiv/3.7.2/htm15shiv.min.js"></script>
        <!-- 解决ie9以下浏览器对CSS3 Media Query的不识别 -->
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <!-- 引入bootstrap框架的样式文件 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <title>Document</title>
    <style>
        [class^="col"] {
            border-collapse: collapse;
            border: 1px solid #333;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">1</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">2</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">3</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">4</div>
        </div>
        <div class="row">
            <div class="col-lg-6">1</div>
            <div class="col-lg-2">2</div>
            <div class="col-lg-2">3</div>
            <div class="col-lg-2">4</div>
        </div>
        <!-- 当列数总和小于12，则不会占满一行显示 -->
        <div class="row">
            <div class="col-lg-6">1</div>
            <div class="col-lg-2">2</div>
            <div class="col-lg-2">3</div>
            <div class="col-lg-1">4</div>
        </div>
        <!-- 当列数总和大于12，会另起一行显示 -->
        <div class="row">
            <div class="col-lg-6">1</div>
            <div class="col-lg-2">2</div>
            <div class="col-lg-2">3</div>
            <div class="col-lg-3">4</div>
        </div>
    </div>
</body>
</html>
列嵌套

栅格系统内置的栅格系统将内容再次嵌套。简单理解就是一个列内再分成若干小列。可以通过添加一个新的.row元素和一系列.col-sm-*元素到已经存在的.col-sm-*元素内。

1
2
3
4
5
6
7
8
<!-- 列嵌套 -->
<div class="col-sm-4">
  <!-- 列嵌套最好添加一个行row，这样可以取消父元素的padding值，而且高度自动和父级一样高 -->
  <div class="row">
    <div class="col-sm-6">小列</div>
    <div class="col-sm-6">小列</div>
  </div>
</div>
列偏移

使用.col-md-offset-类可以将列向右侧偏移。这些类实际是通过使用选择器为当前元素增加了左侧的边距（margin）

1
2
3
4
<div class="row">
  <div class="col-lg-4">1</div>
  <div class="col-lg-4 col-lg-offset-4">2</div>
</div>
列排序

通过使用.col-md-push-*和.col-md-pull-*类就可以很容易改变列的顺序

1
2
3
4
<div class="row">
  <div class="col-lg-4 col-lg-push-8">左侧</div>
  <div class="col-lg-8 col-lg-pull-4">右侧</div>
</div>

.col-md-push-*负责将左侧盒子向右推动几份

.col-md-pull-*负责将右侧盒子向左拉动几份

响应式工具

为了加快对移动设备友好的页面开发工作，利用媒体查询功能，并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。

类名 超小屏 小屏 中屏 大屏
.hidden-xs 隐藏 可见 可见 可见
.hidden-sm 可见 隐藏 可见 可见
.hidden-md 可见 可见 隐藏 可见
.hidden-lg 可见 可见 可见 隐藏

与之相反的，是visible-xs visible-sm bisible-md bisible-lg是显示某个页面内容

vw / vh

vw / vh 定义

  • 相对单位
  • 相对视口的尺寸计算结果
  • vw：viewport width (1vw = 1/100 * 视口宽度）
  • vh：viewport height（1vh = 1/100 * 视口高度）

vw 适配原理

  • vw 单位尺寸
  1. 确定设计稿对应的vw尺寸（1/100 * 视口宽度）

查看设计稿宽度 -> 确定参考设备宽度（视口宽度）-> 确定vw尺寸（1/100 * 视口宽度）

  1. vw单位的尺寸 = px单位数值 / （1/100 * 视口宽度）

vh 适配原理

目标:实现在不同宽度的设备中,网页元素尺寸等比缩放效果

  • vh单位尺寸
  1. 确定设计稿对应的vh尺寸(1/100 * 视口高度)

查看设计稿高度→确定参考设备高度(视口高度)→确定vh尺寸(1/100 * 视口高度)

  1. vh单位的尺寸=px单位数值/(1/100 * 视口高度)

开发中，vw和vh不会混用，vh是1/100 * 视口高度，全面屏视口高度尺寸大，如果混用可能会导致盒子变形

vmin / vmax

  • vmin可以照顾手机端横屏和竖屏的显示效果

vmin和vmax是与当下屏幕的宽度和高度的最大值或最小值有关，取决于哪个更大和更小