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的更多相关文章

  1. 移动端适配(rem & viewport)--移动端开发整理笔记(四)

    移动端适配 通过rem适配 em: 根据元素自身的字体大小来计算自己的尺寸 rem: (root em) 根据根节点(html)的字体大小来计算自己的尺寸   我们知道,在不同的手机设备,分辨率大小是 ...

  2. 移动端适配之REM

    随着手机等移动设备的普及,移动端带来的流量已经不可忽视,一个网站不只是只有pc的页面就足够了,移动端的适配已经势在必行.但是移动设备种类繁多,屏幕尺寸也千奇百怪,能不能找到一种方式可以适配所有的手机屏 ...

  3. H5移动端适配方案-rem

    为什么移动端要适配: 由于移动设备的尺寸不一,所以移动端的页面要能够适应不同尺寸的设备,即页面的自适应,让页面在视觉上保持一致. rem:rem 是css3的一种相对单位,参考是根元素HMTL的fon ...

  4. 移动端常用单位——rem

    移动端常用单位: ①px:像素大小,固定值 ②%:百分比 ③em(不常用,但是在首行缩进时可以使用):相对自身的font大小(当自身的字体大小也是em做单位时,才会以父元素的字体大小为基准单位) ④r ...

  5. 移动端适配(rem单位定义方法)

    注:移动端必须写: <meta name="viewport" content="width=device-width, user-scalable=no, ini ...

  6. 移动端Web适配单位rem的坑,oppo r9手机出现错位bug

    我们做了一个抽奖的H5活动页面,被一个oppo R9手机客户反馈,抽奖的转盘错位了.刷新了好几次都不行.网上百度一搜真的有部分安卓手机有坑.赶紧修复bug.分享完整的rem.js代码出来.各位看官自己 ...

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

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

  8. 简单介绍移动端CSS3单位rem的用法

    PC端大部份是用px单位,小部分用em单位,而移动端,请全部用rem单位吧.目前大部份设备,包括但不限于iOS 5+.Android 2.3+.Window Phone 8+都是可以兼容的,具体兼容表 ...

  9. 小tips:使用rem+vw实现简单的移动端适配

    首先设置meta属性,如下代码: <meta name="viewport" content="width=device-width, initial-scale= ...

随机推荐

  1. Docker+SpringBoot远程发布

    Docker+SpringBoot远程发布 发布成功后启动: docker run -di --name demo1.1 -p 8080:8085 demo:1.0 docker run 命令大全:h ...

  2. spring cloud feign 文件上传和文件下载

    文件上传参考文档:http://blog.didispace.com/spring-cloud-starter-dalston-2-4/ 文件下载参考文档:https://blog.csdn.net/ ...

  3. Web前端-Ajax基础技术(上)

    Web前端-Ajax基础技术(上) ajax是浏览器提供一套的api,用于向服务器发出请求,接受服务端返回的响应,通过javascript调用,实现通过代码控制请求与响应,实现网络编程. ajax发送 ...

  4. loj#6073. 「2017 山东一轮集训 Day5」距离(树链剖分 主席树)

    题意 题目链接 Sol 首先对询问差分一下,我们就只需要统计\(u, v, lca(u, v), fa[lca(u, v)]\)到根的路径的贡献. 再把每个点与\(k\)的lca的距离差分一下,则只需 ...

  5. zookeeper安装以及遇到的一些坑

    最近项目中用到了storm,然后storm中用到了zookeeper,然后今天抽空整理一下zookeeper的安装使用,原来后期再慢慢学习. 本篇文档,操作部分是摘自其他博客,里边的问题分析是自己在实 ...

  6. 【Android】用Cubism 2制作自己的Live2D——官方App样例源码学习(3)!

    ---恢复内容开始--- 前言- 虽然上文说的是model的绘制但是这个说法并不严谨,之前的几个例子都会有模型文件的读入和载入,可是在LAppRenderer.LAppView中并没有.moc等文件的 ...

  7. Android项目实战登录&注册

    由于项目中大部分界面都有一个后退键和一个标题栏,为避免代码冗杂以及便于利用,我们可以将后推荐和标题栏单独抽取出来定义一个标题栏布局,在 res/layout 目录下新建一个 Layout resour ...

  8. Windows Management Instrumentation 服务卸载并重新创建

    SC delete Winmgmt sc create Winmgmt binPath= "C:\Windows\System32\svchost.exe -k netsvcs" ...

  9. SQLServer更改用户定义的数据库角色

    更改用户定义的数据库角色注意事项 需具有以下一项或多项权限或成员身份才能运行此命令: 对角色具有 ALTER 权限 对数据库具有 ALTER ANY ROLE 权限 具有 db_securityadm ...

  10. 求出100以内的素数(java实现)

    j package test1; //2018/11/30 //求100以内的所有素数 public class Main10 { public static void main(String[] a ...