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. [seaborn] seaborn学习笔记9-绘图实例(1) Drawing example(1)

    文章目录 9 绘图实例(1) Drawing example(1) 1. Anscombe's quartet(lmplot) 2. Color palette choices(barplot) 3. ...

  2. 《深度探索C++对象模型》第三章 Data语意学

    首先给出以下例子: class X{}; class Y:public virtual X{}; class Z:public virtual X{}; class A:public Y,public ...

  3. Pytorch:单卡多进程并行训练

    1 导引 我们在博客<Python:多进程并行编程与进程池>中介绍了如何使用Python的multiprocessing模块进行并行编程.不过在深度学习的项目中,我们进行单机多进程编程时一 ...

  4. SQL优化的一些方法

    1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. 2.应尽量避免在 where 子句中对字段进行 null 值判断,否则将导致引擎放弃使用索 ...

  5. dapr入门与本地托管模式尝试

    1 简介 Dapr是一个可移植的.事件驱动的运行时,它使任何开发人员能够轻松构建出弹性的.无状态和有状态的应用程序,并可运行在云平台或边缘计算中,它同时也支持多种编程语言和开发框架.Dapr支持的语言 ...

  6. 定时调度插件------Sundial

    1 插件概述 开源链接:https://gitee.com/dotnetchina/Sundial 作者:百小僧 版本:2.5.6 2 使用方式 2.1 安装 nuget :搜索Sundial或使用命 ...

  7. wsl 网络探究

    省流:wsl2能否固定ip地址? - 豆腐干的回答 - 知乎 https://www.zhihu.com/question/387747506/answer/2764445888 割--------- ...

  8. 关于AD获取成员隶属于哪些组InvokeGet("memberOf")的问题

    关于AD获取成员隶属于组成员问题 获取结果默认返回object类型,可能是string类型,也可能是object[]类型,所以只有一个结果的时候是string类型,直接返回object[]会报错 pr ...

  9. 接入jira OAuth权限流程

    如果要在自己的系统中操作jira的api完成这些单据的创建.审批等操作,就不得不要先完成jira的第三方授权,才能在第三方系统去做这些jira的操作. 首先必须在jira系统配置客户端的相关信息,须配 ...

  10. SpringCloud Sleuth链路追踪

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