vw 前端_前端常用开发单位-vw
前端常用开发单位-vw
05-前端开发常用单位-vwvh
*{
margin: 0;
padding: 0;
}
/*div{*/
/* width: 10vmin;*/
/* height: 10vmax;*/
/* background: red;*/
/*}*/
div{
width:1vw;
height: 1vh;
background: red;
}
/*
1.什么是vw(Viewport Width)和vh(Viewport Height)?
1.1vw和vh是前端开发中的一个动态单位, 是一个相对于网页视口的单位
1.2系统会将视口的宽度和高度分为100份,1vw就占用视口宽度的百分之一, 1vh就占用视口高度的百分之一
1.3vw和vh和百分比不同的是, 百分比永远都是以父元素作为参考
而vw和vh永远都是以视口作为参考
结论: vw/vh是一个动态的单位, 会随着视口大小的变化而变化(相对单位)
2.什么是vmin和vmax?
vmin: vw和vh中较小的那个
vmax: vw和vh中较大的那个
使用场景: 保证移动开发中屏幕旋转之后尺寸不变
* */
console.log(window.innerWidth, window.innerHeight);
let oDiv = document.querySelector("div");
console.log(getComputedStyle(oDiv).width);
console.log(getComputedStyle(oDiv).height);
效果:
vw 前端_前端常用开发单位-vw相关推荐
- java后台转前端_从后端开发转职前端开发,我都经历了些什么?
原标题:从后端开发转职前端开发,我都经历了些什么? 从前端转行后端 从后端开发转职到前端开发真的不容易. 特别是当你已经习惯了后端开发的工作模式,习惯了构建数据结构,编写类似于测试驱动开发的测试,习惯 ...
- vw 前端_前端适配之vw兼容方案(Vue版)
前端适配可以说是前端工程师一个永恒的话题,而解决方案也是层出不穷,其目的都是为了在各个分辨率中最大程度还原设计稿.今天给大家介绍的是vw兼容方案,其原理就是根据视口宽度自动计算页面上的尺寸,无论高度. ...
- 乾坤 微前端_前端优秀资源整理(持续更新~)
入门必备 developer-roadmap: 超级全的2020年前端学习路线 freeCodeCamp: 一步一步在线引导学习, 有很多开源的课程和代码 职场必备 front-end-intervi ...
- python后端数据发送到前端_前端与后端的数据交互(jquery ajax+python flask)
前端与后端的数据交互,最常用的就是GET.POST,比较常用的用法是:提交表单数据到后端,后端返回json 前端的数据发送与接收 1)提交表单数据 2)提交JSON数据 后端的数据接收与响应 1)接收 ...
- ssm把后端数据传到前端_前端传数据到后台分别JSON和STRING接收 AJAX SPRINGBOOT ssm
前端时间复习了SSM,前后端传数据接收,做了个例子,分享下 POM org.springframework.boot spring-boot-starter-test test org.springf ...
- python怎么连接前端_前端调用Python后端API的小贴士
前言: 在仿造廖雪峰的大作业做一个博客教程的过程中,我发现后端要利用jinja模板渲染 然后前端还需要什么VUE的屌丝玩儿,而这让我在原先项目上直接写html代码然后调用API 的RESTFUL 很 ...
- 前端_前端招聘面试题(1)
复制下链接: 1. 较为基础(编程方面) http://finalshares.com/read-7689 2. 深度解析(整体思路) http://www.finalshares.com/ ...
- vue怎么vw布局好用_Vue 实现 rem 布局或vw 布局的方法_晴枙_前端开发者
一.实现 rem 布局 移动端 name="viewport" content="width=device-width, initial-scale=1, maximum ...
- 前端学习(381):CSS3 的视口单位vw、vh实现自适应(带有px,em,rem的简单介绍)
一.px,em,rem,vw的简单介绍 1.px px其实就是像素的意思,全称pixel,也就是图像的基本采样单位.对于不同的设备,它的图像基本单位是不同的,比如显示器和打印机.而我们通常所说的显示器 ...
最新文章
- 讨论Linux目录结构
- echarts树点击label事件_ECharts 堆积木(砖块)游戏
- 5-29 vscode占位
- 1.16 项目实例:Java图书信息查询
- Vue中实现页面上点击按钮下载文件(exe)
- python切换ip群发邮件_通过 python 把家里路由的 IP 发邮件给自己
- 【汇编语言】王爽实验5(5)(6)的解答 建立数据类型匹配的观念
- springboot判断有没有库_Springboot 使用JPA @Query 注解 查询语句条件 有可能为空,Oracle数据库...
- Linux的一些简单的常用命令
- dede定义全局变量(include/common.inc.php)及调用方式
- 翁恺老师C语言学习笔记(十)指针_指针变量就是记录地址的变量
- win2003 搭建文件服务器,用win2003+server搭建安全文件服务器.doc
- 【数字信号调制】基于matlab GUI PCM编码调制【含Matlab源码 1018期】
- c语言判断素数(质数)
- “终端服务器超出了最大允许连接数”的解决方法汇总
- aspCMS后台getshell
- vant实现Select效果--单选和多选
- P1162 填涂颜色(BFS)
- 从play_mp3例程出发理解ESP32-ADF的使用方法
- Bugku:web 秋名山老司机
热门文章
- Centos离线环境安装pip
- vb中imp是什么意思_oracle
- win10系统能正常接收qq微信但打不开网页问题解决方法
- execve 执行遇到的问题-已解决
- 关于Web实现前后端分离,前后端解耦
- javaweb高并发量网站解决方案
- 看透这些才能赢,句句经典
- python中的_和__
- 9.8.1 1.打印head标签的内容。2.打印body标签的内容。3.打印id为Hi的标签对象
- 计算机专业本科毕业生去当兵,本科毕业去当兵如何?过来人是这么说的,很有道理!...