移动端常见布局：

　　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. Visualizing MNIST with t-SNE, MDS, Sammon’s Mapping and Nearest neighbor graph

    MNIST 可视化 Visualizing MNIST: An Exploration of Dimensionality Reduction At some fundamental level, n ...

  2. B2B 电商业务之 Quote

    商品在网店页面上一般会向买家显示价格.对于B2B, 同一商品对不同的买家可能会展示不同的价格.即使如此,买家仍然可以和卖家再协商价格,最终以不同于网店中显示的价格成交.这个协商价格过程就叫Quote, ...

  3. viedo formats vs file formats

    web的视频世界,有两个概念非常容易搞混淆,即:视频文件的格式,比如.mp4,.flv,.ogv等等,以及视频本身的格式,就是指的codec算法名称,比如h.264,mpeg-4等. http://w ...

  4. Azure 和 Linux

    Azure 正在不断集结各种集成的公有云服务,包括分析.虚拟机.数据库.移动.网络.存储和 Web,因此很适合用于托管解决方案. Azure 提供可缩放的计算平台,允许即用即付,而无需投资购买本地硬件 ...

  5. springboot 针对jackson是自动化配置

    spring.jackson.date-format指定日期格式,比如yyyy-MM-dd HH:mm:ss,或者具体的格式化类的全限定名 spring.jackson.deserialization ...

  6. Oracle案例12——NBU Oracle恢复

    最近在做NBU ORACLE备份的恢复测试,执行恢复时报错ORA-27211: Failed to load Media Management Library,具体处理过程如下:一.错误信息 执行命令 ...

  7. 如何获取UITableView中cell的frame值

    如何获取UITableView中cell的frame值 这个可以用来处理UITableView弹出键盘的问题 本人视频教程系类   iOS中CALayer的使用 效果: 源码: // // ViewC ...

  8. [翻译] AFSoundManager

    AFSoundManager iOS audio playing (both local and streaming) and recording made easy through a comple ...

  9. Linux 文件的详解[分类/扩展名/inode/block]

    关于Linux文件的介绍 Linux里文件扩展名和文件类型没有关系,Linux系统中一切皆文件 关于Linux文件分类 纯文本文件(可以cat的)     二进制文件(Linux的可执行文件等,如/b ...

  10. wordpress利用rsync同步备份

    我搭建的wordpress服务器现在使用的系统是opensuse, 服务器上面已做脚本和计划任务将wordpress使用的数据库与web目录每天压缩备份放到 /data/backup目录下 opera ...