css自适应单位布局vm,vh
视口单位(Viewport units)
什么是视口?
在桌面端,视口指的是在桌面端,指的是浏览器的可视区域;而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Viewport(视觉视口),Ideal Viewport(理想视口)。
视口单位中的“视口”,桌面端指的是浏览器的可视区域;移动端指的就是Viewport中的Layout Viewport, “视区”所指为浏览器内部的可视区域大小,即window.innerWidth/window.innerHeight
大小,不包含任务栏标题栏以及底部工具栏的浏览器区域大小。。
根据CSS3规范,视口单位主要包括以下4个:
1.vw:1vw等于视口宽度的1%。
2.vh:1vh等于视口高度的1%。
3.vmin:选取vw和vh中最小的那个。
4.vmax:选取vw和vh中最大的那个。
vh and vw:相对于视口的高度和宽度,而不是父元素的(CSS百分比是相对于包含它的最近的父元素的高度和宽度)。1vh 等于1/100的视口高度,1vw 等于1/100的视口宽度。
比如:浏览器高度950px,宽度为1920px, 1 vh = 950px/100 = 9.5 px,1vw = 1920px/100 =19.2 px。
vmax相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax。
vmin相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin。
css自适应单位布局vm,vh相关推荐
- 前端css单位小结:vh、vw、百分比、rem、px、计算属性calc
写在前面: 本文作为本人学习总结之用,同时分享给大家~ 个人前端博客网站:zhangqiang.hk.cn 欢迎加入博主的前端学习qq交流群::706947563,专注前端开发,共同学习进步! 前端c ...
- css px em rem % vw vh vm 区别
前言 在传统项目开发中,我们只会用到 px.%.em 这几个单位长度,它们可以适用大部分项目的开发,并且拥有较好的兼容性. 而从 css3 开始,浏览器对逻辑单位的支持又提升了新的境界,增加了 rem ...
- vm vh移动端布局及 bilibili官网移动端首页布局
vm和vh是啥? 市场上的移动端大多数为flex布局,此时我们用到了rem这个单位,但是rem需要媒体查询,要根据页面是尺寸进行修改,而vm/vh省去各种判断和修改,像B站就通过vue和vm写的. v ...
- 20、CSS中单位:【px和%】【em和rem】【vw|vh|vmin|vmax】的区别
CSS中的px 和 % px (pixels) 是固定单位,也可以叫基本单位,代表像素,可以确保元素的大小不受屏幕分辨率的影响. % (percentage) 是相对单位,代表元素大小相对于其父元素或 ...
- java 自适应屏幕_自适应屏幕的CSS响应式布局设计技巧总结
摘要:这篇CSS教程栏目下的"自适应屏幕的CSS响应式布局设计技巧总结",介绍的技术点是"css响应式.响应式布局.响应式.自适应.CSS.设计",希望对大家开 ...
- 在php中页面布局 3列左右侧固定中间自适应居中,css三列布局--两边固定中间自适应和中间固定两边自适应...
三列布局 本篇讲三列布局,面试常考题,自己总结的,如有什么问题,欢迎指出!我会用红色标注出主要作用部分,都是最精简的写法,,没有多余的修饰. 布局方式一:两边固定中间自适应 1.flex布局 思路:将 ...
- css三列布局--两边固定中间自适应和中间固定两边自适应
三列布局 本篇讲三列布局,面试常考题,自己总结的,如有什么问题,欢迎指出!我会用红色标注出主要作用部分,都是最精简的写法,,没有多余的修饰. 布局方式一:两边固定中间自适应 1.flex布局 思路:将 ...
- CSS响应式布局(自适应布局)
CSS 响应式布局也称自适应布局,是 Ethan Marcotte 在 2010 年 5 月份提出的一个概念,简单来讲就是一个网站能够兼容多个不同的终端(设备),而不是为每个终端做一个特定的版本.这个 ...
- css什么是自适应布局,css 自适应布局阮一峰
转载一篇文章: 自适应网页设计(Responsive Web Design) 作者: 阮一峰 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小 ...
最新文章
- python: c_char_p指向的bitmap图像数据,通过c_char_Array最终赋值给PIL的Image对象
- 安装texlive并用latex编写一段中文,最后生成pdf文件
- 抛物线运动JavaScript实现
- Windows共享Linux打印机,linux – 如何为cups客户端构建windows共享打印机的url
- 房价必须涨,不涨不正常!因为妈妈又印钱了
- mysql lost connection to server during query
- js解析网址获取需要的数据
- 发现一个 WPF/E Asp.net Server Control
- C++ 访问成员 “->“还是“.“
- Mac上进行session hijack
- 打造一个基于机器学习的图像解码平台
- ios系统安装包下载_iOS 屏蔽系统升级,描述文件版本已复活,无需越狱,请速度下载!...
- java.lang.OutOfMemoryError: Java heap space
- 单点登录cas常见问题(九) - android app怎么接入cas单点登录系统?
- 利用js和jquary制作轮播图
- Oracle Data Guard 简介
- 一些工具 covim, Topcoat, Runscope, Ghost
- 在SNMP Service属性中不显示安全选项的解决办法
- 2021全球与中国船舶电子导航系统市场现状及未来发展趋势
- 单一参数的交流电路总结
热门文章
- 【Matlab元胞自动机】元胞自动机大型商场人流疏散【含源码 665期】
- 对象及日期定时器、延时器
- 微信小程序 在tabBar某一项的右上角添加文本(购物车数量)
- PT2262 433MHZ超再生遥控电路如何用STM软解码代替TP2272(省去PT2272)
- SRAM DRAM SDRAM DDR2 LPDDR2 PSRAM RLDRAM的区别和联系
- 解决农产品滞销难题,农村淘宝有何绝招?
- 庄子 “唯至人乃能游于世不避,顺人而不失己。”
- element Dropdown二级下拉菜单
- 歌德巴赫猜想---java
- 2023年创新型中小企业评价和专精特新认定