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. 启动springboot项目报错Unable to start embedded Tomcat

    1.问题描述 最近在学习springcloud的时候,在父工程下新建一个model后,引入dashboard相关依赖后启动报错 2.产生原因 产生原因有可能就是pom.xml中下载的jar包版本冲突 ...

  2. ArcGIS工具 - 统计工具数量

    ESRI作为GIS行业中的龙头,代表产品ArcGIS也在不断地优化和升级,从10.0开始已发布了8个版本,其工具箱(ToolBox)是它一个特色,每个版本的工具箱数量是不相同的,为源地理来教您如何统计 ...

  3. Git使用记录 - 持续更新

    本地生成 sshkey 打开git命令工具 cd ~/.ssh ssh-keygen -t rsa -C "实际的eamil地址" ··· // 一路回车,出现以下则说明成功 Yo ...

  4. 失配树学习笔记 | P5829 【模板】失配树

    简介 失配树(简称 Fail 树),是基于 KMP 的算法,可以高效的解决复杂的字符串前缀后缀关系问题. 前置知识: KMP 算法(求失配数组) 最近公共祖先(LCA) 希望大家看完这篇文章后可以理解 ...

  5. 04-Sed操作参数

    1 Sed操作参数 1.1 s--替换 s表示替换(substitute)文件内的字符串. [address1],[address2]s/pattern/replacement/[flag] # s/ ...

  6. angular 输入框获取焦点失效的问题

    重点说明: 假如先设定了 输入框disabled又打开,然后执行获取焦点,可能会失效,这个时候可以把getFocus函数放在定时器里,1秒钟后执行,就可以了哦~ 具体代码如下 html         ...

  7. JSP第十一次作业

    1.第十二周上机作业(邮件功能)的控制层代码改用为servlet实现.2.学习通发布了考试,截止到本周六.  com.gd.dao  BaseDao 1 package com.gd.dao; 2 3 ...

  8. 重学SpringBoot. step2 Spring AOP

    Spring AOP AOP的原理,就是生成对象的代理,然后通过在代理的执行中,添加一些钩子来扩展功能. @Aspect public class MyAspect { @Pointcut(" ...

  9. 环形链表I、II(含代码以及证明)

    环形链表 解题思路 定义两个指针,一个快指针,一个慢指针,快指针每次移动两个节点,慢指针每次移动一个节点. 从头节点开始,让快慢指针同时移动,如果链表中有环,那么快慢指针一定会在某个节点相遇. 如果快 ...

  10. 【Oculus Interaction SDK】(七)使用射线进行交互(物体 & UI)

    前言 这篇文章是[Oculus Interaction SDK]系列的一部分,如果发现有对不上的对方,可以回去翻看我之前发布的文章,或在评论区留言.如果文章的内容已经不适用于新版本了,也可以直接联系我 ...