1.rem和em、px

首先来说说em和px的关系 em是指字体高度 浏览器默认1em=16px,所以0.75em=12px;我们经常会在页面上看到根元素写的font-size:65%; 这样em就成了16px*62.5=10em;这是显示在页面的字体大小是10px;

这样12px=1.2em,10px=1em,也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了,

em的特点

em是个相对值 他会根据父级元素的大小而变化

但是如果嵌套了多个元素 要计算它的大小,是件很头疼的事情

这样的情况下,就出现了rem

rem的区别在于它是相对于根基元素的,因此不会被它的父类影响到

结论：之所以前端行业做移动端会普遍默认用rem或em,是因为可以通过js控制根元素(或者用@media)来达到适配各种分辨率的字体大小的效果

1.vh、vw和%

vh vw全称为Viewport Height和Viewport Width 意思就是视窗

很多情况下它们都是重叠的 各有优缺点 概括一下 就是

当处理宽度的时候，%单位更合适。处理高度的时候，vh单位更好。

(ps:比如你需要定位一屏内的一段文字,如果你用% 它计算的是你整个dom的高度,而vh计算的当前一屏的高度)

rem和em和px vh vw和% 移动端长度单位的更多相关文章

  1. 网站响应式布局/网站自适应问题+rem、em、px、pt及网站字体大小设配

    Bootstrap 网格系统: Bootstrap CSS: Bootstrap 组件及插件: 一.什么是响应式布局?       响应式布局是Ethan Marcotte在2010年5月份提出的一个 ...

  2. rem、em、px的区别

    px 像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的. 特点: 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或re ...

  3. 浅谈rem、em、px

    1.px:像素(Pixel) px是相对长度单位,他是相对于显示器屏幕分辨率而言的 优点:比较稳定.精确 缺点:在浏览器 中放大或者缩小浏览页面,会出现页面混乱的情况. 如下例子: .buttonPX ...

  4. rem，em，px

    http://pxtoem.com/  px,em,rem单位转换工具 px(Pixel)根据显示屏分辨率,固定大小 em,根据父元素大小进行改变 rem,根据html进行相对改变 em 1. bod ...

  5. rem、em、px之间的转换

    rem是相对于根元素<html>,这样就意味着,我们只需要在根元素确定一个参考值,这个参考值设置为多少,完全可以根据您自己的需求来定. 我们知道,浏览器默认的字号16px,来看一些px单位 ...

  6. rem和em，px的使用

    rem是CSS3中新增加的一个单位值,他和em单位一样,都是一个相对单位.不同的是em是相对于元素的父元素的font-size进行计算:rem是相对于根元素html的font-size进行计算.这样一 ...

  7. rem、em、px、pt及网站字体大小设配

    rem:相对的只是HTML根元素字体尺寸; em:相对于当前对象内文本的字体尺寸(值不是固定且继承父级元素的字体大小); px像素(Pixel):对于显示器屏幕分辨率而言的; pt:point,是印刷 ...

  8. Css单位px，rem，em，vw，vh的区别

    px px就是pixel像素的缩写,相对长度单位,网页设计常用的基本单位.像素px是相对于显示器屏幕分辨率而言的 em em是相对长度单位.相对于当前对象内文本的字体尺寸(参考物是父元素的font-s ...

  9. CSS各种度量单位----px、em、%、rem、vh/vw、vmin/vmax

    本文主要讲下CSS中各类度量单位的意思和区别. 开发中最常用到的css单位是px.em.%.随着css3的出现,带来了更多的度量单位,这些单位为响应式开发,带来很大的好处.各种单位的浏览器兼容性可以去 ...

随机推荐

  1. Ruby中，&:（ampersand colon）的用法

    前几日看Ruby代码,发现一个奇怪的用法,如下: a=['a', 'b', 'c'].map! &:upcase p a #["A", "B", &qu ...

  2. Spring 入门 Ioc-Xml

    通过一个小例子演视怎么通过 Spring 往程序中注入对象,而非手动 new 对象. 一.导入 Spring 所需要的包 spring-framework-2.5.6 版需要导入以下包: 1.---- ...

  3. hadoop高可用集群搭建小结

    hadoop高可用集群搭建小结1.Zookeeper集群搭建2.格式化Zookeeper集群 (注:在Zookeeper集群建立hadoop-ha,amenode的元数据)3.开启Journalmno ...

  4. CDZSC_2015寒假新人（1）——基础 c

    Description FatMouse prepared M pounds of cat food, ready to trade with the cats guarding the wareho ...

  5. Go语言中怎样判断数据类型_不懂的木匠_新浪博客

    要判断数据类型,可以用Go的空接口: 建一个函数t 设置参数i 的类型为空接口,空接口可以接受任何数据类型 func t(i interface{}) {  //函数t有一个参数i  switch i ...

  6. Python 在Windows下安装matplotlib

    windows下安装很麻烦,使用easy_install 安装报错  提示缺少freetype 和png 后经多方查询,最终安装成功 以下是安装过程 前提你的Python环境已经搭建好了 1.前提需要 ...

  7. Android Studio 如何导入第三方jar 包

    第一步: 将第三方jar包加入到libs文件夹中 第二步: 分为两种情况 第一种是打开工程所在Project Structure,然后选择Dependencies,点击那个加号选择File Depen ...

  8. （转载）Eclipse基金会涉足物联网，M2M标准是否已获东风？

    摘要:相信大部分的开发者都使用过Eclipse IDE,然而Eclipse基金会有的不只是集成开发环境,其托管的开源项目已达250余个.近日该基金会宣布启动物联网项目,旨在推动M2M标准的前行! Ec ...

  9. 从setTimeout到浏览器线程机制

    看高性能javascipt 这本书时,看到这么一句话: Putting scripts at the top of the page in this way typically leads to a ...

  10. 一步一步学python(四) - 字典

    1.字典的使用 创建字典:phonebook = {'Alice': '1234' , 'Beth':'9120'} 2.dict函数 >>>items = [('name','Gu ...