依据iPhone6设计稿动态计算rem值
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值的更多相关文章
- 根据iPhone6设计稿动态计算rem值
rem 单位在做移动端的h5开发的时候是最经常使用的单位.为解决自适应的问题,我们需要动态的给文档的更节点添加font-size 值.使用mediaquery 可以解决这个问题,但是每一个文件都引用一 ...
- 理解rem实现响应式布局原理及js动态计算rem
前言 移动端布局中,童鞋们会使用到rem作为css单位进行不同手机屏幕大小上的适配.那么来讲讲rem在其中起的作用和如何动态设置rem的值. 1.什么是rem rem是相对于根元素(html标签)的字 ...
- 动态计算rem的js代码
以最小1024尺寸为例: function rem() { var htmlEle = document.documentElement; var winWidth = htmlEle.clientW ...
- 如何把设计稿中px值转化为想要的rem值
首先我们需要的是把尺寸转化为rem值 假如 设计稿中的是 200px*200px的图片 移动端的设计图尺寸一般是640*750; 第一步. 把图片分为若干份(好算即可),每一份的大小就是rem的单位 ...
- 第148天:js+rem动态计算font-size的大小,适配各种手机设备
需求: 在不同的移动终端设备中实现,UI设计稿的等比例适配. 方案: 布局排版都用rem做单位,然后不同宽度的屏,js动态计算根节点的font-size. 假设设计稿是宽750px来做的,书写css方 ...
- 移动端(手机端)页面自适应解决方案1(rem布局)---750设计稿
设计稿尺寸为750 * 1340.结合网易.淘宝移动端首页html元素上的动态font-size属性.设计稿尺寸.前端与设计之间协作流程一般分为下面两种: 网易做法: 页面开头处引入下面这段代码,用于 ...
- 基于rem的移动端响应式适配方案(详解) 移动端H5页面的设计稿尺寸大小规范
基于rem的移动端响应式适配方案(详解) : https://www.jb51.net/article/118067.htm 移动端H5页面的设计稿尺寸大小规范 http://www.tuyiyi.c ...
- 根据当前设备的宽度,动态计算出rem的换算比例,实现页面中元素的等比缩放
~function anonymous(window){ //根据当前设备的宽度,动态计算出rem的换算比例,实现页面中元素的等比缩放 let computedREM = function compu ...
- 从网易与淘宝的font-size思考前端设计稿与工作流
本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习,讨论html5设计稿尺寸以及前端与设计之间协作流程的问题,内容较多,但对你的技术和工作一定有价值,欢迎阅读和点 ...
随机推荐
- android 之 View
在进行游戏开发时,需要自定义各种控件和界面. 自定义View的使用: 绘制屏幕 刷新屏幕:后台数据发生了变化,需要开发人员自己刷新屏幕以显示最新数据 例子: MyView开发,绘制界面View内容: ...
- A. Nearest Common Ancestors
A. Nearest Common Ancestors Time Limit: 1000ms Case Time Limit: 1000ms Memory Limit: 10000KB 64-bi ...
- [android 代码search地址]
http://www.androidcodesearch.com/source/packages/apps/Settings/src/com/android/settings/SecuritySett ...
- BZOJ 3529 [Sdoi2014]数表 ——莫比乌斯反演 树状数组
$ans=\sum_{i=1}^n\sum_{j=1}^n\sigma(gcd(i,j))$ 枚举gcd为d的所有数得到 $ans=\sum_{d<=n}\sigma(d)*g(d)$ $g(d ...
- 洛谷P3097 - [USACO13DEC]最优挤奶Optimal Milking
Portal Description 给出一个\(n(n\leq4\times10^4)\)个数的数列\(\{a_n\}(a_i\geq1)\).一个数列的最大贡献定义为其中若干个不相邻的数的和的最大 ...
- 团伙(codevs 2597)
题目描述 Description 1920年的芝加哥,出现了一群强盗.如果两个强盗遇上了,那么他们要么是朋友,要么是敌人.而且有一点是肯定的,就是: 我朋友的朋友是我的朋友: 我敌人的敌人也是我的朋友 ...
- Ubuntu Jdk卸载 Oracle Jdk安装
完全卸载 移除所有 Java相关包 (Sun, Oracle, OpenJDK, IcedTea plugins, GIJ): apt-get update apt-cache search java ...
- 【POJ1226】Substrings(后缀数组,二分)
题意: n<=10,len<=100 思路: 只有一个字符串的时候特判一下 #include<cstdio> #include<cstring> #include& ...
- *Codeforces989D. A Shade of Moonlight
数轴上$n \leq 100000$个不重叠的云,给坐标,长度都是$l$,有些云速度1,有些云速度-1,风速记为$w$,问在风速不大于$w_{max}$时,有几对云可能在0相遇.每一对云单独考虑. 多 ...
- [C++] 频谱图中 FFT快速傅里叶变换C++实现
在项目中,需要画波形频谱图,因此进行查找,不是很懂相关知识,下列代码主要是针对这篇文章. http://blog.csdn.net/xcgspring/article/details/4749075 ...