移动端适配单位rem
0 写在前面
本周惊喜地发现，其他各个老师的软工班（罗杰老师班和欧阳老师班）的软工项目的alpha版本都已经发布了！（然而我们软工项目还没开始写代码…逃…）
十分好奇的我第一时间下载了一些他们的产品进行体验，由于我是在手机上打开的他们的项目，一些基于web端开发的产品在前端效果上看起来有些古怪。进而发现，可能是在各个项目组的开发过程中，没有将移动端的适配问题考虑在内。
由于手机网络的普及，越来越多的用户开始使用移动端产品，因此在产品的开发和设计时，有必要考虑移动端的适配问题。
今天我讲通过这篇文章来记录一下移动端适配单位rem的学习笔记。
1 基本知识点
逻辑像素： CSS像素
物理像素：设备出厂时即被设定好的（也叫设备像素）
设备像素比dpr = 物理像素/CSS像素
2 rem & em
em：
font-size的值 相对于父级字体大小
width，height的值 相对于自身字体大小
谷歌浏览器限制最小字体大小为12px若设置低于12px则字体大小按12px计算
rem:相对于跟标签html的font-size值
3 屏幕尺寸
640 * 1136 -> 物理像素
eg: iphone5 dpr = 2
一个div在设计稿里的实际宽度200px -> 100px
320 * 568 -> CSS像素
一列占：320 / 16 (总列数：自己设置) = 20px (每列占的CSS像素)
一个div元素所占列数 = 100px / 20px = 5rem
4 总结
元素适配宽度 = 元素所占列数rem
一列的宽度 = 屏幕实际宽度 / 总列数
元素实际列数 = 元素在设计稿里的宽度 / 一列的宽度
5 示例代码
<!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>rem</title>
<style>
html{
font-size: 20px;
}
div{
/* CSS像素 ：逻辑像素*/
height: 90px;
width: 90px;
background-color: red;
/* 物理像素：设备出厂时即被设定好的（也叫设备像素） */
/* 设备像素比dpr = 物理像素/CSS像素 */
}
.demo{
font-size: 16px;
}
.demo .em{
/* 相对于父级字体大小 */
font-size: 2em;
width: 3em;
height: 3em;
}
.demo .rem{
font-size: 2rem;
width: 5rem;
height: 5rem;
background-color: aqua;
}
</style>
</head>
<body>
<!--
rem&em
em：1. font-size的值 相对于父级字体大小
2. width height的值 相对于自身字体大小
注意：谷歌浏览器限制最小字体大小为12px若设置低于12px则字体大小按12px计算
rem:相对于跟标签html的font-size值
-->
<!--屏幕尺寸
640 * 1136 -> 物理像素
eg: iphone5 dpr = 2
一个div在设计稿里的实际宽度200px -> 100px
320 * 568 -> CSS像素 一列占：320 / 16 (总列数：自己设置) = 20px (每列占的CSS像素)
一个div元素所占列数 = 100px / 20px = 5rem 1. 元素适配宽度 = 元素所占列数rem
2. 一列的宽度 = 屏幕实际宽度 / 总列数
3. 元素实际列数 = 元素在设计稿里的宽度 / 一列的宽度
--> <div class="demo">
<p class="em">好好学习</p>
<div class="rem">天天向上</div>
</div>
</body>
</html>
移动端适配单位rem的更多相关文章
- 移动端适配（rem & viewport）--移动端开发整理笔记（四）
移动端适配 通过rem适配 em: 根据元素自身的字体大小来计算自己的尺寸 rem: (root em) 根据根节点(html)的字体大小来计算自己的尺寸 我们知道,在不同的手机设备,分辨率大小是 ...
- 移动端适配之REM
随着手机等移动设备的普及,移动端带来的流量已经不可忽视,一个网站不只是只有pc的页面就足够了,移动端的适配已经势在必行.但是移动设备种类繁多,屏幕尺寸也千奇百怪,能不能找到一种方式可以适配所有的手机屏 ...
- H5移动端适配方案-rem
为什么移动端要适配: 由于移动设备的尺寸不一,所以移动端的页面要能够适应不同尺寸的设备,即页面的自适应,让页面在视觉上保持一致. rem:rem 是css3的一种相对单位,参考是根元素HMTL的fon ...
- 移动端常用单位——rem
移动端常用单位: ①px:像素大小,固定值 ②%:百分比 ③em(不常用,但是在首行缩进时可以使用):相对自身的font大小(当自身的字体大小也是em做单位时,才会以父元素的字体大小为基准单位) ④r ...
- 移动端适配（rem单位定义方法）
注:移动端必须写: <meta name="viewport" content="width=device-width, user-scalable=no, ini ...
- 移动端Web适配单位rem的坑,oppo r9手机出现错位bug
我们做了一个抽奖的H5活动页面,被一个oppo R9手机客户反馈,抽奖的转盘错位了.刷新了好几次都不行.网上百度一搜真的有部分安卓手机有坑.赶紧修复bug.分享完整的rem.js代码出来.各位看官自己 ...
- 移动端适配方案-rem(基础篇)
常见移动web适配方案一般有3种方法,如下图: ①:定高,宽度百分比(一般用来做一些适配性不高的页面,比如主要以一些文字和图片为主的网页或移动端的头部和底部) ②:flex (更多的用于复杂页面的布局 ...
- 简单介绍移动端CSS3单位rem的用法
PC端大部份是用px单位,小部分用em单位,而移动端,请全部用rem单位吧.目前大部份设备,包括但不限于iOS 5+.Android 2.3+.Window Phone 8+都是可以兼容的,具体兼容表 ...
- 小tips：使用rem+vw实现简单的移动端适配
首先设置meta属性,如下代码: <meta name="viewport" content="width=device-width, initial-scale= ...
随机推荐
- html meta标签使用及属性介绍
自学前端开始,我对meta标签接触不多,主要把精力都集中在能显示出来的标签上,比如span.button.h1等等.有时候去查看一些知名网站的源码,发现head标签里有一大摞的meta. 今天就来学习 ...
- CSS中的一下小技巧2之CSS3动画勾选运用
使用CSS3实现动画勾选 相信大家在项目中会经常遇到这种需求:勾选框.现在用CSS3来实现一个动画勾选,只需要一个标签即可完成: 这次需要用到CSS中伪类 after,这个小技巧也是很容易忘记的,所以 ...
- Eclipse导出包含第三方Jar的工程
基于第三方开源的Jar包封装了一个工具类,在导出成Jar包后,引用新生成的Jar包,却报找不到类的错误.看了一下生成的Jar包,发现根本没有包含第三方Jar包的相关class.这是导出第三方Jar包时 ...
- Flume1.9.0的安装、部署、简单应用(含分布式、与Hadoop3.1.2、Hbase1.4.9的案例)
目录 目录 前言 什么是Flume? Flume的特点 Flume的可靠性 Flume的可恢复性 Flume的一些核心概念 Flume的官方网站在哪里? Flume在哪里下载以及如何安装? 设置环境变 ...
- Unity切换到安卓平台Shader丢失(opengl)
Unity安卓平台shader平台丢失 Unity的工程切换到Android平台后,运行游戏出现shader丢失 解决办法:在Unity桌面图标的快捷方式后添加 -force-gles20 示例:&q ...
- 《重构》的读书笔记–方法列表
第5章 重构列表 5.1 重构的记录格式103 5.2 寻找引用点105 5.3 这些重构手法有多成熟106 第6章 重新组织函数 6.1 (P110)Extract Method(提炼函数) 6.2 ...
- 一。Hibernate 开发流程
一.hibernate和mybatis都是orm产品1.orm:object-realation-mapping对象关系映射 二.开发步骤1.导入相关jar 包括hibernate和oracle的驱动 ...
- 微信、qq可以上网，但是浏览器却不能上网怎么办
问题描述:微信.qq可以上网,但是浏览器却不能上网怎么办? 解决办法(步骤如下):(1)打开360安全卫士,点击更多 (2)进入到更多中,点击断网急救箱 (3)进入到断网急救箱,点击全面诊断 (4)一 ...
- 北京大学冯哲清北学堂讲课day1
贪心方案: 答案是第三个策略 二分的一个重点是有顺序性,只有满足这个件才可以二分判断区间,否则你得自己构造顺序. 洛谷跳石头同题: 首先,我们要最小化最大跳远距离 代码如下(此题) #include& ...
- Doctype知识点总结
DOCTYPE是document type (文档类型) 的缩写.<!DOCTYPE >声明位于文档的最前面,处于标签之前,它不是html标签.主要作用是告诉浏览器的解析器使用哪种HTML ...