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. 使用WPF或AspNetCore创建简易版ChatGPT客户端,让ChatGPT成为你的私人助理

    前言:前一天写的一个ChatGPT服务端,貌似大家用起来还不是那么方便,所以我顺便用WPF和AspNetCore的webapi程序做个客户端吧,通过客户端来快速访问chatgpt模型生成对话.   1 ...

  2. 小程序与app区别及测试点

    小程序和app区别 1. 用户获取渠道区别 小程序: 二维码.用户分享推荐.搜索小程序 APP: 需要去应用市场(或其他)下载 2. 下载.安装卸载 小程序: 不需下载安装,清除时直接删除小程序 AP ...

  3. vulnhub靶场之GROTESQUE: 3.0.1

    准备: 攻击机:虚拟机kali.本机win10. 靶机:Grotesque: 3.0.1,下载地址:https://download.vulnhub.com/grotesque/grotesque3. ...

  4. 洛谷P2196例题分析

    [NOIP1996 提高组] 挖地雷(原题) 题目描述 在一个地图上有\(N\)个地窖\((N \le 20)\),每个地窖中埋有一定数量的地雷.同时,给出地窖之间的连接路径.当地窖及其连接的数据给出 ...

  5. 把ChatGPT配置到微信群里,可以对AI提问了!

    作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 一.前言:用的很爽! 自从小傅哥用上 ChatGPT 连搜索引擎用的都不多了,很多问题的检索我 ...

  6. MongoDB从入门到实战之MongoDB工作常用操作命令

    前言: 上一章节我们快速的在Docker容器中安装了MongoDB,并且通过Navicat MongoDB可视化管理工具快速的连接.创建数据库.集合以及添加了文档数据源.这一章节我们主要是了解一下在日 ...

  7. [编程基础] C++多线程入门7-条件变量介绍

    原始C++标准仅支持单线程编程.新的C++标准(称为C++11或C++0x)于2011年发布.在C++11中,引入了新的线程库.因此运行本文程序需要C++至少符合C++11标准. 文章目录 7 条件变 ...

  8. RocketMQ Compaction Topic的设计与实现

    本文作者:刘涛,阿里云智能技术专家. 01 Compaction Topic介绍 一般来说,消息队列提供的数据过期机制有如下几种,比如有基于时间的过期机制--数据保存多长时间后即进行清理,也有基于数据 ...

  9. 刷题笔记——3003.鸡兔同笼问题 & 2767.计算多项式的值

    题目1 3003.鸡兔同笼问题 代码 while True: try: x,y=map(int,input().strip().split()) a = int((4*x-y) / 2) b = x ...

  10. 图文并茂解决Client does not support authentication protocol requested by server; consider upgrading MySQL

    今天服务器部署node.js+mysql,调用接口报错ER_NOT_SUPPORTED_AUTH_MODE: Client does not support authentication protoc ...