移动端常见布局：

　　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. 配置 tsconfig.json

    作用 指导编译器如何生成 JS 文件 参数 target: 编译目标平台(es3, es5, es2015) module: 组织代码方式(commonjs, AMD) sourceMap:编译文件对 ...

  2. 启用优酷html5播放器的办法

    方法就是在浏览器中设置下sessionStorage window.sessionStorage.setItem("P_l_h5", true);

  3. 使用dva脚手架（dva-cli）快速构建React项目

    安装 dva-cli 你应该会更希望关注逻辑本身,而不是手动敲入一行行代码来构建初始的项目结构,以及配置开发环境. 那么,首先需要安装的是 dva-cli .dva-cli 是 dva 的命令行工具, ...

  4. https的网站用了百度分享后网站在浏览器中不安全解决方法

    本文出至:新太潮流网络博客 一.先下载百度分享需要的所有东西 下载地址:http://pan.baidu.com/s/1boM7N8V 二.打开百度分享,获取到分享的代码 三.将下载好的百度分享需要的 ...

  5. 在 Azure 中的 Linux 虚拟机上使用 SSL 证书保护 Web 服务器

    若要保护 Web 服务器,可以使用安全套接字层 (SSL) 证书来加密 Web 流量. 这些 SSL 证书可存储在 Azure Key Vault 中,并可安全部署到 Azure 中的 Linux 虚 ...

  6. 企业级NFS网络文件共享服务_【all】

    1.1. 什么是NFS(1台机器提供服务) Network File System(网络文件系统)通过局域网让不同的主机系统之间共享文件或目录. NFS客户端可以通过挂载的方式将NFS服务器端共享的数 ...

  7. ZT 输入一个字符串，查找它的第一个数字串，并返回其个数

    /*查找字符串中的数字串问题 输入一个字符串,查找它的第一个数字串,并返回其个数 */ #include <stdio.h> char firstnum(char *input,char ...

  8. Spring 入门（概述)

    1.什么是框架 2.Spring简介 3.IOC(配置.注解) 4.Bean(配置.注解) 5.AOP(配置.注解.AspectJ.API) 资源: http://spring.io/ http:// ...

  9. java Math数学工具及Random随机函数

    Math类包含用于执行基本数学运算的方法,如绝对值.对数.平方根和三角函数.它是一个final类,其中定义的都是一些常量和静 态方法.常用方法如下:public static double sqrt( ...

  10. 【笔记】python的sqlalchemy数据库连接池原理的说明

    sqlalchemy数据库连接池的使用方式是延迟初始化,就是说一开始你调用create_engine(...)后创建的那个数据库池是空的,你后面通过session.connection()或者engi ...