H5移动端适配方案-rem
为什么移动端要适配: 由于移动设备的尺寸不一,所以移动端的页面要能够适应不同尺寸的设备,即页面的自适应,让页面在视觉上保持一致。
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的更多相关文章
- 手淘H5移动端适配方案flexible源码分析
移动端适配一直是一个值得探讨的问题,在业余时间我找了一些页面,查看了一些厂商对于移动端H5页面的适配方案,看到了几个典型的例子,今天就来记录一下我看到的第一个典型的例子,也是我们公司目前普通H5项目正 ...
- 移动端适配方案-rem(基础篇)
常见移动web适配方案一般有3种方法,如下图: ①:定高,宽度百分比(一般用来做一些适配性不高的页面,比如主要以一些文字和图片为主的网页或移动端的头部和底部) ②:flex (更多的用于复杂页面的布局 ...
- h5 移动端适配方案思考
基础概念 CSS像素(CSS pixels) 这个是浏览器使用的抽象单位,用来精确度量网页上的内容.平时经常写的width:100px;height:100px;都是与设备无关的. 设备独立像素(de ...
- 整理h5移动端适配方案
<使用Flexible实现手淘H5页面的终端适配>:https://github.com/amfe/article/issues/17 <再聊移动端页面的适配>:https:/ ...
- rem移动端适配方案
一. rem vs em 单位 定义 特点 rem font size of the root element 以根元素字体大小为基准 em font size of the element 以父元素 ...
- H5 APP 页面移动端适配方案
H5 APP 页面移动端适配方案 https://segmentfault.com/a/1190000011586301 https://juejin.im/post/5cbdee71f265da03 ...
- 基于Vue/React项目的移动端适配方案
本文的目标是通过下文介绍的适配方案,使用vue或react开发移动端及H5的时候,不需要再关心移动设备的大小,只需要按照固定设计稿的px值布局,提升开发效率. 下文给出了本人分别使用create-re ...
- 超详细讲解H5移动端适配
前言 移动互联网发展至今,各种移动设备应运而生,但它们的物理分辨率可以说是五花八门,一般情况UI会为我们提供375尺寸的设计稿,所以为了让H5页面能够在这些不同的设备上尽量表现的一致,前端工程师就不得 ...
- 移动端适配单位rem
0 写在前面 本周惊喜地发现,其他各个老师的软工班(罗杰老师班和欧阳老师班)的软工项目的alpha版本都已经发布了!(然而我们软工项目还没开始写代码…逃…) 十分好奇的我第一时间下载了一些他们的产品进 ...
随机推荐
- kettle 乱码问题处理方案
一.同下图加上 "-Dfile.encoding=UTF-8" ,两都都加没有试过,可先加一处,如果没有处理到问题,再加另外一处
- redis《三》连接池配置参数
参数 值 setTestWhileIdle() 在空闲时检查有效性 true setMinEvictableIdleTimeMillis() 连接最小空闲时间 1800000L setTimeBetw ...
- 【曹工杂谈】Maven和Tomcat能有啥联系呢,都穿打补丁的衣服吗
Maven和Tomcat能有啥联系呢,都穿打补丁的衣服吗 前奏 我们上篇文章,跟大家说了下,怎么调试maven插件的代码,注意,是插件的代码.插件,是要让主框架来执行的,主框架是谁呢,就是maven ...
- Pytest 系列(24)- allure 环境准备
如果你还想从头学起Pytest,可以看看这个系列的文章哦! https://www.cnblogs.com/poloyy/category/1690628.html allure 和 pytest 相 ...
- Appium自动化(11) - 详解 Applications 类里的方法和源码解析
如果你还想从头学起Appium,可以看看这个系列的文章哦! https://www.cnblogs.com/poloyy/category/1693896.html 前言 Applications 类 ...
- 第07课:GDB 常用命令详解(下)
本课的核心内容: disassemble 命令 set args 和 show args 命令 tbreak 命令 watch 命令 display 命令 disassemble 命令 当进行一些高级 ...
- Asp.net MVC Vue Axios无刷新请求数据和响应数据
Model层Region.cs using System; using System.Collections.Generic; using System.Linq; using System.Web; ...
- JS011. 身份证号码校验(仅34行)
身份证格式 六位数字地址码 + 八位数字出生日期码 + 三位数字顺序码 + 一位数字校验码 checkIdCard.js checkIdCard: function (idCard){ //15位和1 ...
- windows操作系统和java常识
一.java5和java8版本更新很大,现在都是java8; 二.数据存储最小单位Byte字节八个比特位: 三.没有图形操作界面的windows系统: 四.java语言跨平台性:JVM充当不同操作系统 ...
- vue+element+echarts饼状图+可折叠列表
html: <div id="echartsDiv" style="width: 48%; height: 430px; float: left;"> ...