移动端常见布局：

　　1.流式布局

　　高度固定，宽度自适应

　　2.响应式布局

　　能够用一套代码适应不同尺寸屏幕

　　3.rem布局

　　宽高自适应，能实现整个页面像一张图片一样缩放且不失真的效果。

rem布局：

  • em：是一个相对单位，计算方法为用元素的带px属性值除以自身字体大小，用的很少。
  • rem:是一个相对单位，计算方法为一个html文件中任意元素的带px属性值除以根元素html的字体大小，从而实现宽高自适应。

简单实例:

　　1.em布局

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <style>

    div {

      font-size: 100px;

      width: 4em; /* 400px */

      height: 4em; /* 400px */

      background-color: pink;

    }

  </style>

</head>

<body>

  <div>我是400*400的盒子</div>

</body>

</html>

　　效果如图：div内字体大小为100px

　　2.rem布局

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <style>

    html {

      font-size: 100px;

    }

    div {

      font-size: 16px;

      width: 4rem; /* 400px */

      height: 4rem; /* 400px */

      background-color: pink;

    }

  </style>

</head>

<body>

  <div>我是400*400的盒子</div>

</body>

</html>

　　效果如图：div内字体大小为16px

rem布局实现自适应:

　　1.配合媒体查询

<!DOCTYPE html>

<html lang="zh-CN">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

  <meta name="viewport"

        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

  <style>

    /* 一个盒子, 在 750 屏幕上显示 200*200,   在375屏幕上显示 100*100 */

    /* 375px屏幕中, font-size: 50px */

    @media screen and (width: 375px){

      html {

        font-size: 50px;

      }

    }

    /* 750px屏幕中, font-size: 100px */

    @media screen and (width: 750px){

      html {

        font-size: 100px;

      }

    }

    div {

      width: 2rem;

      height: 2rem;

      background-color: pink;

    }

  </style>

</head>

<body>

  <div></div>

</body>

</html>

　　2.通过javascript实现

<!DOCTYPE html>

<html lang="zh-CN">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

  <style>

    body {

      font-size: 16px;

    }

    /* 设计图尺寸 640px  基准值 100px */

    div {

      width: 2rem;

      height: 2rem;

      font-size: .3rem;

      background-color: pink;

    }

  </style>

</head>

<body>

  <div>我是自适应的文字</div>

  <script>

    var design = 640;

    var base = 100;

    function responsive() {

      var width = window.innerWidth;

      // 所求font-size = 当前屏幕宽度 / 设计图 * 基准值

      var size = width / design * base;

      document.documentElement.style.fontSize = size + "px";

    }

    responsive();

    window.addEventListener("resize", responsive);

  </script>

</body>

</html>

　　3.使用flexible.js

　　flexible.js是淘宝移动适配方案，基本原理与上面的通过javascript实现自适应相同，但是做了很多兼容性处理，其中定义：基准值(即html根元素字体大小) = 设计图尺寸 / 10。使用的时候直接在文件中引入包即可。

　　下载地址：https://github.com/amfe/lib-flexible

rem布局简介的更多相关文章

  1. 在rem布局下使用背景图片以及sprite

    现在移动端页面用rem布局已经是一大流派了,成熟的框架如淘宝的flexiable.js,以及我的好友@墨尘写的更轻量级的hotcss.用rem作单位使得元素能够自适应后,还有一块需要关注的,那就是背景 ...

  2. 手机端页面自适应之rem布局

    W3C官网上是这样描述rem的--"font size of the root element" . rem布局在移动端发挥的比较好. 阿里团队高清方案: <script&g ...

  3. 手机端页面自适应解决方案-rem布局

    rem布局 布局前插入原生js即可 (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationch ...

  4. 手机端页面自适应解决方案—rem布局

    只需在页面引入这段原生js代码就可以了 (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientation ...

  5. REM 布局

    1.rem是什么? rem(font size of the root element)是指相对于根元素的字体大小的单位 2.为什么web app要使用rem? 实现强大的屏幕适配布局(淘宝,腾讯,网 ...

  6. 一看就懂得移动端rem布局、rem如何换算

    这里使用了js控制根元素的font-size大小,然后进行rem换算,在js代码后面会说明以下问题. 1.如何进行rem运算? 2.如果纯js控制根元素用rem布局会出现的小问题,如何解决? 3.如有 ...

  7. css012 css布局简介

    css012  css布局简介 一.    网页布局的类型 网页布局的类型 1.固定宽度 2.流式 3.相应式web设计 二.    如何进行css布局 1.强大的<div>标签 网页的h ...

  8. （淘宝无限适配）手机端rem布局详解（转载非原创）

    从网易与淘宝的font-size思考前端设计稿与工作流 本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习,讨论html5设计稿尺寸以及前端与设计之间协作流程的问 ...

  9. webapp，liveapp： 流式布局和rem布局

    liveapp场景应用,一般针对的是移动端,近来也是很火,颇有一些感受,拿来分享一下. 页面宽度范围: 一般移动端页面我们的像素范围是320px-640px,最大640px,最小320px,所以设计稿 ...

随机推荐

  1. 实现ListView的加载更多的效果，如何将按钮布局到始终在ListView的最后一行

    实现方式一:在代码中实现: 1,在一个布局中定义一个Button,在活动中加载Button的父布局, 例如:View bottomView = getLayoutInflater().inflate( ...

  2. HSQL结合润乾报表同步部署问题

     1 . 问题概述 中国登记结算公司为了验证报表模型和附带的样例[内建的不算],都是需要连接携带的DEMO数据源才能够运行, 应用程序[润乾报表]需要部署到UNIX服务器上, DEMO自带的HSQ ...

  3. Eclipse Ctrl + H 搜索文件不覆盖已打开文件解决办法

    1.windows------->preferences

  4. Unity Optimization UNITY优化关注列表

    这里主要罗列Unity引擎进行开发的应用或游戏,可以进行优化的各个关注点.(此文会持续更新) C# GC alloc Update LateUpdate Serialize String ToStri ...

  5. responsebody和requestbody的使用

    Controller的方法上加了一个@ResponseBody,那么他的作用是什么呢?/** * 新增或修改一条对象. */ @RequestMapping("/save_field&quo ...

  6. [SQLServer] 内存占用查看

    SELECT (physical_memory_in_use_kb/1024) AS Memory_usedby_Sqlserver_MB, (locked_page_allocations_kb/1 ...

  7. linux之安装nali本地解析IP归属

    参考博文:http://www.dwhd.org/20150802_014526.html 1.安装nali wget http://www.dwhd.org/wp-content/uploads/2 ...

  8. October 08th 2017 Week 41st Sunday

    Talent wins games, but teamwork and intelligence wins championships. 才华让你赢得比赛,团队及智慧让你赢得冠军. But the m ...

  9. 关于使用JQ scrollTop方法进行滚动定位

    没图我说个锤子,先来个自拍镇楼. 又到了每周周五总结时间.我广州刘德华又来讲故事了.这一周没啥任务,就一个任务,产品口头交代了两句,也没有psd没有设计图没有样式.自由发挥,你自己敲代码做个作品出来. ...

  10. AOP的具体实践-简化结果返回的处理

    原因: 以前学习Spring的时候着重学习过AOP概念,但是一直也没有用上,唯一碰到过的就是Spring内置的事务管理.现在碰到过一些结果后面的操作适合用到,所以这里就拿出来用一下,并且复习一下落下的 ...