rem 单位在做移动端的h5开发的时候是最常常使用的单位。

为解决自适应的问题。我们须要动态的给文档的更节点加入font-size 值。使用mediaquery 能够解决问题,可是每个文件都引用一大串的font-size 值非常繁琐,并且值也不能达到连续的效果。

就使用js动态计算给文档的fopnt-size 动态赋值解决问题。

使用的时候,请将以下的代码放到页面的顶部(head标签内);

/**
* [以iPhone6的设计稿为例js动态设置文档 rem 值]
* @param {[type]} currClientWidth [当前客户端的宽度]
* @param {[type]} fontValue [计算后的 fontvalue值]
* @return {[type]} [description]
*/
<script>
var currClientWidth, fontValue,originWidth;
//originWidth用来设置设计稿原型的屏幕宽度(这里是以 Iphone 6为原型的设计稿)
originWidth=375;
__resize(); //注冊 resize事件
window.addEventListener('resize', __resize, false); function __resize() {
currClientWidth = document.documentElement.clientWidth;
//这里是设置屏幕的最大和最小值时候给一个默认值
if (currClientWidth > 640) currClientWidth = 640;
if (currClientWidth < 320) currClientWidth = 320;
//
fontValue = ((62.5 * currClientWidth) /originWidth).toFixed(2);
document.documentElement.style.fontSize = fontValue + '%';
}
</script>

依据iPhone6设计稿动态计算rem值的更多相关文章

  1. 根据iPhone6设计稿动态计算rem值

    rem 单位在做移动端的h5开发的时候是最经常使用的单位.为解决自适应的问题,我们需要动态的给文档的更节点添加font-size 值.使用mediaquery 可以解决这个问题,但是每一个文件都引用一 ...

  2. 理解rem实现响应式布局原理及js动态计算rem

    前言 移动端布局中,童鞋们会使用到rem作为css单位进行不同手机屏幕大小上的适配.那么来讲讲rem在其中起的作用和如何动态设置rem的值. 1.什么是rem rem是相对于根元素(html标签)的字 ...

  3. 动态计算rem的js代码

    以最小1024尺寸为例: function rem() { var htmlEle = document.documentElement; var winWidth = htmlEle.clientW ...

  4. 如何把设计稿中px值转化为想要的rem值

    首先我们需要的是把尺寸转化为rem值 假如 设计稿中的是 200px*200px的图片 移动端的设计图尺寸一般是640*750; 第一步.  把图片分为若干份(好算即可),每一份的大小就是rem的单位 ...

  5. 第148天:js+rem动态计算font-size的大小,适配各种手机设备

    需求: 在不同的移动终端设备中实现,UI设计稿的等比例适配. 方案: 布局排版都用rem做单位,然后不同宽度的屏,js动态计算根节点的font-size. 假设设计稿是宽750px来做的,书写css方 ...

  6. 移动端(手机端)页面自适应解决方案1(rem布局)---750设计稿

    设计稿尺寸为750 * 1340.结合网易.淘宝移动端首页html元素上的动态font-size属性.设计稿尺寸.前端与设计之间协作流程一般分为下面两种: 网易做法: 页面开头处引入下面这段代码,用于 ...

  7. 基于rem的移动端响应式适配方案(详解) 移动端H5页面的设计稿尺寸大小规范

    基于rem的移动端响应式适配方案(详解) : https://www.jb51.net/article/118067.htm 移动端H5页面的设计稿尺寸大小规范 http://www.tuyiyi.c ...

  8. 根据当前设备的宽度,动态计算出rem的换算比例,实现页面中元素的等比缩放

    ~function anonymous(window){ //根据当前设备的宽度,动态计算出rem的换算比例,实现页面中元素的等比缩放 let computedREM = function compu ...

  9. 从网易与淘宝的font-size思考前端设计稿与工作流

    本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习,讨论html5设计稿尺寸以及前端与设计之间协作流程的问题,内容较多,但对你的技术和工作一定有价值,欢迎阅读和点 ...

随机推荐

  1. luogu3755 [CQOI2017]老C的任务

    扫描线水题. #include <algorithm> #include <iostream> #include <cstdio> using namespace ...

  2. CI - Set CSRF Hash and Cookie

    /** * Set CSRF Hash and Cookie * * @return string */ protected function _csrf_set_hash() { if ($this ...

  3. 2017 ACM-ICPC 亚洲区(乌鲁木齐赛区)网络赛

    Banana Bananas are the favoured food of monkeys. In the forest, there is a Banana Company that provi ...

  4. Method for Estimating the Number of Concurrent Users

    1. Formula for Estimating the Average Number of Concurrent users We begin by defining what the numbe ...

  5. Mahout0.9安装与配置(完全分布式模式下运行)

    安装Mahout之前,一定要把hadoop装好,hadoop的安装方法可以参考我的前一篇随笔,我安装的是hadoop2.7.0,具体方法在此不做介绍. 1.首先下载相应版本的Mahout: axel ...

  6. LightOJ——1012Guilty Prince(连通块并查集)

    1012 - Guilty Prince Time Limit: 2 second(s) Memory Limit: 32 MB Once there was a king named Akbar. ...

  7. 刷题总结——bzoj2243染色

    题目: 题目背景 SDOI2011 DAY1 T3 题目描述 给定一棵有 n 个节点的无根树和 m 个操作,操作有 2 类:1.将节点 a 到节点 b 路径上所有点都染成颜色 c :2.询问节点 a  ...

  8. 【DFS求树的最大二分匹配+输入外挂】HDU 6178 Monkeys

    http://acm.hdu.edu.cn/showproblem.php?pid=6178 [题意] 给定一棵有n个结点的树,现在有k个猴子分布在k个结点上,我们可以删去树上的一些边,使得k个猴子每 ...

  9. lua学习随笔

    1.1  Chunks 1.2 全局变量 访问一个没有初始化的全局变量也不会出错,只不过的到的结果是nil 如果想删除一个全局变量,只需要将变量赋值为nil 1.3  词法约定 标识符 保留字不能作为 ...

  10. Linux(15):shell 编程

    shell基础 什么是 shell ? Shell是一个命令解释器,它的作用是解释执行用户输入的命令及程序等,用户输入一条命令, Shell 就解释执行一条. 这种从键盘一输入命令,就可以立即得到回应 ...