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. 前段知识之CSS

    目录 CSS层叠样式表 CSS语法结构: CSS注释语法 引入css的多种方式 CSS选择器 1. CSS基本选择器 2. CSS组合选择器 3. 分组与嵌套 4. 属性选择器 5. 伪类选择器 6. ...

  2. Navicat Premium无法连接到oracle数据库的解决方法

    原因:Navicat Premium连不上oracle数据库一般是因为oci.dll文件的问题 解决方法:找到oracle安装路径中的oci.dll文件或者PL/SQL Developer安装路径中的 ...

  3. java中的静态属性和静态方法

    本文主要讲述java的静态变量和静态方法 静态变量和静态方法,随着类加载完成,而完成,随着类的消失,而销毁. 静态方法只能调用静态变量/方法:普通方法,既能调用静态变量/方法,也能调用非静态变量/方法 ...

  4. 动态更改Spring定时任务Cron表达式的优雅方案

    "Most of you are familiar with the virtues of a programmer. There are three, of course: lazines ...

  5. 编写异步任务@Async出现bean无法注入的问题解决方案

    在编写一个异步任务时出现报错:"The bean 'asyncShenCe' could not be injected as a 'com.sinochem.api.service.imp ...

  6. Python3套接字(socket)通讯(TCP)

    最近写了一个工程,用作运维的,所以研究了一下Python的TCP通讯(服务器挂一个脚本,电脑挂一个脚本,就可以通过此通讯进行编码加密后传输取回想要的内容) 服务端: from socket impor ...

  7. cordova完整版本创建、修改自定义插件重新调试步骤带截图

    创建第三方插件 npx plugman create --name myplugin --plugin_id xiao.jin.plugin --plugin_version 1.0.0 添加平台支持 ...

  8. 学习python的编程语言

    前言 那么多编程语言,为什么学python 易于学习,是所有编程语言当中最容易学习的 没有最好的语言,只有最合适的语言 第一章 python基础 1. 课程整体介绍 课程整体介绍 python编程基础 ...

  9. HOMER docker版本安装详细流程

    概述 HOMER是一款100%开源的针对SIP/VOIP/RTC的抓包工具和监控工具. HOMER是一款强大的.运营商级.可扩展的数据包和事件捕获系统,是基于HEP/EEP协议的VoIP/RTC监控应 ...

  10. wsl 自动配置代理地址