手机有很多尺寸的型号。使用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. Web—CSS概述

    一.概念: 它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言 的一个子集)等文件样式的计算机语言. 二.特点: 1.实现网页内容与样式的分离     2.降低图形文件的 ...

  2. 找不到方法 Void Newtonsoft.Json.JsonConvert.set_DefaultSettings

    找不到方法 Void Newtonsoft.Json.JsonConvert.set_DefaultSettings 因为 Newtonsoft.Json.dll 的版本号问题: C:\Program ...

  3. Navicat for MySQL中文破解版免费下载

    不知道用过MySQL workbench数据库的朋友或站长有没有都遇到过这样的问题? 就是用ssh的连接方式连接数据库的时候,第一次可以连接的上,但是第二次就不行了,以后再用workbench就再也连 ...

  4. IO流-获取指定目录下文件夹和文件对象【File类】

    一.运用File类实现获取指定目录下文件夹和文件对象 1.File类 2.方法: 获取文件绝对路径 :getAbsolutePath 案例: import java.io.File; /** * 获取 ...

  5. 关于java及多线程

    http://www.w3cschool.cc/java/java-multithreading.html

  6. 2016/3/10 PHP环境搭建 LAMP WAMP

    1. php成为服务器端的脚本语言.弱类型语言.$ JavaScript是弱类型语言.var Java强类型语言.byte short int long double float boolean 2. ...

  7. (2)MyEclipse怎么关联本地Tomcat服务器

    1,在MyEclipse中点击服务器按钮: 2,选择“Configure Server” 3,在弹出面板中选择 [Servers]-[Tomcat]-[对应版本的服务器] 5,看上图,先选择Enabl ...

  8. leetcode 659. Split Array into Consecutive Subsequences

    You are given an integer array sorted in ascending order (may contain duplicates), you need to split ...

  9. YTU 2891: E--围栏

    2891: E--围栏 时间限制: 1 Sec  内存限制: 128 MB 提交: 91  解决: 24 题目描述 一串连续字符被称作围栏当且仅当它由间隔的'|'和'-'组成.比如"|-|- ...

  10. 并不对劲的uoj276. [清华集训2016]汽水

    想要很对劲的讲解,请点击这里 题目大意 有一棵\(n\)(\(n\leq 50000\))个节点的树,有边权 求一条路径使该路径的边权平均值最接近给出的一个数\(k\) 输出边权平均值下取整的整数部分 ...