使用rem适配不同屏幕的移动设备
- 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 / 640*100 + 'px'; </script>
问题:为什么要设置Html的font-size?
答:这里是设置html标签的font-size,上面概论红色字写的很清晰,页面元素使用rem单位时,是相对于这个html标签的font-size的大小为基础的。
问题:为什么是clientWidth/640?为什么要乘以100?
答:
- 是因为这里是作为一个基础数值,换个方向去想,这里先不乘以100以免产生误解。
例如:设计稿宽度是640px,有一个元素设计稿上的宽度是50px,设备物理宽度是320px,那么我们在页面上应该设置宽度为 width:50rem,相当于宽度是:50*(320/640)=25px;这里能正确算出在320px的设备上刚好占一半,其实可以想象为 rem=(320/640)。
一般浏览器的最小字体是12px,如果html的font-size=(320/640)px,相当于font-size=0.5px,那么这个数值就小于12px,会造成一些计算的错误,和一些奇怪的问题,*100后,font-size是50px,就可以解决这种字体小于12px的问题。
为了计算方便 我们后面把比率乘以了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
转载于:https://www.cnblogs.com/mo3408/p/11606786.html
使用rem适配不同屏幕的移动设备相关推荐
- android 适配2k屏幕分辨率,Android设备兼容处理(二):屏幕适配
前言 要做好屏幕适配最重要的是了解当前市场设备分布,目前主流设备可以分为三类,4.7-5.5英寸的中屏手机,5.5-7.0的大屏手机,以及7.0英寸以上的平板.分辨率则是720P,1080P和2K. ...
- 【Android 应用开发】Android屏幕适配解析 - 详解像素,设备独立像素,归一化密度,精确密度及各种资源对应的尺寸密度分辨率适配问题
. 作者 :万境绝尘 转载请注明出处 : http://blog.csdn.net/shulianghan/article/details/19698511 . 最近遇到了一系列的屏幕适配问题, 以及 ...
- 经历了px、em之后,用 rem 适配屏幕
引入阅读:AmazeUI css 部分截图 · 示下: 文章源自:Fontsize with rem 部分截图 · 示下: 以上就是关于" 经历了px.em之后,用 rem 适配屏幕 &qu ...
- 【Android 屏幕适配】屏幕适配基础概念 ④ ( 屏幕适配限定符 | 手机/平板电脑设备屏幕适配 )
文章目录 一.屏幕适配限定符 二.手机/平板电脑设备屏幕适配 平板电脑市场占有率 密度无关像素计算 手机设备限定符 平板设备限定符 参考文档 : 设备兼容性概览 屏幕兼容性概览 支持不同的像素密度 声 ...
- vue中使用第三方UI库的移动端rem适配方案
需求:使用vue-cli脚手架搭建项目,并且使用第三方的UI库(比如vant,mint ui)的时候,因为第三方库用的都是用px单位,无法使用rem适配不同设备的屏幕. 解决办法:使用px2rem-l ...
- 移动web开发之rem布局(rem基础、媒体查询、 less 基础、rem适配方案)
移动web开发之rem布局 一.rem基础 rem单位 rem (root em)是一个相对单位,类似于em,em是父元素字体大小. 不同的是rem的基准是相对于html元素的字体大小. 比如,根元素 ...
- 移动端采用Flexible将PX转换REM适配及开发中Retina屏1px边框的两种解决方案
移动端采用Flexible将PX转换REM适配及开发中Retina屏1px边框的两种解决方案 说明:两个方案均基于Webpack构建. 方案一: 搭建环境及相关配置 webpack 3,需要loade ...
- iOS转前端之如何适配不同屏幕尺寸方案
今天抽空再写一篇~之前已经做了两个Demo,主要是运用CSS+Html完成的,今天还是来完成一个Demo,搭建一个关于宠物的网站.在开始之前我们先介绍一个知识点,关于适配的. 其实对于学习前端来说,H ...
- 采集页面之后css布局混乱之rem适配布局
1.rem基础 rem单位 rem (root em)是一个相对单位 ,类似于em , em是父元素字体大小. 不同的是rem的基准是相对于html元素的字体大小. 比如,根元素( html)设置fo ...
最新文章
- 电大计算机2019作业,【电大题】2019年最新国家开 放大学电大《人文英语2、3、》网络核心课形考网考作业两套汇编附全答案.docx...
- AJAX跨域资源共享 CORS 详解
- 安装 MongoDB PHP 驱动 在CentOS 6.x和遇到的问题
- 让远程协助在局域网里无处不在
- iPhone比小米贵3000,贵在哪里?
- Qt : 记录一个编译错误
- 为什么要从自然数扩大到实数,进而扩大到复数?
- mysql sqldump_mysql sqldump 备份
- python新建以时间命名的目录
- #洛谷oj:P2024 [NOI2001] 食物链
- 怎么在计算机里有桌面快捷方式,桌面快捷方式不见了,小编教你桌面软件快捷方式图标不见了怎么办...
- 一群猴子要选新猴王。新猴王的选择方法是:让N只候选猴子围成一圈,从某位置起顺序编号为1~N号。从第1号开始报数,每轮从1报到3,凡报到3的猴子即退出圈子,接着又从紧邻的下一只猴子开始同样的报数。
- 《人性的弱点》-[美]戴尔·卡耐基
- 【数据结构与算法】之深入解析RSA加密算法的实现原理
- 10年资深DBA老郭(门下已出多位DBA学生)老男孩MySQL DBA标杆班实战视频教程
- 【Java习题程序】将int整数转化为int数组,不用转String。
- 【对讲机的那点事】对讲机电池、充电器使用说明须知
- c语言rand再哪个头文件里,c语言下rand函数在哪个头文件中
- 如何下载并安装Visual Studio
- 千万级支付对账系统怎么玩(上篇)?