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.db.migrations.exceptions.NodeNotFoundError: Migration apitest.0001_initial dependencies reference nonexistent parent node ('product', '0001_initial')

    执行python manage.py makemigrations时出现以下错误 D:\autotestplat>python manage.py makemigrations Tracebac ...

  2. elasticsearch之单请求多查询

    一.需要解决的问题 有的时候我们需要同时执行多个查询,并且需要得到每个单独查询的搜索结果,elasticsearch提供了multi search此需求的支持: 二.elasticsearch mul ...

  3. [Python]Python调用Matlab (Pycharm版本)

    目录 第一步:生成Build文件夹 第二步: 复制build文件夹到Pycharm下 第三步:调用代码 第一步:生成Build文件夹 C:\Program Files\MATLAB\R2016a\ex ...

  4. [cocos2d-x]我发现的内存管理机制的一些问题

    之前看过的一些文章中关于内存的管理机制讲的非常好,但是我发现它们在谈到每一帧都会创建一个新的内存池的时候,我发现源码并不是这样: PoolManager* PoolManager::getInstan ...

  5. vh 存在问题?试试动态视口单位之 dvh、svh、lvh

    大部分同学都知道,在 CSS 世界中,有 vw.vh.vmax.vmin 这几个与视口 Viewport 相关的单位. 正常而言: 1vw 等于1/100的视口宽度 (Viewport Width) ...

  6. Sublime下运行javascript,并带彩色提示

    最近和各种同事磨合技术,自闭中~ 首先让JS在Sublime上运行 去下载Node.js并且安装 安装完成后 cmd 输入 node -v 查看安装是否成功. 接着打开Sublime - 工具 > ...

  7. 关于计算机与常用DOS命令

    计算机 计算机 计算机由软件和硬件组成. 能够按照程序运行,自动,高速处理海量数据的现代化智能电子设备. 计算机硬件 CPU 主板 内存 电源.主机箱 硬盘 显卡 键盘.鼠标(输入设备) 显示器(输出 ...

  8. FAQ 关于pip你应该知道的一些技巧

    pip简介 pip是安装了python之后的一个应用程序,包管理程序,有点类似于yum.npm.apt等工具 物理位置一般是python.exe所在目录下的scripts下 以我为例,我Python安 ...

  9. CoppeliaSim(原V-REP)教育版不给下载的解决方法

    CoppeliaSim(原V-REP)教育版不给下载的解决方法 首先进入CoppeliaSim官网 网址:https://www.coppeliarobotics.com/downloads http ...

  10. day07-SpringMVC底层机制简单实现-03

    SpringMVC底层机制简单实现-03 https://github.com/liyuelian/springmvc-demo.git 7.任务6-完成控制器方法获取参数-@RequestParam ...