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. vivo 云原生容器探索和落地实践

    作者:vivo 互联网容器团队- Pan Liangbiao 本文根据潘良彪老师在"2022 vivo开发者大会"现场演讲内容整理而成.公众号回复[2022 VDC]获取互联网技术 ...

  2. Jmeter 之 switch 控制器

    switch 控制器作用: switch 控制器起到了分流作用,具体应用在并发时,一部分用户执行某个场景,一部分用户执行另外一种场景,就像吞吐量控制器进行分流操作 switch 控制器字段介绍: 实例 ...

  3. [python] 基于paramiko库操作远程服务器

    SSH(Secure Shell)是一种网络安全协议,能够使两台计算机安全地通信和共享数据.目前,SSH协议已在世界各地广泛使用,大多数设备都支持SSH功能.SSH的进一步说明见:深入了解SSH.SS ...

  4. [编程基础] Python数据生成库Faker总结

    Python Faker教程展示了如何使用Faker软件包在Python中生成伪数据.我们使用joke2k/faker包. 1 介绍 Faker是一个生成假数据的Python库.伪数据通常用于测试或用 ...

  5. [常用工具] Python视频处理库VidGear使用指北

    VidGear是一个高性能的Python视频处理库,它在预载多个专业视频图像处理库的基础上,如OpenCV.FFmpeg.ZeroMQ.picamera.starlette.yt_dlp.pyscre ...

  6. python网络爬虫数据解析之正则

    本节内容,讲解爬取网络图片,利用正则匹配图片地址 请求网页之后,响应部分内容如下图: 1 时间:2023/1/7 10:42 2 功能描述 3 1.进行指定标签的定位 4 2.标签或者标签对应的属性中 ...

  7. idea的简单介绍

    上一篇博客中只是了解一下java文件是怎么编译的,但是一般来说大家都是使用编程软件来进行开发,我是使用IntelliJ IDEA进行开发的 官网下载IDEA(自行安装哈):地址:https://www ...

  8. 我的基于 JamStack 的新博客

    概述 今天心血来潮,介绍一下我的新博客站点 -- https://EWhisper.cn. 我是做基础平台 PaaS 运维和架构的,挺喜欢把工作中学到的新知识写下来.记笔记,突然有一天就抱着「资源共享 ...

  9. curl请求https报错

    curl 一般情况下请求http时不会有问题 但是请求 https 协议的链接时会报错,如下: curl: (60) SSL certificate problem: unable to get lo ...

  10. ★k倍区间【第八届蓝桥杯省赛C++B组,第八届蓝桥杯省赛JAVAB组】

    k倍区间 给定一个长度为 \(N\) 的数列,\(A1,A2,-AN\),如果其中一段连续的子序列 \(Ai,Ai+1,-Aj\) 之和是 \(K\) 的倍数,我们就称这个区间 \([i,j]\)是 ...