CSS---px rpx pt em rem四种单位总结
1.px像素(Pixel)
相对长度单位。像素px是相对于显示器屏幕分辨率而言的
2.rpx
rpx :微信小程序开发中新出了尺寸单位rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。
如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。
设备 rpx换算px (屏幕宽度/750) ;px换算rpx (750/屏幕宽度) ;px属于逻辑像素。
3.pt
pt就是point,是印刷行业常用单位,等于1/72英寸。
4.em
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸,
由于浏览器的默认字体大小是 16px,所以未经调整默认字体大小的浏览器都符合: 1em = 16px。
em 会继承父级元素的字体大小。由此,只需要改变父元素的字体大小,就可以同步放大或缩小子元素的字体。
EM特点
1. em的值并不是固定的;
2. em会继承父级元素的字体大小。
5.rem
rem(root em): 仍然是相对大小,但相对的只是HTML元素。
rem单位是相对单位,是相对于HTML标签的字号计算结果
1rem = 1HTML字号大小
例如在HTML字号大小为20px时,box盒子的宽度为5*20=100px,高度为3*20=60px
/* 1rem = 1html标签字号大小 */html {font-size: 20px;}.box {width: 5rem;height: 3rem;background-color: pink;}
小程序中规定屏幕宽度为20rem;1rem = (750/20)rpx 。
移动端rem计算公式:
function getRem(pwidth,prem){var html = document.getElementsByTagName("html")[0];var oWidth = document.body.clientWidth || document.documentElement.clientWidth;html.style.fontSize = oWidth/pwidth*prem + "px";}
CSS---px rpx pt em rem四种单位总结相关推荐
- px rpx pt em rem单位
一. rpx :微信小程序开发中新出了尺寸单位rpx(responsive pixel): 可以根据屏幕宽度进行自适应.规定屏幕宽为750rpx. 如在 iPhone6 上,屏幕宽度为375px,共有 ...
- php实现一行省略号,css实现文字溢出省略号的四种方法(附代码)
本篇文章给大家带来的内容是关于css实现文字溢出省略号的四种方法(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 在项目中有涉及实现一行或者第几行后加省略号,在实现第几行后加 ...
- php背景渐变颜色代码,CSS实现网页背景渐变的四种代码设置
这篇文章主要介绍了关于CSS实现网页背景渐变的四种代码设置,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 一.从上往下渐变body{ FILTER: progid:DXImageTra ...
- 外链引入css有哪些方式_CSS的四种引入方式
CSS 的引入方式最常用的有三种, 第一:在 head 部分加入 rel="stylesheet" type="text/css" href="my. ...
- css中div居中显示的四种方法
css中设置div元素居中显示的四种方法 一.先确定div的基本样式 二.具体实现方法 第一种:利用子绝父相和margin: auto实现 第二种:利用子绝父相和过渡动画tranform实现 第三种: ...
- css的经典三栏布局如何实现,css 实现三栏布局的四种方式
三栏布局就是左中右,左右两边固定,中间自适应. 1. 绝对定位 左边 中间 右边 body { padding: ; margin: ; } /* 绝对定位 */ .left, .right { po ...
- 前端单位px,pt,rem,逻辑像素,物理像素
px = 逻辑像素 pt = 物理像素 rem = 相对单位,对标html标签设置的字体大小 详见 http://yueziyao.site/2021/01/18/screen/
- CSS单位 px pt em和rem 之间的区别
CSS中可以定义大小的单位有四种px,pt,em,rem,而px可以说在网页开发中最常见的单位了.不过现在如今的大多数网站已经开始用rem这个单位了.那么这四个单位有什么区别呢? px|pt|em|r ...
- 认识css长度单位 px % em rem vh vw
目录 长度单位 px % em rem vh.vw 总结 长度单位 在日常的项目开发,在使用css样式进行时布局的时候,我们常常用到px.%.em这三个单位.CSS3开始,浏览器新增加了rem.vh. ...
最新文章
- Meta AI 新研究,统一模态的自监督新里程碑
- 新闻行业中,自然语言理解技术该如何应用?
- cobaltstrike安装_Cobalt Strike发送钓鱼邮件
- 在单链表写入一组数据代码_链表常见操作和15道常见面试题
- 【David Silver强化学习公开课】-4:Model-Free Prediction
- 剑指offer之从上到下打印二叉树
- Linux内核中的atoi,itoa等函数
- oracle连接plsqldev
- java 区分大小写_Java区分大小写
- java 替换emoji表情,java 替换掉emoji表情
- mysql force index 语法_MySQL FORCE INDEX 强制索引使用
- java两两组合(不重复)
- 安装Snipe-IT资产管理系统
- SuperMap iDesktop 之 BIM优化流程——建筑篇
- 微软疑淡化邮件服务被黑事件;DOTA2 AI 2:0 完胜世界冠军
- b站视频-尚硅谷jQuery教程张晓飞老师-笔记
- AH8669_DC650V/AC265V高压IC,输出5V12V24V500MA电源芯片方案
- 并发编程 Java 三把锁(Synchronized、ReentrantLock、ReadWriteLock)
- XTU OJ 1381表格
- leetcode1568. 使陆地分离的最少天数(Python3、c++)
热门文章
- 2017安防摄像头技术发展趋势分析
- MyBatis中jdbc和managed的区别
- R语言导入数据文件 (Excel文件、csv文件导入R)
- IDEA中enter键无法换行
- 计算机控制系统生产现场应用,浅析计算机控制系统在工业现场生产中的应用.doc...
- 开源实时数据库_实时应用程序的开源数据库
- Android通知栏字体大小,Android通知栏介绍与适配总结(上篇)
- html radio vue,Vue.js选中动态绑定的radio的指定项_心病_前端开发者
- [CSS] css使用first-child 和last-child 实现三条杠效果
- ASP.NET MVC4 微信公众平台开发测试一: 验证