vw/vh:(能够使用vw单位设置网页元素的尺寸)

相对单位  相对视口的尺寸计算结果  vw:viewport width(1vw=1/100视口宽度)  vh:viewport height(1vh=1/100视口高度)

vw适配原理:(实现在不同宽度的设备中,网页元素尺寸等比缩放效果)

vw单位尺寸:

1.确定设计稿对应的vw尺寸(1/100视口宽度)   查看设计稿宽度 > 确定参考设备宽度(视口宽度)> 确定vw尺寸(1/100视口宽度) 

2.vw单位的尺寸 = px单位数值 /(1/100视口宽度)  

思考:开发中,会不会vw和vh混用呢? 不会。
因为 vh是1/100视口高度,全面屏视口高度尺寸大,如果混用可能会导致盒子变形。
a标签在一行,给父级加 display: flex;  不加display:inline-block;的原因是默认有间距,去掉间距太麻烦

视频布局:父级左右padding  每个视频盒子  宽度为50%  左右padding(拉开内容的距离)

/* 弹性盒子换行 */  flex-wrap: wrap;

随机推荐

  1. django 之swagger配置与生成接口文档

    swagger好处不多说,直接上配置步骤 1.安装swagger pip install django-rest-swagger 2.将swagger配置到setting.py文件中 3.在主url. ...

  2. ssm——mybatis整理

    目录 1.mybatis框架概述 2.直接使用jdbc连接数据库带来的问题 3.mybatis连接池 3.1.mybatis连接池yml配置 3.2.mybatis连接池xml配置 4.一个简单的my ...

  3. [seaborn] seaborn学习笔记6-热图HEATMAPPLOT

    6 热图Heatmapplot(代码下载) 热图是指通过将矩阵单个的值表示为颜色的图形表示.热力图显示数值数据的一般视图非常有用,制作热图很简单,且不需要提取特定数据点.在seaborn中使用heat ...

  4. [python]《Python编程快速上手:让繁琐工作自动化》学习笔记2

    1. 读写文件笔记(第8章)(代码下载) 1.1 文件与文件路径 通过import os调用os模块操作目录,常用函数如下: 函数 用途 os.getcwd() 取得当前工作路径 os.chdir() ...

  5. 前菜--Numpy

    import numpy as np NumPy : numberial python NumPy的核心:数据结构 ndarray 1.1 数组方法 np.array 创建数组 基本语法:np.arr ...

  6. python进阶之路18 os、sys、json模块

    os模块与sys模块 os模块主要与操作系统打交道 sys模块主要与python解释器打交道 os模块(重要) os模块主要与代码运行所在的操作系统打交道 import os os.path.spli ...

  7. 《深度探索C++对象模型》第四章 Function语意学

    member function相对于nonmember function之间不存在效率之间的差别,因为编译器内部已经将"member 函数实体"转化为对等的"nonmem ...

  8. pip19.2.3升级到20.3.3版本升级失败问题

    2021-01-06 macOS版本:11.1 安装pip: sudo easy_install pip   话不多说,直接上问题   一行命令搞定 终端:sudo pip install --upg ...

  9. Java基础学习笔记-关键字、标识符、分隔符

    标识符(identifier),我的理解呢,简单来说就是一个常量或者变量的名字啦 命名规则: 只能以 字母..$ 这三种开头,后面的话就可以由字母..$和数字组成 不能用Java中的关键字 不能包含空 ...

  10. MAC 安装homebrew最好的办法哦~~

    Command+Shift+. 可以显示隐藏文件.文件夹,再按一次,恢复隐藏:finder下使用Command+Shift+G 可以前往任何文件夹,包括隐藏文件夹.   常用指令如下 cd ~ 进入根 ...