vw单位相关
1.相对于视口的宽度。视口被均分为100单位的vw
h1 { font-size: 8vw; }
如果视口的宽度是200mm,那么上述代码中h1元素的字号将为16mm,即(8x200)/100
2.相对于视口的高度。视口被均分为100单位的vh
h1 { font-size: 8vh; }
如果视口的高度是200mm,那么上述代码中h1元素的字号将为16mm,即(8x200)/100
3.相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax
h1 { font-size: 8vmax; }
如果视口的宽度是300mm,高度是200mm,那么上述代码中h1元素的字号将为24mm,即(8x300)/100,因为宽度比高度要大,所以计算的时候相对于宽度。
4.相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin
h1 { font-size: 8vm; font-size: 8vmin; }
如果视口的宽度是300mm,高度是200mm,那么上述代码中h1元素的字号将为16mm,即(8x200)/100,因为高度比宽度要小,所以计算的时候相对于高度。
兼容性:
vw单位相关的更多相关文章
- px,em,rem,vw单位在网页和移动端的应用
px: 是网页设计中最常用的单位,然而1px到底是多大长,恐怕没有人能回答上来 它用来表示屏幕设备物理上能显示的最小的一个点,这个点不是固定宽度的,不同设备上点的长度.比例有可能会不同. 假设:你现在 ...
- 关于使用vw单位适配H5项目(二)
一些比较小的H5页面,我觉得全没有必要一定要使用框架的,比如vue和react之类的,我觉得原生的js,html5也可以写好移动端. 最近刚好要赶10多个h5页面,适配移动端的,各种手机型号都要适配, ...
- 和我一起使用postcss+gulp进行vw单位的移动端的适配
随着iphoneX的出现,新的一轮适配大法应该又出现了吧?不论是使用flex布局或者媒体查询,好似都不能完全解决新加的刘海带来的适配问题. 但是有一个单位vw就神奇的解决了这个问题.vw和vh是相对于 ...
- webpack的像素转vw单位的loader插件
安装: npm i px2vw-view-loader 配置: 按以下loader格式,添加进入webpack配置文件,实现从px转换成vw,适用于移动端项目 module: { rules: [{ ...
- 【前端适配】vw单位移动端适配方案
近些年移动端的强势崛起,导致移动端适配越来越重要,个人之前一直使用的是rem进行适配,但是发现并不是非常完美,给力的是大漠老师写了一篇<如何在Vue项目中使用vw实现移动端适配>,比较完美 ...
- 解决uc浏览器不支持vw单位的方法
插入下段代码,使用rem来代替vw <script type="text/javascript"> (function (doc, win) { var docEl = ...
- 认识 vh 和 vw 单位
1. 页面 html 结构 <header> <h1>欢迎来到米修在线</h1> <p>Lorem ipsum dolor sit amet conse ...
- 基于react/vue的移动端终极适配方案vw单位(更新css-modules配置)
传送门: https://segmentfault.com/a/1190000014185590
- vue项目使用vw单位适配移动端方法
传送门: https://blog.csdn.net/zjw0742/article/details/79337336
随机推荐
- 【默默努力】fishingGame
这个捕鱼游戏挺有意思的,通过发射子弹,打鱼.打鱼的子弹会消耗金币,但是打鱼如果打到了鱼,就会奖励金币的数量. 我如果写这个的话,应该会画一个 背景海底,然后生成很多鱼的图片,还要有一个大炮,金币.大炮 ...
- Android开发 SpannableString开发详解
前言 SpannableString,是google提供用来处理富文本的功能类.支持很多文本内容的效果变化.另外,它也是Android实现富文本编辑器的关键. 关键API详解 String conte ...
- 容斥原理——hdu2204dfs深搜
/* 枚举素数幂p 然后求k^p<=n 的 k的个数 因为 k^p1*p2==k^p2*p1,所以这两种情况是多算的,所以要进行容斥 减去两个质数幂相乘的,再加上三个质数幂相乘的 因为2*3*5 ...
- Windows的SEH机理简要介绍
1.异常分类 一般来说,我们把Exception分为2类,一类是CPU产生的异常,我们称之为CPU异常(或者硬件异常).另一类为是通过调用RaiseException API产生的软件异常,我们称之为 ...
- FreeMarker 自定义 TemplateDirectiveModel(一)
FreeMarker 是一个用 Java 语言编写的模板引擎,它基于模板来生成文本输出.FreeMarker 与 Web 容器无关,即在 Web 运行时,它并不知道 Servlet 或 HTTP.它不 ...
- Spring MVC(六)--通过URL传递参数
URL传递参数时,格式是类似这样的,/param/urlParam/4/test,其中4和test都是参数,这就是所谓的Restful风格,Spring MVC中通过注解@RequestMapping ...
- Python学习day43-数据库(多表关系)
figure:last-child { margin-bottom: 0.5rem; } #write ol, #write ul { position: relative; } img { max- ...
- RocketMQ补偿方案架构设计
RocketMQ作为消息中间件,在系统异步化架构中,应用非常广泛.但是我们在享用RocketMQ的同时,也不能百分百完全信赖它.一旦RocketMQ崩溃了,给我们业务带来的也将是毁灭性打击. 因此,我 ...
- JAVA缓存的实现
缓存可分为二大类: 一.通过文件缓存,顾名思义文件缓存是指把数据存储在磁盘上,不管你是以XML格式,序列化文件DAT格式还是其它文件格式: 二.内存缓存,也就是实现一个类中静态Map,对这个Map进行 ...
- 从0开始学习ssh之basedao
用于所有dao里边会有许多相同的方法,例如save,update等等.应此设计一个basedao,所有dao都继承它.这样可以省去许多工作量. basedao如下 package cn.itcast. ...