rem是什么？

rem是css3中新增加的一个单位属性(font size of the root element),根据页面的根节点的字体大小进行转变的单位。root！！！！！！！！！根节点，也就是html。

例：(下面例子中的根节点是html ，它的字体大小是100px，所以根节点下面的元素所设置的rem，都是1rem=100px。)
rem的初始值是16px，也就是说在没有设置根节点的font-size的时候，1rem=16px

<html>

    <head>

        <style>

            html,body{ font-size: 100px;  }

            header{ height: 1rem;width: 1rem;  }

        </style>

    </head>

    <body></body>

    <header></header>

</html>

em是什么

em也是一个相对单位，em单位是根据父元素的字体大小来进行转变的单位。

  1. em的值并不是固定的；

  2. em会继承父级元素的字体大小。

父节点
例：

<header style="font-size:100px;">//父元素的字体大小是100px

    <div style="height:1em;width:1em;"></div>//所以子元素的em是1em=100px；

</header>

移动端页面开发技巧：

先调查用户的使用情况，总结出大部分用户使用的都是什么设备。
比如：我现在的用户大多使用的是三种手机，我们先将每种手机的分辨率都从网上找出来。

将他们都罗列出来，然后去写媒体查询（因为不同手机分辨率不同，所以用像素的话，会出现显示的相同，举个栗子~ 比如说小朋友吃饭，食堂给小朋友的标配是一个馒头，可是有的小朋友饭量大，有的饭量小，所以会出现不够吃或者吃不了造成浪费。怎么避免这种情况呢，所以食堂大妈想了一个主意体重在50斤~60斤的小盆友可以领取到一个馒头，低于50斤的半个馒头，体重大于60斤的，两个馒头，这三种分配方式。）

我的用户群体大概是这三种设备
设备名称 分辨率 估算字体大小 rem与px转换
iphone5 320568 font-size：12px； 1rem=12px
iphone6 375667 font-size：14px； 1rem=14px
iphone6 Plus 414*736 font-size：16px； 1rem=16px

先取出一个中间的设备来做基本样式的书写
最开始的书写可以根据设计图纸来进行px的书写（也就是先选择好馒头的大小）
优先写出一套模版，然后基于这套模版去写别的设备的媒体查询

在页面中优先写出媒体查询的标签

    <meta name="viewport" content="width=device-width,      initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,    user-scalable=no">
width - viewport设备的宽度

height - viewport设备的高度

initial-scale - 初始的缩放比例

minimum-scale - 允许用户缩放到的最小比例

maximum-scale - 允许用户缩放到的最大比例

user-scalable - 用户是否可以手动缩放

上面分配好了，按照这种方式写媒体查询

html,body{ height: 100%; margin: 0; padding: 0; font-size: 14px;}//注意初始样式必须写在最顶部！！！！如果写在媒体查询底部的话就会覆盖上方的媒体查询（因为是层叠样式表嘛~）

@media screen and (max-width:320px ) {

    html{font-size: 12px;}

}

@media screen and (min-width:321px) and (max-width:750px ) {

    html{font-size: 14px;}

}

@media screen and (min-width:751px ) {

    html{font-size: 16px;}

}

因为上面写好了一套初始模版，因为初始模版都是px的，在文章的开端我们就强调了为什么不能用px了，所以我们要将页面中的px转换成相应的rem值

例：

header{

    width:140px;//转化为10rem，因为我们是基于最中间的设备做的，中间设备的font-size：14px，所以140px=10rem。

}

所有用px的高宽全部改成rem这样就完成了，对三种设备的适配

浅谈css3长度单位rem，以及移动端布局技巧的更多相关文章

  1. 浅谈CSS3中display属性的Flex布局

    浅谈CSS3中display属性的Flex布局   最近在学习微信小程序,在设计首页布局的时候,新认识了一种布局方式display:flex 1 .container { 2 display: fle ...

  2. 【分享】谈CSS3中display属性的flex布局

    最近在学习微信小程序(重新学习微信小程序),在设计首页布局的时候,新认识了一种布局方式display:flex .guide-top{ height: 36%; display: flex; /*fl ...

  3. 浅谈 css3 box盒子模型以及box-flex的使用

    display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分.   一.使 ...

  4. 浅谈CSS3 box-reflect 属性

    今天说一下 CSS3的box-reflect属性,也就是倒影特效. 语法: box-reflect:包括3个值. 1. direction 定义方向,取值包括 above . below . left ...

  5. 浅谈CSS3动画的凌波微步--steps()

    背景 一日敲代码的我,得到一个需求:写一个10秒的倒计时. 用JavaScript定时器麻溜写完之后,恰好同事勇司机接完水.瞟了一眼,然后凑过来说,这个用CSS3也可以写,而且一行JavaScript ...

  6. 浅谈CSS3 box-sizing 属性 有趣的盒模型

    盒模型的组成大家肯定都懂,由里向外content,padding,border,margin. 盒模型是有两种标准的,一个是标准模型,一个是IE模型. 从上面两图不难看出在标准模型中,盒模型的宽高只是 ...

  7. 浅谈css3有意思的属性pointer-events: none；

    pointer-events: none: 可以让某个元素实现类似于海市蜃楼的效果,具体理解为,你可以看的到某个元素,但是你无法摸的着.   而display:none; 是你摸不着,但是你也看不见. ...

  8. 浅谈APP流式分页服务端设计（转）

    http://www.jianshu.com/p/13941129c826 a.cursor游标式分页 select * from table where id >cursor limit pa ...

  9. VW结合rem进行移动端布局

    ---恢复内容开始--- html { font-size:10vw: } div { width: 1rem; height: 1rem; } VW这个单位适合用来适应不同设备的 一个设备的宽度就为 ...

随机推荐

  1. 数据库设计，表与表的关系，一对多。One-To-Many（2）

    一对多:主键数据表中只能包含一个记录,而在其关系记录表中这条记录可以与一个或多个记录相关,也可以没有记录与之相关. 关联映射:一对多/多对一存在最普遍的映射关系,简单来讲就如球员与球队的关系:一对多: ...

  2. 人工智能为什么选择Python语言？

    作为新手,在面对广泛应用于企业级应用开发的 Java.游戏客户端开发的 C++.嵌入式开发的 C.人工智能领域的 Python 等数百种编程语言时,你会如何选择自己的第一门编程语言? 作者 | JAC ...

  3. 用命令生成Webservice 对应的代理类

    wsdl /language:C# /namespace:Camstar.WebPortal.WebPortlets.Shopfloor.SAP.GreatWall /out:gwSAPService ...

  4. web项目局部打印

    window.print()方法是打印整个body,若想打印局部区域,网上出现了各种解决办法,我觉得都挺好的.我最推荐jquery.PrintArea.js插件形式 点击上述链接首先下载下来,我的是版 ...

  5. 24. Swap Nodes in Pairs 链表每2个点翻转一次

    ［抄题］: Given a linked list, swap every two adjacent nodes and return its head. Example: Given 1->2 ...

  6. ios tableView的header高度不对

    tableView的header高度不对,一般都是header是从xib加载出来的 第一步: 新建xib的时候选择的是View,当选择 Size 为 Freeform 时,view的约束就变成这样了, ...

  7. Swift 从OC入门

    前言:断断续续学了蛮多天的Swift,感触还是蛮多的~~ 1.OC是以C语言为基础的语言,学习之前有C语言的基础,所以对于 `*` 这些指针还是比较容易理解的.问过其他程序员,对OC里面的 `*` 指 ...

  8. mybatis的Sql语句打印

    我们在使用mybatis的时候,有时候,希望可以在eclipse的控制台下打印出来sql语句,但是有时候却不希望相关的语句打印.这个时候,需要我们进行一些配置.  在mybatis中,他通过调用一些接 ...

  9. hugepage优势

    hugepage的优势与使用 +2投票   优势 通过使用hugepage分配可以提高性能,因为需要更少的页,因此需要更少Translation Lookaside Buffers (TLB,高速传送 ...

  10. SQL SERVER中LIKE在Char和nChar输出结果不一致解惑

    一同事在写脚本时,遇到一个关于LIKE里面使用不同的变量类型导致查询结果不一致的问题,因为这个问题被不同的人问过好几次,索性总结一下,免得每次都要解释一遍,直接丢一篇博客岂不是更方便!其实看似有点让人 ...