移动端常见布局：

　　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. 对layoutInflater的理解

    参考该博客:http://www.cnblogs.com/top5/archive/2012/05/04/2482328.html LayoutInflater是一个抽象类,通过调用其实例方法infl ...

  2. JSON学习笔记-1

    1.什么是JSON? JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式.它基于 ECMAScript (欧洲计算机协会制定的js规范)的一 ...

  3. Mongodb的入门（1）window安装mongodb

    mongodb: Mongodb,分布式文档存储数据库,由C++语言编写,旨在为WEB应用提供可扩展的高性能数据存储解决方案.MongoDB是一个高性能,开源,无模式的文档型数据库,是当前NoSql数 ...

  4. git bash 出现vim弹框的时候怎么退出

    如果是输出状态,首先按Esc键退出输入状态,然后按Shift+“;”,再输入q!或wq!(不保存改动,wq!是保存文件的写入修改)退出. so easy!!

  5. zabbix系列之二——安装

    1Getting zabbix Four ways of getting: Index Option note 1 Install it from the distribution packages ...

  6. IDEA 导入javaWeb项目

    导入后的项目 1. 把项目变成web项目 配置 artifact 然后这边就自动配置成了 tomcat: 然后运行 没有毛病!!

  7. SCCM OS播发

    SCCM OS播发1.在分发点启用PXE支持2.将启动映像包分发到分发点:需要将x86和x64都分发到分发点,如果只分发x64,在客户端pxe启动时会出现 no response from wds s ...

  8. Custom Settings.in 配置信息收集

    [Settings] Priority=Default Properties=MyCustomProperty [Default] ;是否允许部署操作系统到目标计算机 OSInstall=YES ;是 ...

  9. Composer 的简介、安装及使用

    Composer的简介 简单说,Composer 就是一个安装包管理工具,服务于 PHP 生态系统.它包括了两个部分:Composer 和 Packagist. Composer Composer 是 ...

  10. 铁乐学python_Day38_多进程和multiprocess模块1

    铁乐学python_Day38_多进程和multiprocess模块1 [进程] 运行中的程序就是一个进程. 所有的进程都是通过它的父进程来创建的. 因此,运行起来的python程序也是一个进程,那么 ...