手机有很多尺寸的型号。使用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. FileWriter简单用法并记录日志

    import java.io.*; import java.util.Date; /** * Created by Administrator on 2018/4/6. */ public class ...

  2. android动画具体解释四 创建动画

    使用ValueAnimator进行动画 通过指定一些int, float或color等类型的值的集合.ValueAnimator 使你能够对这些类型的值进行动画.你需通过调用ValueAnimator ...

  3. win10访问共享文件夹提示:引用的账户当前已锁定,且当前可能无法登陆

    最近一台电脑访问windows 2008 R2 server的共享文件夹.没有使用域环境. win10界面提示:引用的账户当前已锁定,且当前可能无法登陆. 登陆2008发现,该账户的确锁定.猜测可能该 ...

  4. Entity FramWork Code first 使用心得

    1 最有用的命令 update-database -force -verbose 2 主键如果不是默认的int或者 bigint而是guid 或者 string类型,创建记录的时候要给主键赋值 3 在 ...

  5. Enterprise Architect 生成项目类图

    Enterprise Architect使用教程: https://blog.csdn.net/chenglc1612/article/details/81083151 主要流程 --到此-自动生成完 ...

  6. YTU 2555: 老大的烦恼

    2555: 老大的烦恼 时间限制: 1 Sec  内存限制: 128 MB 提交: 176  解决: 47 题目描述 万恶的小黑,布置了一道题给老大做:给你一个n位的数,现在要求 你随意删除m位后,任 ...

  7. [Codeforces 839C] Journey

    [题目链接] http://codeforces.com/contest/839/problem/C [算法] 概率DP 时间复杂度 : O(N) [代码] #include<bits/stdc ...

  8. bzoj1044 [HAOI2008]木棍分割——前缀和优化DP

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1044 咳咳...终于A了... 居然没注意到正着找pos是n方会TLE...所以要倒着找po ...

  9. JS事件流与DOM事件处理程序

    在Javascript的DOM中,关于事件Event对象的知识是一定要掌握的.Event对象模型主要分为两个部分,一个是Event对象本身具有的属性和方法,这个参照API就可以学得:另一个是在DOM节 ...

  10. python的for...in...if...语句

    Python中,for...[if]...语句一种简洁的构建List的方法,从for给定的List中选择出满足if条件的元素组成新的List,其中if是可以省略的.下面举几个简单的例子进行说明. &g ...