手机有很多尺寸的型号。使用rem来做为大小单位可以达到兼容的目的。

  方法一:js测量手机尺寸,设置font-size:为手机屏幕width /10 + ‘px’。即10rem 为手机屏幕width。

  方法二:css的媒体查询,列举所要兼容的手机尺寸,按照方法一设置html的font-size。

代码:

  方法一

  (function () {

    var newRem = function () {

    html.style.fontSize = html.getBoundingClientRect().width / 10 + 'px'

  }

  window.addEventListener('resize', newRem, false)

  newRem()

  })()

  方法二

  。。。

移动端rem的更多相关文章

  1. 谈谈我的移动端rem适配方案

    最近有点怀疑人生,毕竟一个人写前端,有时候会怀疑自己理解的一些东西包括用法有没有符合标准.趁着这阵子闲下来,翻了翻别人的rem适配博客,发现有点绕口,怪自己是个强迫症,啥都要自己去试试结果并从中理解, ...

  2. 关于移动端rem适配

    var num = 1 / window.devicePixelRatio; var fontSize = document.documentElement.clientWidth / 10; doc ...

  3. 第130天:移动端-rem布局

    一.关于布局方案 当拿到设计师给的UI设计图,前端的首要任务就是布局和样式,相信这对于大部分前端工程师来说已经不是什么难题了.移动端的布局相对PC较为简单,关键在于对不同设备的适配.之前介绍了一篇关于 ...

  4. 07. 如何实现移动端rem适配

    如何实现移动端rem适配 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  5. 移动端REM布局模板(阿里高清方案)

    移动端REM布局模板(阿里高清方案),蛮好的,转自: http://www.jianshu.com/p/985d26b40199 . <!DOCTYPE html> <html la ...

  6. 移动端Rem布局注意事项

    1.布局的总体结构框架:      2.注意事项: (a):如果是左右两栏的布局方式,须在article的同级加一个aside: 因为是同级,所以必须设置同样的样式:而且他俩的父级,也就是sectio ...

  7. 移动端rem适应布局

    移动端rem适应布局 rem rem(root em)是一个相对单位,类似于em,em是父元素字体大小. 不同的是rem的基准是相对于html元素的字体大小. 比如,根元素(html)设置font-s ...

  8. 移动端rem适配&iOS兼容

    移动端rem适配js // 默认375,750设计稿请将375替换为750 (function (doc, win) { // 移动端适配 var docEl = doc.documentElemen ...

  9. H5 端 rem 适配方案与 viewport 适配

    H5 端 rem 适配方案与 viewport 适配 rem rem 是 CSS3 新增的一个相对单位(root em,根 em) 只根据当前页面 HTML 页面的 font-size 设置,如果根目 ...

  10. 移动端rem布局实践

      一.rem 适配基本概念: 对于移动端的开发,rem 适配必不可少,我们可以用多种方式实现, 根据 html 的 fontSize 属性值为基准,其它所有的 rem 值,根据这个基准计算.我们根据 ...

随机推荐

  1. HTML5开发实战——Sencha Touch篇(1)

    学习了很多主要的Sencha Touch内容,已经了解了Sencha Touch的开发模式.接下来一段时间我们将利用Sencha Touch来进行自己的web应用构建. 先要解决的是前端的问题.从最简 ...

  2. 怎么将本地文件上传到远程git仓库

    1.(先进入项目文件夹)通过命令 git init 把这个目录变成git可以管理的仓库git init 2.把文件添加到版本库中,使用命令 git add .添加到暂存区里面去,不要忘记后面的小数点“ ...

  3. 浅谈OC中的Category

    OC特有的分类Category,依赖于类.它可以在不改变原来的类内容的基础上,为类增加一些方法.分类的使用注意: (1)分类只能增加方法,不能增加成员变量: (2)在分类方法的实现中可以访问原来类中的 ...

  4. C++的cout高阶格式化操作

    这篇文章主要讲解如何在C++中使用cout进行高级的格式化输出操作,包括数字的各种计数法(精度)输出,左或右对齐,大小写等等.通过本文,您可以完全脱离scanf/printf,仅使用cout来完成一切 ...

  5. (21) java web的struts2框架的使用

    在javaweb开发过程中,如果只使用servlet,jdbc,jsp进行开发,也可以遵从MVC的模式,这时候,servlet相当于control层,属于负责处理业务逻辑的控制器,同时也需要对获取和返 ...

  6. ISA总线

    ISA总线: (Industry Standard Architecture:工业标准体系结构)是为PC/AT电脑而制定的总线标准,为16位体系结构,只能支持16位的I/O设备,数据传输率大约是16M ...

  7. WdatePicker.js的使用方法(转)

    WdatePicker.js的使用方法 博客分类: 其他   1. 跨无限级框架显示 无论你把日期控件放在哪里,你都不需要担心会被外层的iframe所遮挡进而影响客户体验,因为My97日期控件是可以跨 ...

  8. BZOJ4259:残缺的字符串(FFT与字符串匹配)

    很久很久以前,在你刚刚学习字符串匹配的时候,有两个仅包含小写字母的字符串A和B,其中A串长度为m,B串长度为n.可当你现在再次碰到这两个串时,这两个串已经老化了,每个串都有不同程度的残缺. 你想对这两 ...

  9. Java总结基础知识

    权限关键字: public:可以被所有其他类所访问,不同的包 protected:当前类的成员.同一个包中.不同包中对子类可见父类protected,继承类 default:同一包中的类可以访问,声明 ...

  10. 使用cgroups限制MongoDB的内存使用

    cgroups,其名称源自控制组群(control groups)的简写,是Linux内核的一个功能,用来限制,控制与分离一个进程组群的资源(如CPU.内存.磁盘输入输出等). 这个项目最早是由Goo ...