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. vite+ts+vue3+router4+Pinia+ElmPlus+axios+mock项目基本配置

    1.vite+TS+Vue3 npm create vite Project name:... yourProjectName Select a framework:>>Vue Selec ...

  2. (二)elasticsearch 源码目录

    在阅读源码之前,我们先来看看整个项目的结构:(同(一)elasticsearch 编译和启动,我们使用版本7.4.0作为示例) .ci,持续集成配置 .github, 里面有 PULL_REQUEST ...

  3. OpenMP Parallel Construct 实现原理与源码分析

    OpenMP Parallel Construct 实现原理与源码分析 前言 在本篇文章当中我们将主要分析 OpenMP 当中的 parallel construct 具体时如何实现的,以及这个 co ...

  4. post方法易错地方

    <body> <h1>登录</h1> <input type="text" placeholder="请输入用户名" ...

  5. three.js一步一步来--如何画出一个转动的正方体

    基础知识--正方体代码如下 <template> <div style="width:1000px; height:800px"> <h1>正方 ...

  6. 递归概念&分类&注意事项

    递归概念&分类&注意事项 概念 递归:指在当前方法内调用自己的这种现象. 递归的分类:.递归分为两种,直接递归和间接递归..直接递归称为方法自身调用自己..间接递归可以A方法调用B方法 ...

  7. Dubbo 入门系列之基于 Dubbo API 开发微服务应用

    目标 从零上手开发基于 Dubbo 的微服务 难度 低 环境要求 系统:Windows.Linux.MacOS JDK 8 及以上(推荐使用 JDK17) Git IntelliJ IDEA(可选) ...

  8. 【分析笔记】全志方案通过命令行操作 GPIO 口(带源码分析)

    前言说明 在项目开发初期,很经常会需要临时操作某个GPIO来验证某些功能,可以通过编写一个简单的驱动程序来操作,但更方便的是可以通过命令行直接操作 GPIO ,这样不需要经过编写代码.编译驱动.推入文 ...

  9. LeetCode_804. 唯一摩尔斯密码词

    题目 难度:简单 原文:https://leetcode-cn.com/problems/unique-morse-code-words/ 题目 国际摩尔斯密码定义一种标准编码方式,将每个字母对应于一 ...

  10. QSqlTableMode | QTableWidget 清除数据

    当我使用QTableView绑定QSqlTableModel的时候,我需要清除数据,但我又不能使用QSqlTableModel::clear(),因为使用clear就会把表名等一些设置好的数据清除掉. ...