px、em、rem、vm、vw 、vh、vmin 、vmax区分

Px表示“绝对尺寸”(并非真正的绝对),实际上就是css中定义的像素(此像素与设备的物理像素有一定的区别,后续详细说明见文末说明1),利用px设置字体大小及元素宽高等比较稳定和精确。Px的缺点是其不能适应浏览器缩放时产生的变化,因此一般不用于响应式网站。

em表示相对尺寸,其相对于当前对象内文本的font-size(如果当前对象内文本的font-size计量单位也是em,则当前对象内文本的font-size的参考对象为父元素文本font-size)。使用em可以较好的相应设备屏幕尺寸的变化,但是在进行元素设置时都需要知道父元素文本的font-size及当前对象内文本的font-size,如有遗漏可能会导致错误。

rem也表示相对尺寸,其参考对象为根元素的font-size,因此只需要确定这一个font-size。

CSS之px、em、rem三者的联系与区别原文地址

vw:视窗宽度的百分比(1vw 代表视窗的宽度为 1%)
vh:视窗高度的百分比
ps:vw、vh 是视窗大小决定的,可以直接获取高度,然而使用百分比时,若body高度没有设置,是无法正确获取高度的

vmin:当前 vw 和 vh 中较小的一个值
vmax:当前 vw 和 vh 中较大的一个值
ps: 做移动页面开发时,如果使用 vw、wh 设置字体大小(比如 5vw),在竖屏和横屏状态下显示的字体大小是不一样的。
由于 vmin 和 vmax 是当前较小的 vw 和 vh 和当前较大的 vw 和 vh。这里就可以用到 vmin 和 vmax。使得文字大小在横竖屏下保持一致

原文地址: 《CSS3 - 新单位vw、vh、vmin、vmax使用详解(附样例)》

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/402750.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Class.forName()用法详解

Class.forName()用法详解 标签: classjvmjdbc数据库documentationjava2012-03-29 09:39 40414人阅读 评论(8) 收藏 举报分类:Java考古学(74) 主要功能 Class.forName(xxx.xx.xx)返回的是一个类 Class.forName(xxx.xx.xx)的作用是要…

[poco] 访问数据库

From: https://blog.csdn.net/hl2015222050145/article/details/52335422?utm_sourceblogxgwz6 poco访问数据基本步骤: a. 创建会话(session) b. 从DB中读写数据 c. 使用statements d. 使用容器(Collection) (数据,集合...) …

应对不良网络文化的技术之一——网络信息抽取技术

1 引言 2008年1月17日,中国互联网络信息中心(CNNIC)发布了《第21次中国互联网络发展状况统计报告》[1],报告显示: (1) 截至2007年12月,网民数已增至2.1亿人。中国网民数增长迅速,比2007年6月增加4800万人&…

最安全的js类型检测

众所周知js内置的类型检测机制不可靠,比如typeof操作符,对于正则和数组检测时返回值都是object, 而使用instanceof检测类型时,虽然可以对正则和数组正常验证,但验证undefined会报错,还有对于Symbol无法验证…

HBuilder完成webApp入门(2)

一、HBuilder的下载地址:http://www.dcloud.io/,点击那个“DownLoad”就可以 了 二、假设一切顺利,启动HBuilder后,大家会看到如下的界面 点击新建移动APP: 接下来就会弹出一个选择模板的对话框: 默认的模板…

js防篡改对象之不可扩展对象

const person {name: 啦啦德玛西亚}console.log(Object.isExtensible(person))//true//使用Object.preventExtensions()可以将对象修改为不可扩展对象,无法再给对象添加属性和方法Object.preventExtensions(person)//使用Object.isExtensible()方法可以确定对象是否…

高可用集群 heartbeatv1实例

——————— 高可用集群的简单配置 ————————地址规划 主节点:HA1 172.16.21.13 hostname node2.magedu.com备节点: HA2 172.16.21.14 hostname node1.magedu.comVIP 172.16.21.9前提工作1,配置主机名 hostname保证uname …

你知道“拉黑”、“关注”、“点赞”、“转发”、“分享到朋友圈”等英语咋说吗?

From: https://www.sohu.com/a/220161051_559507 “分享到朋友圈”等英语咋说吗? Mini apps 小程序 小程序”(mini apps)是一个不需要下载安装就可使用的应用(apps that can be accessed without downloading)&#x…

C#进化史

C#进化史 C#进化史从数据类型看C#演化C# 1写的产品类C# 强类型集合——解决限制1和2c# 自动属性——解决限制3c# 4 命名实参C# 1~C# 4的演变历程排序C# 1——提供一个IComparer实现C# 2——泛型比较器C# 3——Lambda表达式、扩展方法C# 1~C# 3简化排序的历程查询集合C# 1——循…

防篡改对象之密封对象

const person {name: 啦啦德玛西亚}console.log(Object.isExtensible(person))// trueconsole.log(Object.isSealed(person))// false// 使用Object.seal()将对象修改为密封对象// 密封对象不可扩展,而且已有成员的[[Configurable]]特性将被设置为false// 意味着不…

配套自测连载(三)

接上期(答案已给出)本期是专门针对《深入理解计算机网络》图书第4章而编写的10道计算机网络体系架构中的物理层技术自测题,可以检验你对本章的学习效果。把你的答案直接写在评论中即可,笔者将在每期发表10天后给出正确答案。本书是国内最通俗、最系统的计…

[json] JSON for Modern C++

有幸能接触到这个,这是我遇到的使用最方便的json了,效率没研究过! 简单了使用了下,感觉非常好用,记录下: 要使用这个json,只需要使用json.hpp就行,放入自己的工程里,但…

面向对象的需求分析方法

面向对象的需求分析方法 面向对象的需求分析方法的核心是利用面向对象的概念和方法为软件需求建造模型。它包含面向对象风格的图形语言机制和用于指导需求分析的面向对象方法学。 面向对象的思想最初起源于 20世纪 60年代中期的仿真程序设计语言Simula67。20世纪80年代初出现的…

js防篡改对象之冻结对象

const person {name: 啦啦德玛西亚,_job: 无业}Object.defineProperty(person, job, {get: function() {return this._job},set: function(newValue) {this._job newValue}})console.log(Object.isFrozen(person))// false//使用Object.freeze()将对象修改为冻结对象&#xf…

libinject的编译

libinject是一个Android进程注入实例,其下载地址为:http://download.csdn.net/download/ljhzbljhzb/3680780 libinject的编译需要NDK开发环境,在NDK安装成功之后,可以先将其自带的实例中的HelloJni导入到eclipse中,编译…

Boost - 序列化 (Serialization)

From: https://blog.csdn.net/zj510/article/details/8105408 程序开发中,序列化是经常需要用到的。像一些相对高级语言,比如JAVA, C#都已经很好的支持了序列化,那么C呢?当然一个比较好的选择就是用Boost,这个号称C准…

Linux Supervisor 守护进程基本配置

supervisor:C/S架构的进程控制系统,可使用户在类UNIX系统中监控、管理进程。常用于管理与某个用户或项目相关的进程。 组成部分supervisord:服务守护进程supervisorctl:命令行客户端Web Server:提供与supervisorctl功能相当的WEB操…

ES6使用object的is()方法比较两个值

此前js比较两个值是否相等时,一般使用 或 符号,我之前倾向使用后者,因为可以避免比较时触发强制类型转换,但某些情况使用 依然有问题,比如再比较NaN NaN时,返回的是false,需要使用isNaN()才能…

关闭子窗口 父窗口自动刷新

function clsoseForm(){window.opener.location.hrefwindow.opener.location.href; window.opener.location.reload();window.close();}转载于:https://blog.51cto.com/congwa/1199250

使用vue的sync修饰符进行子父组件的数据绑定

官方文档 父组件代码 <template><div><input type"button" value"我是父组件的按钮" click"show" /><!-- 在需要子组件修改的数据后加上.sync即可 --><child :isShow.syncisShow v-show"isShow" />&l…