手机有很多尺寸的型号。使用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. 关于maven pom

    1 maven pom.xml只是配置文件 构建的流程已经固化在maven中了,pom.xml只是对这个流程的配置.特别是插件,在不进行人工绑定的情况下,插件是对应固定的生命周期的,我们操作的时候是操 ...

  2. 判断一个包是否可以安装是一个NP-complete问题

    1 checking whether a single package P can be installed, given a repository R,is NP-complete

  3. Chart.js docs

    原文链接:http://www.bootcss.com/p/chart.js/docs/ 引入Chart.js文件 首先我们需要在页面中引入Chart.js文件.此工具库在全局命名空间中定义了Char ...

  4. Windows平台cocos2d-x 3.0 android开发环境

    cocos2d-x升级到3.0后变化不小,除了API的变化(主要是函数和类名称变化,以及使用了C++11的不少特性.function/bind, lamda, std::thread-),创建和编译p ...

  5. POJ - 3308 Paratroopers(最大流)

    1.这道题学了个单词,product 还有 乘积 的意思.. 题意就是在一个 m*n的矩阵中,放入L个敌军的伞兵,而我军要在伞兵落地的瞬间将其消灭.现在我军用一种激光枪组建一个防御系统,这种枪可以安装 ...

  6. AppCompatActivity、ActionBarActivity、FragmentActivity和Activity的区别

    package com.chy.myapplication; import android.support.v7.app.AppCompatActivity; import android.os.Bu ...

  7. 安装tensorflow的最简单方法(Ubuntu 16.04 && CentOS)

    先说点题外话:在用anaconda安装很多次tensorflow失败之后,我放弃了,如果你遇到这样的问题:Traceback (most recent call last)-如果不是因为pip版本,就 ...

  8. 深入分析glibc内存释放时的死锁bug

    通常我们认为一旦内存写溢出,程序就很容易崩溃.所以服务器上通常会对一些重要进程做脚本保护,一旦崩溃立即重新拉起. 最近发现我们一个公共服务内存写溢出时程序没有崩溃,而是卡死了. 为了深入分析原因,我们 ...

  9. ASP.NET项目开发实战<<一键创建解决方案>>

    视频演示地址:http://www.youku.com/playlist_show/id_23192838.html 第一步:创建项目需要的数据库 打开辅助开发工具,如下图 从左侧菜单找到 项目数据库 ...

  10. MySQL基础操作——转

    原文: [培训]MySQL yum安装mysql:yum -y install mysql*- 或者 yum -y install mysql* 启动数据库服务:/etc/init.d/mysqld ...