em与rem之间的区别以及移动设备中的rem适配方案
em与rem之间的区别：
- 共同点：
- 它们都是像素单位
- 它们都是相对单位
- 不同点：
- em大小是基于父元素的字体大小
- rem大小是基于根元素(html)的字体的大小
实例：
<!DOCTYPE html>
<html lang="en" style="font-size: 50px">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
margin: 0;
padding: 0;
line-height: 1;
}
.container {
font-size: 25px;
}
.em {
font-size: 2em;
}
.rem {
font-size: 2rem;
}
</style>
</head>
<body>
<div class="container">
<div class="em">AAAAA</div>
<div class="rem">AAAAA</div>
</div>
</body>
</html>
rem适配方案:
- 核心原理：宽度和高度都能做到适配（等比缩放）
- 通过控制 html 元素上的字体大小去控制页面上所有以rem为单位的基准值，控制尺寸
- 核心换算公式：当前rem基准值 = 预设基准值 / 设计稿宽度 * 当前设备的宽度
- 技术：媒体查询
实例:
- 预设基准值： 100px
- 设计稿宽度：640px
- 假设的设备：640px， 414px， 320px
- 注意：由于媒体查询代码是从上往下执行的，所以代码书写顺序要从小到大(如果不的话，可以选择其他方案，例如：min-width 和 max-width 都设置)
<!DOCTYPE html>
<html lang="en"> <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, user-scalable=no">
<title>rem适配</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
/* 假设的设备 320 414 640 */
@media (min-width: 320px) {
html {
font-size: 50px;
}
}
@media (min-width: 414px) {
html {
font-size: 64.6875px; /* 100/640*414 */
}
}
@media (min-width: 640px) {
html {
font-size: 100px;
}
}
/* rem适配 */
header {
width: 100%;
height: 1rem;
line-height: 1rem;
font-size: 0.32rem;
text-align: center;
background: green;
color: #fff;
}
</style>
</head> <body>
<header>购物车</header>
</body> </html>
em与rem之间的区别以及移动设备中的rem适配方案的更多相关文章
- px em 和rem之间的区别
背景: px:像素是相对于显示器屏幕分辨率而言的相对长度单位.pc端使用px倒也无所谓,可是在移动端,因为手机分辨率种类颇多,不可能一个个去适配,这时px就显得非常无力,所以就要考虑em和rem. e ...
- px、em、pt之间的区别与互相转换
关于px.pt和em的区别,自己有时候也会纠结到底该用什么单位,今天特意查了一些文章,下面这篇虽然很久远了,但解释的比较全面,转载收藏之.点击查看原文(原网址已失效,这是其他站点) 这里引用的是Jor ...
- rem、px、em之间的区别以及网页响应式设计写法
个人收藏用,转载自:http://www.w3cplus.com/css3/define-font-size-with-css3-rem 在Web中使用什么单位来定义页面的字体大小,至今天为止都还在激 ...
- css中px,em,rem,rpx的区别
今天看到一个面试题为 px,em的区别,为了更好地让读者区分css的长度单位,我总结下css中常用的长度单位: px,em,rem,rpx 像素px是我们在定义CSS中经常用到的尺寸大小单位,而em在 ...
- rem、em、px之间的转换
rem是相对于根元素<html>,这样就意味着,我们只需要在根元素确定一个参考值,这个参考值设置为多少,完全可以根据您自己的需求来定. 我们知道,浏览器默认的字号16px,来看一些px单位 ...
- css中字体常用单位px、em、rem和%的区别及用法总结
一.px.em.rem和%的定义 1.px(像素) px单位的名称为像素,它是一个固定大小的单元,像素的计算是针对(电脑/手机)屏幕的,一个像素(1px)就是(电脑/手机)屏幕上的一个点,即屏幕分辨率 ...
- CSS中常用的字体单位：px、em、rem和%的区别
在刚接触CSS时,px用的比较多,也很好理解,可是用久了就会发现有些缺陷,特别是在做响应式开发的时候. 那这么多单位到底在什么时候用什么单位合适呢?今天就来探讨一下. 先大致解释一下这些单位的意思: ...
- CSS3中的Rem值与Px之间的换算
bootstrap默认 html{font-size: 10px;} rem是一个相对大小的值,它相对于根元素<html>, 比如假设,我们设置html的字体大小的值为html{font- ...
- CSS3 中的 rem 值与 px 之间的换算
想给博客换个主题,到处找找不到满意的,最后发现默认主题 twentytwelve 越看越顺眼,于是就想动手改一下用. 看 CSS 文件的时候发现引入了一个新大小单位:rem,虽然 CSS 文件注释里有 ...
随机推荐
- Ansible 自动化运维工具
Ansible 自动化运维工具 Ansible是什么? Ansible是一个"配置管理工具"也是一个"自动化运维工具" Ansible 作用: Ansible是 ...
- Git命令行操作（三）
1. 本地库初始化 进入指定目录,如:D:\gitSpace\OA 右键-->Git Bash Here,执行命令: git init 效果如下: #查看.git目录 ls -la # 进入.g ...
- nginx配置文件结构及location块语法规则
一. nginx配置文件结构介绍 二. location语法规则: 用法示例: location [=|~|~*|^~] /uri/ { … } # 讲解如下: 1. = 开头表示精确匹配 2. ...
- 动态规划 | 对输入进行hash处理的LIS 1045
把序列M处理为有序序列,并且M不存在的序列要在A中删除. 对A进行了处理之后,执行LIS的操作(O(N^2)复杂度).当然可以优化为对数复杂度的,不过pat不卡这个. LCS解法:动态规划 | 保留重 ...
- [LeetCode] 33. Search in Rotated Sorted Array 在旋转有序数组中搜索
Suppose an array sorted in ascending order is rotated at some pivot unknown to you beforehand. (i.e. ...
- OsharpNS轻量级.net core快速开发框架简明入门教程-切换数据库(从SqlServer改为MySql)
OsharpNS轻量级.net core快速开发框架简明入门教程 教程目录 从零开始启动Osharp 1.1. 使用OsharpNS项目模板创建项目 1.2. 配置数据库连接串并启动项目 1.3. O ...
- Scala 准引用 - Quasiquote介绍
Quasiquotes are a neat notation that lets you manipulate Scala syntax trees with ease: scala> val ...
- 剑指offer：对称的二叉树
题目描述: 请实现一个函数,用来判断一颗二叉树是不是对称的.注意,如果一个二叉树同此二叉树的镜像是同样的,定义其为对称的. 思路分析: 二叉树的镜像就是左右相反,对称二叉树即镜像相等.利用一个递归函数 ...
- SpringBoot第二十篇：初识ActiveMQ
本文是作者之前写的关于 ActiveMQ 的一篇文章.此处为了保证该系列文章的完整性,故此处重新引入. 一.消息中间件的介绍 介绍 消息队列 是指利用 高效可靠 的 消息传递机制 进行与平台无关的 数 ...
- ng 使用阿里巴巴矢量图
1.进入阿里巴巴矢量图标库中,选择需要下载的图标,添加进项目中 2.进去项目选择Font class 模式,然后下载到本地 3.解压下载的压缩包,把.css/.svg/.ttf/.woff/.woff ...