页面适配之pt、px、em、rem用法和特点
因为自己也经常做移动端的开发工作,现总结一份页面适配的笔记。
1. pt
点(Points),绝对长度单位。
印刷业上常使用的单位,磅的意思,一般用于页面打印排版。
不知道经常做设计的同学知不知道zeplin这个网站,它用的像素单位都是pt。
1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px
用法:
div { font-size:10pt; }
2. px
相对长度单位。像素(Pixels)。像素px是相对于显示器屏幕分辨率而言的。
div { font-size:10px; }
兼容性和pt一样
px不会因为其它元素的尺寸变化而变化。
像素的大小是会“变”的,也称为“相对长度”,越高位的像素,其拥有的色板也就越丰富,越能表达颜色的真实感。
px特点:比较稳定和精确,但在浏览器放大缩小会出现页面混乱。
一般情况下,我们平时都是用px来定义字体,所以无法用浏览器字体放大的功能,IE无法调整那些使用px作为单位的字体大小。大部分网站能调整是因为用了相对长度单位em或rem。如果改变了浏览器的缩放,web页面样式就会乱掉,这样对于用户来说,就是个大问题了。这时,就提出了相对长度单位。
Firefox能够调整px和em,rem,但是96%以上的中国网民使用IE浏览器(或内核)。
假设就使用浏览器默认的字号16px,来看一些px单位与rem之间的转换关系:
如果你要设置一个不同的值,那么需要在根元素中定义,为了方便计算,时常将在元素中设置font-size值为62.5%:
html {font-size: 62.5%;
}
相当于在中设置font-size为10px,此时,上面示例中所示的值将会改变:
3.em
相对长度单位。相对于当前对象内文本的字体尺寸。
如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。
相对长度单位。像素(Pixels)。
div { font-size:10em; }
兼容性和pt一样。
em特点:
(1)em的值并不是固定的
(2)em会继承父级元素的字体大小
em表示相对于父元素的字体大小,em是相对单位,没有一个固定的度量值,而是由其它元素尺寸来决定的相对值。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。
任意浏览器的默认字体都是16px,所有未经调整的浏览器都符合:1em =16px。那么12px = 0.75em;10px = 0.625em;为了简化font-size的换算,需要在css中的body选择器中声明font-size=62.5%,这就使em值变为:16px*62.5% =10px;这样12px=1.2em;10px=1em,也就是说只需要将你原来数值px除以10就可以了。
使用em的注意点:
1. body选择器中声明Font-size=62.5%;
2. 将你的原来的px数值除以10,然后换上em作为单位;
3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。
4. rem
相对长度单位。相对于根元素(即html元素)font-size计算值的倍数。是CSS3新增的一个相对单位(root em,根em)
div { font-size:10rem; }
rem可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。
5. px、pt、em、rem转化表:
pt=1/72(英寸) px=1/dpi(英寸) pt=px*dpi/72
以windows下的96dpi来计算,1pt=px*96/72=px*4/3
字号 | Pixels | Ems | Percent | Points |
---|---|---|---|---|
八号 | 6px | 0.375em | 37.5% | 5pt |
七号 | 7px | 0.4375em | 43.75% | 5.5pt |
小六 | 8px | 0.5em | 50% | 6.5pt |
9px | 0.55em | 55% | 7pt | |
六号 | 10px | 0.625em | 62.5% | 7.5pt |
11px | 0.7em | 70% | 8pt | |
小五 | 12px | 0.75em | 75% | 9pt |
13px | 0.8em | 80% | 10pt | |
五号 | 14px | 0.875em | 87.5% | 10.5pt |
15px | 0.95em | 95% | 11pt | |
小四 | 16px | 1em | 10% | 12pt |
17px | 1.05em | 105% | 13pt | |
18px | 1.125em | 112.5% | 13.5pt | |
四号 | 19px | 1.2em | 120% | 14pt |
20px | 1.25em | 125% | 14.5pt | |
小三 | 21px | 1.3em | 130% | 15pt |
三号 | 22px | 1.4em | 140% | 16pt |
23px | 1.45em | 145% | 17pt | |
小二 | 24px | 1.5em | 150% | 18pt |
6. 下面介绍下使用方法:
现在的使用方法很多,我直接介绍我偏向的这一种了
- rem在Sass中的使用方法
@function rem($values){$root :16px;$unit: rem;$list: ();@each $v in $values {$res:0;@if ($v == 0 or $v == auto or unit($v) == rem or unit($v) == em or unit($v) == vw or unit($v) == vh){$res: $v;}@else{$res: ($v + 0px) / $root + $unit;}$list : append($list , $res);}@return $list;
}
less也可以同理这么写一个
//SASS
div{margin:rem(10px 10rem 0 auto);
}
//编译后CSS
div{margin:0.625rem 10rem 0 auto;
}
2.rem在less中的使用方法,这是一种简单的实现方式
html{font-size:62.5%;
}
@baseFontSize:10;
.pxTorem(@name, @px){@{name}: @px / @baseFontSize * 1rem;
}
.pxTorem(@name, @px1 , @px2){@{name}: @px1 / @baseFontSize * 1rem @px2 / @baseFontSize * 1rem;
}
.pxTorem(@name, @px1 , @px2 , @px3 ){@{name}: @px1 / @baseFontSize * 1rem @px2 / @baseFontSize * 1rem @px3 / @baseFontSize * 1rem;
}
.pxTorem(@name, @px1 , @px2 , @px3 , @px4){@{name}: @px1 / @baseFontSize * 1rem @px2 / @baseFontSize * 1rem @px3 / @baseFontSize * 1rem @px4 / @baseFontSize * 1rem;
}
//LESS
div{.pxTorem(width,100);.pxTorem(height,100);.pxTorem(padding,10,20);.pxTorem(margin,10,20,30,40);
}
//编译后 CSS
div{width:10rem;height:10rem;padding:1rem 2rem;margin:1rem 2rem 3rem 4rem;
}
7.其它方法
1 . px转rem在线工具
这是我看另一个网友推荐的:
[http://alurk.com/](http://alurk.comhttp://www.ofmonkey.com/front/rem
2.gulp等各类打包工具
这个方法比较激进,打包时直接匹配px,强行转为rem。
var replace = require('gulp-replace');
gulp.task('pxToRem', function(){return gulp.src('*.html').pipe(replace(/(\d+)px/g, function(match, p1){return Number(p1) / 10 + 'rem';})).pipe(gulp.dest('dir'));
});
基于编辑器sublime Text插件cssrem
参考https://github.com/flashlizi/cssremIdea 也有SCSS SASS LESS对应的自动转换插件
页面适配之pt、px、em、rem用法和特点相关推荐
- 移动端页面单位的选择(px em rem)
移动端页面单位的选择(px em rem) 绝对单位: px 相对单位: rem em em具有继承性 继承自直接父类 所以说在移动端很少用 浏览器默认的字体大小 16px 那么 1em= ...
- 网页布局中的 px,em,rem,pt
网页布局中的 px,em,rem,pt 设备像素:也叫物理像素,显示设备上最微小的物理部件. 比如 iphone 5:640 x 1136px. 不同的机型有不同的设备像素,固定死的. 这里需要讲一下 ...
- html移动端怎么做城市选择,移动端页面单位的选择(px, em, rem, vw)
px, em, rem的区别: px:绝对字体大小 em:基于一个基数来计算出相对字体大小.(移动端用的少) rem:基于根节点(html)的字体大小来计算. vw:可视区宽度单位.1vw等于可视区宽 ...
- px,em,rem,vh,vw,vmin,vmax的区别
css手册中关于font-size是这么介绍的: font-size 值可以是绝对或相对值. 绝对值: 将文本设置为指定的大小 不允许用户在所有浏览器中改变文本大小(不利于可用性) 绝对大小在确定了输 ...
- 认识css长度单位 px % em rem vh vw
目录 长度单位 px % em rem vh.vw 总结 长度单位 在日常的项目开发,在使用css样式进行时布局的时候,我们常常用到px.%.em这三个单位.CSS3开始,浏览器新增加了rem.vh. ...
- html 字号和像素的关系,一文搞懂CSS中的字体单位大小(px,em,rem...)
在学习的过程中,发现CSS有很多可以形容单位的尺寸.比方px,em,rem,vw等等.平常也没有深究,一来是没时间,二来是在我学习清单中优先级过低.一直想彻底弄明白,一直耽搁到现在.现在花上一点时间来 ...
- css中的单位换算_css大小单位px em rem的转换和详解
css大小单位px em rem的转换和详解 PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firef ...
- CSS单位--px,em,rem,rpx区别
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? Px PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够 ...
- px ,em ,rem
做移动端或者响应式的页面必然需要字体的变化的.这次我就自己的经验来说说他们之间的关系,以及怎么用. px (绝对单位)是我们常用的就不说了. em(相对单位,相对父级) em 指字体高,任意浏览器的默 ...
- css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
px:绝对单位,页面按精确像素展示 em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值. rem:相对 ...
最新文章
- python代码示例图形-Python使用matplotlib绘制三维图形示例
- 运行python需要网吗-python搭建网站(想学Python有什么建议吗?)
- 白钢条用什么可以切割_错怪李佳琦了!原来用小苏打刷牙,1个月真的可以白4度,太心动了...
- html基础知识点列表
- vue表格刷新数据_Vue.js+Layer表格数据绑定与实现更新的实例
- 基于BISS0001构成的热释电红外延时照明控制器电路图
- php 负载监控_php记录服务器负载、内存、cpu状态的代码
- 第一台电子计算机采用哪位科学家,计算机基础知识试题及答案解析
- mysql文章相似度计算_文章相似度计算
- 什么是拓扑结构_拓扑结构图
- 类比 -高速缓存Cache/内存/磁盘读写速度类比
- Breast Cancer Wisconsin (Diagnostic) Data Set
- Linux command – Stressful Application Test
- ailoop2里面的1个待考察的,在ailoop3里面的操作。(先使用海巨人,不使用英雄技能召唤图腾的问题)...
- 用Python自动计算Excel排班表的工时
- 虾皮如何注册店铺_Shopee(虾皮购物)入驻申请流程?
- 文苑杂志文苑杂志社文苑编辑部2021年第7期目录
- java中的对象是什么_Java中的对象是什么以及如何使用它?
- java多线程 wait和notify方法
- 45个有用的JavaScript技巧,窍门和最佳实践
热门文章
- 【高等数学】四.多元函数微分学和二重积分
- php word 生成图片,PHP导出成word,带图片样式
- Matlab中semilogy函数使用
- ENGLISH-英文进修
- 创客匠人直播可同时转播10大直播平台
- 小程序源码:王者荣耀吃鸡气泡等等头像框DIY在线生成N种风格-多玩法安装简单
- hive经典面试题1--根据主播上播、下播时间戳求播出时长
- org.apache.jasper.JasperException: /app/jsonp.jsp(1,2) Page-encoding specified in jsp-property-grou
- MySQL8.0软件安装失败常见问题
- matlab读取第一行是汉字csv,在MATLAB中使用`textscan`从csv文件中读取数据