为什么移动端要适配: 由于移动设备的尺寸不一,所以移动端的页面要能够适应不同尺寸的设备,即页面的自适应,让页面在视觉上保持一致。

rem:rem 是css3的一种相对单位,参考是根元素HMTL的font-size的值,即html的font-size:10px;那么 1rem = 10px;

先看下面的rem书写示例

<!DOCTYPE html>
<html lang="en" style='font-size: 10px;'>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box {
width: 10rem;
height: 10rem;
background: red;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>

元素box的大小是多少px呢?根据公式算,1rem = html 的 font-size 的值,那么 10rem = 10 * (html font-size的值) = 10 * 10 = 100px;所以box大小是100px * 100px;

知道了rem 怎么用了,那到底移动端是怎么适配的呢?我们知道用了rem作为单位,元素的大小就会根据根元素font-size的值进行计算,如果我们监听窗口的大小去动态的设置根元素的font-size,不就能适应不同尺寸的设备了嘛,来看看下面的一段js
  (function (doc, win, undefined) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in win ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (clientWidth === undefined) return;
docEl.style.fontSize = 10 * (clientWidth / 750) + 'px'; // 设置 根元素html的font-size
};
if (doc.addEventListener === undefined) return;
win.addEventListener(resizeEvt, recalc, false);// 监听窗口改变
doc.addEventListener('DOMContentLoaded', recalc, false) // 初始HTML加载和解析完成时
})(document, window);

这段代码什么意思呢?就是页面初始化的时候和窗口改变的时候,根据当时窗口的大小动态设置根元素html的font-size值,再配合使用相对单位rem,来达到自适应的效果。

最为核心的是这句代码
 docEl.style.fontSize = 10 * (clientWidth / 750) + 'px'; // 设置 根元素html的font-size
// docEl => 是 元素html
// clientWidth => 是当前窗口的宽度
// 750 => 是 设计稿的宽度

假如我们的开发环境的窗口和设计稿一样也是750,那个当前根元素的font-size值就是10px;此时,我们量得一个元素的宽设计稿是750px,那么我们就要写成 75rem;这样通过换算 (75rem * 10px) 就会得到正确的 750px;简单点就是 我们量的设计稿元素的宽 除以 根元素的font-size值,就是我们要写成的rem的值,仔细想想是不是这样的

基于我们上面的假设,如果此时窗口变成了375px,根元素font-size 就变成了 5px,我们响应设置的 75rem 实际上会渲染成 75rem* 5px = 375px;页面也会保持同时缩放,印证了我们动态设置的没有问题,保证了页面的一致性

H5移动端适配方案-rem的更多相关文章

  1. 手淘H5移动端适配方案flexible源码分析

    移动端适配一直是一个值得探讨的问题,在业余时间我找了一些页面,查看了一些厂商对于移动端H5页面的适配方案,看到了几个典型的例子,今天就来记录一下我看到的第一个典型的例子,也是我们公司目前普通H5项目正 ...

  2. 移动端适配方案-rem(基础篇)

    常见移动web适配方案一般有3种方法,如下图: ①:定高,宽度百分比(一般用来做一些适配性不高的页面,比如主要以一些文字和图片为主的网页或移动端的头部和底部) ②:flex (更多的用于复杂页面的布局 ...

  3. h5 移动端适配方案思考

    基础概念 CSS像素(CSS pixels) 这个是浏览器使用的抽象单位,用来精确度量网页上的内容.平时经常写的width:100px;height:100px;都是与设备无关的. 设备独立像素(de ...

  4. 整理h5移动端适配方案

    <使用Flexible实现手淘H5页面的终端适配>:https://github.com/amfe/article/issues/17 <再聊移动端页面的适配>:https:/ ...

  5. rem移动端适配方案

    一. rem vs em 单位 定义 特点 rem font size of the root element 以根元素字体大小为基准 em font size of the element 以父元素 ...

  6. H5 APP 页面移动端适配方案

    H5 APP 页面移动端适配方案 https://segmentfault.com/a/1190000011586301 https://juejin.im/post/5cbdee71f265da03 ...

  7. 基于Vue/React项目的移动端适配方案

    本文的目标是通过下文介绍的适配方案,使用vue或react开发移动端及H5的时候,不需要再关心移动设备的大小,只需要按照固定设计稿的px值布局,提升开发效率. 下文给出了本人分别使用create-re ...

  8. 超详细讲解H5移动端适配

    前言 移动互联网发展至今,各种移动设备应运而生,但它们的物理分辨率可以说是五花八门,一般情况UI会为我们提供375尺寸的设计稿,所以为了让H5页面能够在这些不同的设备上尽量表现的一致,前端工程师就不得 ...

  9. 移动端适配单位rem

    0 写在前面 本周惊喜地发现,其他各个老师的软工班(罗杰老师班和欧阳老师班)的软工项目的alpha版本都已经发布了!(然而我们软工项目还没开始写代码…逃…) 十分好奇的我第一时间下载了一些他们的产品进 ...

随机推荐

  1. kettle 乱码问题处理方案

    一.同下图加上 "-Dfile.encoding=UTF-8" ,两都都加没有试过,可先加一处,如果没有处理到问题,再加另外一处

  2. redis《三》连接池配置参数

    参数 值 setTestWhileIdle() 在空闲时检查有效性 true setMinEvictableIdleTimeMillis() 连接最小空闲时间 1800000L setTimeBetw ...

  3. 【曹工杂谈】Maven和Tomcat能有啥联系呢,都穿打补丁的衣服吗

    Maven和Tomcat能有啥联系呢,都穿打补丁的衣服吗 前奏 我们上篇文章,跟大家说了下,怎么调试maven插件的代码,注意,是插件的代码.插件,是要让主框架来执行的,主框架是谁呢,就是maven ...

  4. Pytest 系列(24)- allure 环境准备

    如果你还想从头学起Pytest,可以看看这个系列的文章哦! https://www.cnblogs.com/poloyy/category/1690628.html allure 和 pytest 相 ...

  5. Appium自动化(11) - 详解 Applications 类里的方法和源码解析

    如果你还想从头学起Appium,可以看看这个系列的文章哦! https://www.cnblogs.com/poloyy/category/1693896.html 前言 Applications 类 ...

  6. 第07课:GDB 常用命令详解(下)

    本课的核心内容: disassemble 命令 set args 和 show args 命令 tbreak 命令 watch 命令 display 命令 disassemble 命令 当进行一些高级 ...

  7. Asp.net MVC Vue Axios无刷新请求数据和响应数据

    Model层Region.cs using System; using System.Collections.Generic; using System.Linq; using System.Web; ...

  8. JS011. 身份证号码校验(仅34行)

    身份证格式 六位数字地址码 + 八位数字出生日期码 + 三位数字顺序码 + 一位数字校验码 checkIdCard.js checkIdCard: function (idCard){ //15位和1 ...

  9. windows操作系统和java常识

    一.java5和java8版本更新很大,现在都是java8; 二.数据存储最小单位Byte字节八个比特位: 三.没有图形操作界面的windows系统: 四.java语言跨平台性:JVM充当不同操作系统 ...

  10. vue+element+echarts饼状图+可折叠列表

    html: <div id="echartsDiv" style="width: 48%; height: 430px; float: left;"> ...