一步步教你使用rem适配不同屏幕的移动设备
1.先说说几个前端常用的几个单位的概论:
- 1、px (pixel,像素):是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI(Dots Per Inch,每英寸像素数),在扫描打印时一般都有DPI可选。Windows系统默认是96dpi,Apple系统默认是72dpi。
- 2、em(相对长度单位,相对于当前对象内文本的字体尺寸):是一个相对长度单位,最初是指字母M的宽度,故名em。现指的是字符宽度的倍数,用法类似百分比,如:0.8em, 1.2em,2em等。通常1em=16px。
- 3、pt (point,磅):是一个物理长度单位,指的是72分之一英寸。pt=1/72(英寸), px=1/dpi(英寸)
- 4、rem(root em,根em):是CSS3新增的一个相对单位,这个单位引起了广泛关注。这个单位与em有什么区别呢?区别在于使用rem为元素设定字体大小时,相对大小对比的是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。目前,除了IE8及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。
2.开始进入rem教程
1.先设置header里面的meta标签:
<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">
2.在header写上<script>标签
<script type="text/javascript">
document.documentElement.style.fontSize = document.documentElement.clientWidth / *100 + 'px';
</script>
问题:为什么要设置Html的font-size?
答:这里是设置html标签的font-size,上面概论红色字写的很清晰,页面元素使用rem单位时,是相对于这个html标签的font-size的大小为基础的。
问题:为什么是clientWidth/640?为什么要乘以100?
答:
1.是因为这里是作为一个基础数值,换个方向去想,这里先不乘以100以免产生误解。
例如:设计稿宽度是640px,有一个元素设计稿上的宽度是50px,设备物理宽度是320px,那么我们在页面上应该设置宽度为 width:50rem,相当于宽度是:50*(320/640)=25px;这里能正确算出在320px的设备上刚好占一半,其实可以想象为 rem=(320/640)。
2.一般浏览器的最小字体是12px,如果html的font-size=(320/640)px,相当于font-size=0.5px,那么这个数值就小于12px,会造成一些计算的错误,和一些奇怪的问题,*100后,font-size是50px,就可以解决这种字体小于12px的问题。
3. 为了计算方便 我们后面把比率乘以了100,(320/640)*100,那么相对应这个元素在设置数值的时候就需要除以100了(50/100),这样可以保证最后出来的数值不变.
3.设置好html的font-size,那么我们下面就可以开始编写根据设计稿的例子了。
设计稿是640px,有一个红色盒子宽高都是320px,里面的文字是32px,那么下面是这个例子的代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, minimum-scale=1">
<script type="text/javascript">
document.documentElement.style.fontSize = document.documentElement.clientWidth / 640*100 + 'px';
</script>
</head>
<body style="margin: 0 ;padding: 0;font-size: 0.32rem">
<div style="width: 3.2rem;height: 3.2rem ;background: red">
<span>danny.xie</span>
</div>
</body>
</html>
1.在iphone5下的情况,设备的物理像素是320px
1.在iphone6下的情况,设备的物理像素是375px
可以看到字体的大小和红色盒子的宽高跟设计稿上面的比例是保持一致的,这样就是rem适配不同设备的的基本用法,如上文有错误,欢迎指出和讨论,十分感谢。
一步步教你使用rem适配不同屏幕的移动设备的更多相关文章
- 了解真实的『REM』手机屏幕适配
rem 作为一个低调的长度单位,由于手机端网页的兴起,在屏幕适配中得到重用.使用 rem 前端开发者可以很方便的在各种屏幕尺寸下,通过等比缩放的方式达到设计图要求的效果. rem 的官方定义『The ...
- 移动端使用rem适配及相关问题
移动端适配方案,说多也很多.可以使用百分比布局,但百分比与em都是基于父元素进行计算的,在实际应用中不是很方便.使用rem不仅可以设置字体大小,块大小也可以设置.而且可以良好的适配各种终端,所以这方案 ...
- web app变革之rem(手机屏幕实现全适配)
以往web移动适配,常规写法是:media only screen @media only screen and (min-device-width: 320px){ //针对iPhone 3 } @ ...
- 一步步教你搭建VS环境下用C#写WebDriver脚本
一步步教你搭建VS环境下用C#写WebDriver脚本http://www.automationqa.com/forum.php?mod=viewthread&tid=3529&fro ...
- rem适配
//REM适配new function() { var _self = this; _self.width = 640; // 设置默认最大宽度 _self.fontSize = 100; // 默认 ...
- 我写了个教程《一步步教你把ubuntu安装到U盘》
一步步教你把ubuntu安装到U盘 作者 Val 2452013147@qq.com 原因: 由于某些原因(学生党),需要把ubuntu安装到U盘到处走,百度了一下,教程都不是很好,要么很复杂,要么不 ...
- webapp思路和rem适配极其viewport
webapp在制作时候,页面上要加入viewport标签,用来进行适配; viewport的meta标签,指的是在移动端显示的时候,viewport是多大?移动端的浏览器是屏幕宽,viewport一般 ...
- 一步步教你读懂NET中IL(附带图)
一步步教你读懂NET中IL(附带图) 接触NET也有1年左右的时间了,NET的内部实现对我产生了很大的吸引力,在msdn上找到一篇关于NET的IL代码的图解说明,写的挺不错的.个人觉得:能对这些底部的 ...
- 谈谈我的移动端rem适配方案
最近有点怀疑人生,毕竟一个人写前端,有时候会怀疑自己理解的一些东西包括用法有没有符合标准.趁着这阵子闲下来,翻了翻别人的rem适配博客,发现有点绕口,怪自己是个强迫症,啥都要自己去试试结果并从中理解, ...
随机推荐
- HTML中的a标签实现点击下载
通常在咱们写项目的时候会遇到上传下载什么的,在上传完文件后会把文件的路径保存到数据库里以便下载,如果想不通过后台直接下载的话,可以把文件路径给a标签的属性href: <a href=" ...
- DLL 导出变量
声明为导出变量时,同样有两种方法: 第一种是用__declspec进行导出声明 #ifndef _DLL_SAMPLE_H #define _DLL_SAMPLE_H // 如果定义了C++编译器 ...
- [Netty] - Netty入门(最简单的Netty客户端/服务器程序)
Java中的NIO是一种解决阻塞式IO问题的基本技术,但是NIO的编写对java程序员是有比较高的要求的.那么Netty就是一种简化操作的一个成熟的网络IO编程框架.这里简单介绍一个程序,代码是< ...
- 一个Python小白5个小时爬虫经历 【续】
前言 昨天实现了python简单的数据采集之后本来还挺高兴的,结果发现在.NET读取txt文件后反序列化总是报错.具体错误原因好像是从txt读取数据之后会自动加一个隐藏的字符串,没错,肉眼看不见,就导 ...
- CentOS安装Tomcat8
安装环境:CentOS-6.5 安装方式:源码安装 软件:apache-tomcat-8.0.0.RC3.tar.gz 下载地址:http://tomcat.apache.org/download-8 ...
- 简述.jpg .Gif .png-8 .png-24的区别
最近有很多朋友在开发过程中有时候会遇到图片加载不清晰,透明度失真,或者对图片进行操作之后造成图片损耗的现象,在这里给大家简单介绍一下常用的几种图片格式之间的区别 Gif格式特点: 1.透明性,Gif是 ...
- awk,sed文本处理案例
#!/bin/bash ############################################################################# #针对一个多级目录下 ...
- erlang erl文件编译的三种脚本
方案1:命令行 #!/bin/sh #file name: erl.sh #author: stars #time:2015.06.05 #eg: ./erl.sh hello.erl start 2 ...
- Omi教程-插件体系
插件体系 Omi是Web组件化框架,怎么又来了个插件的概念? 可以这么理解: Omi插件体系可以赋予dom元素一些能力,并且可以和组件的实例产生关联. omi-drag 且看这个例子: 点击这里→在线 ...
- LINUX RHEL6.5字符界面安装图形化桌面
安装RHEL 6.5 系统,也是一波三折.好不容易把系统装上去了,发现没装图形化界面.重装倒是学会了,不过觉得太麻烦,于是有了今天. 查了很多帖子,然后自己一一尝试,发现都是说简单,只要 yum gr ...