依据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设计稿尺寸以及前端与设计之间协作流程的问题,内容较多,但对你的技术和工作一定有价值,欢迎阅读和点 ...
随机推荐
- Codeforces Round #204 (Div. 2)
D. Jeff and Furik time limit per test 1 second memory limit per test 256 megabytes input standard in ...
- 2017 Wuhan University Programming Contest (Online Round) D. Events,线段树区间更新+最值查询!
D. Events 线段树区间更新查询区间历史最小值,看似很简单的题意写了两天才写出来. 题意:n个数,Q次操作,每次操作对一个区间[l,r]的数同时加上C,然后输出这段区间的历史最小值. 思路:在线 ...
- PTA 08-图8 How Long Does It Take (25分)
题目地址 https://pta.patest.cn/pta/test/16/exam/4/question/674 5-12 How Long Does It Take (25分) Given ...
- AS创建工程结构
- Codeforces 545E. Paths and Trees[最短路+贪心]
[题目大意] 题目将从某点出发的所有最短路方案中,选择边权和最小的最短路方案,称为最短生成树. 题目要求一颗最短生成树,输出总边权和与选取边的编号.[题意分析] 比如下面的数据: 5 5 1 2 2 ...
- 刷题总结——系列维护(ssoi)
题目: 题解: 题解如上图,至于计算大于s的数字的数量和小于s数字的和用权值线段树或者树状数组维护就行了···注意离散化 另外发现cout和puts比printf快好多····· 代码: #inclu ...
- 洛谷 [P2148] E&G
SG函数的应用 首先每一组都是独立的,所以我们可以求出每一组的SG值异或出来. 那么怎么求每一组的SG值呢,网上的题解都是打表找规律,但其实这个规律是可以证明的 先看规律: x为奇数,y为奇数:SG= ...
- angular中关于自定义指令——repeat渲染完成后执行动作
业务中有时需要在异步获取数据并用ng-repeat遍历渲染完页面后执行某个操作,angular本身并没有提供监听ng-repeat渲染完成的指令,所以需要自己动手写.有经验的同学都应该知道,在ng-r ...
- Java面试题集(七)--Spring常见面试问题【重要】
以下为spring常见面试问题: 1.什么是Spring框架?Spring框架有哪些主要模块? Spring框架是一个为Java应用程序的开发提供了综合.广泛的基础性支持的Java平台. Spring ...
- apxs添加apache模块
根phpize很类似,可以用apxs为Apache打模块: 要使用apxs,你的平台必须支持DSO特性, 而且Apache的httpd必须内建了mod_so模块.查看一下 httpd -l | gre ...