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之ORM表高级操作、增删改查、外键字段连表查、单表查、跨表查、F/Q查询

    目录 一.如何开启自己的测试脚本? 二.对表数据的添加.更新.删除 1.create() 变态操作之批量插入数据 2.update() 3.delete() 4.如何查看QuerySet对象执行的sq ...

  2. 2022的ShellCTF之web_WP

    Extractor: 考点是SQL注入,不过数据库不是mysql,而是sqlite 首先尝试了:1' or 1=1# 尝试1' or 1=1 -- 发现有东西,使用 :order by 判断列表,知道 ...

  3. wsl2 kali修改语言

    直接执行sudo dpkg-reconfigure locales 会提示 dpkg-query: package 'locales' is not installed and no informat ...

  4. [OpenCV实战]19 使用OpenCV实现基于特征的图像对齐

    目录 1 背景 1.1 什么是图像对齐或图像对准? 1.2 图像对齐的应用 1.3 图像对齐基础理论 1.4 如何找到对应点 2 OpenCV的图像对齐 2.1 基于特征的图像对齐的步骤 2.2 代码 ...

  5. Siri Shortcut

      AppDelegate.m         //#pragma mark - INUIAddVoiceShortcutButtonDelegate //新添加 - (void)presentAdd ...

  6. 学习ASP.NET Core Blazor编程系列二十二——登录(1)

    学习ASP.NET Core Blazor编程系列文章之目录 学习ASP.NET Core Blazor编程系列一--综述 学习ASP.NET Core Blazor编程系列二--第一个Blazor应 ...

  7. JS基础简介

    JS基础简介 一.JS简介 JavaScript(简称'js')是一种具有函数优先的轻量级.解释型或及时编译型的编程语言.虽然它是作为开发web页面的脚本语言而出名,但是它也被用到了很多的非浏览器环境 ...

  8. BIGO 如何做到夜间同时运行 2.4K 个工作流实例?

    点亮 ️ Star · 照亮开源之路 GitHub:https://github.com/apache/dolphinscheduler   ​ 精彩回顾 近期,BIGO 的大数据研发工程师许名勇在社 ...

  9. .NET 支付宝SDK新版 AlipayEasySDK 配置文件详细说明

    config代码: using Tea; namespace Alipay.EasySDK.Kernel { /// <summary> /// 客户端配置参数模型 /// </su ...

  10. SpringCloud Sleuth链路追踪

    1.概要 一般的,一个分布式服务跟踪系统,主要有三部分: 数据收集 数据存储 数据展示 然而这三个部分其实不都是由SpringCloud Sleuth(下面我简称为Sleuth)完成的,Sleuth负 ...