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. 【LeetCode】Valid Parentheses(有效的括号)

    这道题是LeetCode里的第20道题. 题目要求: 给定一个只包括 '(',')','{','}','[',']' 的字符串,判断字符串是否有效. 有效字符串需满足: 左括号必须用相同类型的右括号闭 ...

  2. Playrix Codescapes Cup (Codeforces Round #413, rated, Div. 1 + Div. 2) 一夜回到小学生

    我从来没想过自己可以被支配的这么惨,大神讲这个场不容易掉分的啊 A. Carrot Cakes time limit per test 1 second memory limit per test 2 ...

  3. BZOJ 3309 DZY Loves Math ——莫比乌斯反演

    枚举$d=gcd(i,j)$ 然后大力反演 ——来自Popoqqq的博客. 然后大力讨论后面的函数的意义即可. http://blog.csdn.net/popoqqq/article/details ...

  4. 转载:sql2005 Microsoft SQL Server Management Studio Express的安装问题

    转载地址:http://blog.csdn.net/rjc20098022/article/details/26958105 在这个网址http://www.microsoft.com/zh-cn/d ...

  5. 使用HttpClient实现对第三方服务器的请求并接受返回数据

    /* * 创建日期 2017-4-7 * * TODO 要更改此生成的文件的模板,请转至 * 窗口 - 首选项 - Java - 代码样式 - 代码模板 */ package com.enfo.int ...

  6. 学习shell脚本之乘法口诀

    脚本如下: #!/bin/bash for i in 'seq 1 9' do for j in 'seq 1 $i' do k=$[$i*$j] echo -ne "$j"&qu ...

  7. 生日聚会 BZOJ 1037

    生日聚会 [问题描述] 今天是hidadz小朋友的生日,她邀请了许多朋友来参加她的生日party. hidadz带着朋友们来到花园中,打算坐成一排玩游戏.为了游戏不至于无聊,就座的方案应满足如下条件: ...

  8. Wiley出版 SQL Server 2005宝典

    原文发布时间为:2008-07-30 -- 来源于本人的百度文章 [由搬家工具导入] Wiley出版 SQL Server 2005宝典 迅雷专用高速下载    thunder://QUFmdHA6L ...

  9. 【ztree】zTree取消树节点选中的背景色

    点击树节点的时候是ztree给树加了个class:    curSelectedNode 所以最简单的清除树节点的背景色的方法是移除其有背景色的class: $(".curSelectedN ...

  10. Laravel5.1 报错:控制器不存在

    Laravel5.1 报错:控制器不存在 错误提示: Class App\Http\Controllers\Api/UserController does not exist 解决: (1)检查控制器 ...