根据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设计稿尺寸以及前端与设计之间协作流程的问题,内容较多,但对你的技术和工作一定有价值,欢迎阅读和点 ...
 
随机推荐
- python小练习1:设计这样一个函数,在桌面的文件夹上创建10个文本,以数字给它们命名。
			
python小练习1:设计这样一个函数,在桌面的文件夹上创建10个文本,以数字给它们命名. 使用for循环即可实现: for name in range(1,11): desktop_path='C: ...
 - if  else if else 语句
			
适合在程序中,实现多条件的判断 编写格式: if(条件){ if 执行体 }else if(条件){ if 执行体 }else if(条件){ if 执行体 }else{ else的执行体 } 当if ...
 - ubuntu中运行java程序
			
查找jdk rivsidn@rivsidn:~/demo/java$ sudo apt-cache search jdk default-jdk - Standard Java or Java com ...
 - android开发笔记(3)
			
在android环境开发过程中,我最陌生的是虚拟机的创建以及使用,下面是虚拟机的创建以及使用过程. 创建虚拟机: 点击创建虚拟机的按钮,create->填写虚拟机相关的信息,确认之后创建. 创建 ...
 - 使用注解配置Spring
			
使用注解配置Spring 1.为主配置文件引入新的命名空间(约束) 2.开启使用注解代理配置文件 3.在类中使用注解完成配置 将对象注册到容器 修改对象的作用范围 值类型注入 引用类型注入 注意: 初 ...
 - MySQL中Decimal类型和Float Double等区别
			
MySQL中存在float,double等非标准数据类型,也有decimal这种标准数据类型. 其区别在于,float,double等非标准类型,在DB中保存的是近似值,而Decimal则以字符串的形 ...
 - 用Rider写一个由Autofac管理资源的WebAPI应用程序
			
一:步骤和上一篇创建控制台项目一样,不过这次选择的是.net core区域下的Asp.net web application,Type里选择Web API(Web API类似java里的SpringB ...
 - linux下使用eclipse打开esp32工程文件,并进行编译下载。
			
在之前的文章中,已经讲过将esp-idf 运用linux自带的工具下载,但是为了开发的系统性,这里运用eclipse来对idf进行整体的编译. 首先 cd /esp32 运行eclipse,将work ...
 - 【转】UniGUI Session管理說明
			
[转]UniGUI Session管理說明 (2015-12-29 15:41:15) 转载▼ 分类: uniGUI 台中cmj朋友在uniGUI中文社区QQ群里发布的,转贴至此. UniGUI ...
 - 说说xgboost算法
			
xgboost算法最近真是越来越火,趁着这个浪头,我们在最近一次的精准营销活动中,也使用了xgboost算法对某产品签约行为进行预测和营销,取得了不错的效果.说到xgboost,不得不说它的两大优势, ...