手机有很多尺寸的型号。使用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. 暴力破解zip文件

    #coding=utf-8 """ 用户输入-z参数指定要破解的zip文件,输入-d参数输入字典文件,即可暴力破解加密的zip文件 """ ...

  2. Sublime Text 3设置吊炸天PHP开发环境

    @heiyeluren @created: 2016/5/31 @last modify: 2016/7/8 1. 下载安装Sublime Text 3 http://www.sublimetext. ...

  3. 基于开源项目的在线网络视频直播项目---一个很好的电视直播开源项目Sopcast

    http://blog.csdn.net/roy_xu/article/details/2216559 http://115.com/?ct=rar&pickcode=ew52634xr2cr ...

  4. slf4j的总结

    参考文章 log4j2使用总结 slf4j介绍以及实现原理窥探 使用Slf4j集成Log4j2构建项目日志系统的完美解决方案 slf4j(全称是Simple Loging Facade For Jav ...

  5. Hibernate 之 How

    分享自: http://blog.csdn.net/jnqqls/article/details/8242520 在上一篇文章Hibernate 之 Why? 中对Hibernate有了一个初步的了解 ...

  6. mysql 转换编码方式

    进入mysql 的安装文件夹找到 “ my.ini” 文件  (mysql配置文件) 一.编辑MySql的配置文件 vim /etc/my.cnf 在 [mysqld] 标签下加上三行 default ...

  7. fscanf()函数详解【转】

    本文转载自:http://blog.csdn.net/liangxanhai/article/details/8026496 以前解析有规律的文件的时候要么用正则表达式,要么就是傻傻的自己写程序来解析 ...

  8. Nginx反向代理服务器、负载均衡和正向代理

    Nginx("engine x")是一个高性能的 HTTP 和反向代理服务器,第一个公开版本 0.1.0 发布于 2004 年 10 月 4 日.官方测试 nginx 能够支撑5万 ...

  9. poj 3321(带时间戳 + 区间统计)

    题目描述: 给定一颗树,求某个节点的子树的val值之和 可以用树的前序遍历给每一个节点编号,从而可以确定一个节点的子树的范围,这样就可以进行直接在区间上进行统计了. vector < int & ...

  10. IJ:目录

    ylbtech-IJ:目录 1.返回顶部   2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部     6.返回顶部   7.返回顶部   8.返回顶部   9.返回顶部   10. ...