[css] px em rem
一、区别
px是相对于显示器屏幕分辨率而言的。
em相对于浏览器的默认字体尺寸。
rem相对于HTML根元素。
二、使用
1、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作为单位就行了。
所以我们在写CSS的时候,需要注意两点:
1. body选择器中声明Font-size=62.5%;
2. 将你的原来的px数值除以10,然后换上em作为单位;
3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。
2、rem
参考:http://isux.tencent.com/web-app-rem.html
css3新属性 针对于响应式网页设计
之前网页的响应式是在head标签内直接设置meta viewport标签进行缩放.
iphone4:设计宽度为320px
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0 />
iphone6: 设计宽度为375px
iPhone6需要调整缩放比例 initial-scale=375/320 =1.18
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.18 />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.30 />
缺点是:这样做会使得,因为initial-scale越来越大,相当于拉伸网页,而使得在大屏幕的移动端设备下,文字、图片会变模糊。
rem能等比例适配所有屏幕
html{
font-size:20px;
}
.btn {
width: 6rem;
height: 3rem;
line-height: 3rem;
font-size: 1.2rem;
display: inline-block;
background: #06c;
color: #fff;
border-radius: .5rem;
text-decoration: none;
text-align: center;
}
html{
font-size:40px;
}
按钮大小结果如下:
只要改变html中font-size的大小,页面中所有的width、height等用到rem单位的元素的大小都进行改变。
可以使用media对大小不同的页面进行适配,如:
html {
font-size : 20px;
}
@media only screen and (min-width: 401px){
html {
font-size: 25px !important;
}
}
@media only screen and (min-width: 428px){
html {
font-size: 26.75px !important;
}
}
@media only screen and (min-width: 481px){
html {
font-size: 30px !important;
}
}
@media only screen and (min-width: 569px){
html {
font-size: 35px !important;
}
}
@media only screen and (min-width: 641px){
html {
font-size: 40px !important;
}
}
补充:viewpoint说明
<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;” />
width: viewport 的宽度 (范围从 200 到 10,000 ,默认为 980 像素 )
height: viewport 的高度 (范围从 223 到 10,000 )
initial-scale: 初始的缩放比例 (范围从>0到 10 )
minimum-scale: 允许用户缩放到的最小比例
maximum-scale: 允许用户缩放到的最大比例
user-scalable: 用户是否可以手动缩放
对于这些属性,我们可以设置其中的一个或者多个,并不需要你同时都设置,iPhone 会根据你设置的属性自动推算其他属性值 ,而非直接采用默认值。
如果你把initial-scale=1 ,那么 width 和 height在竖屏时自动为320*356 (不是320*480 因为地址栏等都占据空间 ),横屏时自动为 480*208。
类似地 ,如果你仅仅设置了 width ,就会自动推算出initial-scale 以及height。
例如你设置了 width=320 ,竖屏时 initial-scale 就是 1 ,横屏时则变成 1.5 了。
[css] px em rem的更多相关文章
- css大小单位px em rem的转换和详解
css大小单位px em rem的转换和详解 PX特点1. IE无法调整那些使用px作为单位的字体大小:2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位:3. Firefox能 ...
- css中px,em,rem,rpx的区别
今天看到一个面试题为 px,em的区别,为了更好地让读者区分css的长度单位,我总结下css中常用的长度单位: px,em,rem,rpx 像素px是我们在定义CSS中经常用到的尺寸大小单位,而em在 ...
- px,em,rem的区别
PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firefox能够调整px和em,rem,但是96%以上 ...
- px em rem 区别
PX:PX实际上就是像素,用PX设置字体大小时,比较稳定和精确.但是这种方法存在一个问题,当用户在浏览器中浏览我们制作的Web页面时,如果改变了浏览器的缩放,这时会使用我们的Web页面布局被打破.这样 ...
- px,em,rem字体单位
1.px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的.(引自CSS2.0手册) 2.em是相对长度单位.相对于当前对象内文本的字体尺寸,em存在值继承问题. 浏览器的默认字 ...
- 彻底弄懂px em rem
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的 ...
- px em rem区别
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的 ...
- css里px em rem特点(转)
1.px特点: 1.IE无法调整px作为单位的字体大小: 2.Firefox能够调整px.em和rem. px是像素,是相对长度单位,是相对于显示器屏幕分辨率而言的. 2.em特点: 1.em的值并不 ...
- css单位px,em,rem区别
在css中单位长度用的最多的是px.em.rem,这三个的区别是: px是固定的像素,一旦设置了就无法因为适应页面大小而改变. em和rem相对于px更具有灵活性,他们是相对长度单位,意思是长度不是定 ...
随机推荐
- 使用C#写windows服务
首先,创建一个windows服务项目
- 实现gabor filter的滤波
实现gabor filter的滤波 图像纹理对于航空遥感图片.织物图案.复杂自然风景和动植物都适合.这里我采用遥感图片.织物图案和钢铁表面来做,并和canny图片进行一定的对比. ...
- MBB类似jquery.bxslider插件轮播效果
首先,如图一:当打开页面是,产品出现了淡入淡出切换轮播状态,当鼠标点击左边的小图时,就会切换出相对应的大图,当鼠标移开的时候,这个轮播就会停止自动轮播,只有人工手动才能进行切换:是一个不错的体验! 如 ...
- A fatal error has been detected by the Java Runtime Environment(jdk 1.6的一个BUG)
几天做项目,生成一堆注解的实体,当实体数超过86个时,jvm报错: # # A fatal error has been detected by the Java Runtime Environmen ...
- java面试中的智力题
智力题,每个正式的笔试.面试都会出,而且在面大企业的时候必然会问到,笔者曾在很多面试中,都被问到过,不过答得都不是很好,因为时间很短,加上我们有时候过于紧张,所以做出这类问题,还是有一定的难度,从这篇 ...
- reactjs入门到实战(五)---- props详解
1>>>基础的props使用 不可修改父属性 getDefaultProps 对于外界/父组件的属性值,无法直接修改,它是只读的. <script type= ...
- Bootstrap——基本模板
<!DOCTYPE html><html lang="zh-cn"> <head> <meta charset="utf ...
- mysql DATE_ADD DATE_SUB
一.DATE_ADD() 函数向日期添加指定的时间间隔. DATE_ADD(date,INTERVAL expr type)date 参数是合法的日期表达式.expr 参数是您希望添加的时间间隔. t ...
- SqlSever基础 detalength函数 字节的个数
镇场诗:---大梦谁觉,水月中建博客.百千磨难,才知世事无常.---今持佛语,技术无量愿学.愿尽所学,铸一良心博客.------------------------------------------ ...
- 【Unity3D游戏开发】Application.systemLanguage无法区分简体中文和繁体中文 (二六)
游戏发布,语言本地化需要繁体中文和简体中文 iOS8版本之前没问题,iOS9上无法正常识别这两种语言 原因是在iOS9上,Unity通过Application.systemLanguage返回的简体中 ...