移动端常见布局：

　　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. 网络基础 Windows telnet使用简介及相关问题解决方案

    Windows telnet使用简介及相关问题解决方案 by:授客 QQ:1033553122 更改telnet的默认端口(23)(仅适用XP) 步骤: 进入cmd控制窗口 tlntadmn conf ...

  2. 使用 Azure CLI 管理 Azure 虚拟网络和 Linux 虚拟机

    Azure 虚拟机使用 Azure 网络进行内部和外部网络通信. 本教程将指导读者部署两个虚拟机,并为这些 VM 配置 Azure 网络. 本教程中的示例假设 VM 将要托管包含数据库后端的 Web ...

  3. Vue2学习笔记:v-on

    Vue的事件: v-on: click/mouseover/mouseover/mousedown/dbclick/... 下面是点击事件介绍: 1.点击事件 <!DOCTYPE html> ...

  4. 【Redis】命令学习笔记——键(key)（20个超全字典版）

    安装完redis和redis-desktop-manager后,开始学习命令啦!本篇基于redis 4.0.11版本,从对键(key)开始挖坑! 准备工作,使用db1(默认db0,由于之前练习用db0 ...

  5. Falsk的模板分配和蓝图、定制错误信息、 和补充

    Flask的模板渲染: Flask的模板在进行渲染的时候是默认选则templates下的html文件 我们可以在实例化app的时候,指定文件来进行选择: 模板渲染更改文件夹:template_fold ...

  6. iOS中block类型大全

    iOS中block类型大全 typedef的block 作为属性的block 作为变量的block 作为方法变量入参的block 作为方法参数的block 无名block 内联函数的block 递归调 ...

  7. [翻译] PTEHorizontalTableView

    PTEHorizontalTableView Horizontal UITableView inspired by EasyTableView. 水平滚动的UITableView,灵感来自于EasyT ...

  8. java开发初识

    jdk目录相关介绍: bin:存放的是java的相关开发工具 db:顾名思义jre附带的轻量级数据库 include:存放的是调用系统资源的接口文件 jre:java的运行环境 lib:核心的类库 s ...

  9. Take my breath away

    Take my breath away 编辑 目录 1简介 2翻唱简介 3歌词 ▪ 英文歌词 ▪ 中英文歌词 1简介编辑 <Take My Breath Away>(中文译为<带走我 ...

  10. [微信小程序直播平台开发]___（二）Nginx+rtmp在Windows中的搭建

    1.一个可以忽略的前言 Nginx (engine x) 是一个高性能的HTTP和反向代理服务,也是一个IMAP/POP3/SMTP服务.Nginx是由伊戈尔·赛索耶夫为俄罗斯访问量第二的Ramble ...