依据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设计稿尺寸以及前端与设计之间协作流程的问题,内容较多,但对你的技术和工作一定有价值,欢迎阅读和点 ...
随机推荐
- Java面试——HashCode的作用原理和实例解析
,也就是说,我们先通过 HashCode来判断两个类是否存放某个桶里,但这个桶里可能有很多类,那么我们就需要再通过 equals 在这个桶里找到我们要的类. 请看下面这个例子 : public cla ...
- angular中几种加载css的方法
1.Style URLs in Metadata We can load styles from external CSS files by adding a styleUrls attribute ...
- django的rest framework框架——安装及基本使用
一.django的FBV 和 CBV 1.FBV(基于函数的视图): urlpatterns = [ url(r'^users/', views.users), ] def users(request ...
- Django中的app及mysql数据库篇(ORM操作)
Django常见命令 在Django的使用过程中需要使用命令让Django进行一些操作,例如创建Django项目.启动Django程序.创建新的APP.数据库迁移等. 创建Django项目 一把我们都 ...
- android 之 TabHost
TabHost的实现有两种方式,第一种继承TabActivity,从TabActivity中用getTabHost()方法获取TabHost.各个Tab中的内容在布局文件中定义就行了. mainAct ...
- 六丶人生苦短,我用python【第六篇】
Python基础之函数 三元运算 三元运算(三目运算),是对简单的条件语句的缩写. # 书写格式 result = 值1 if 条件 else 值2 # 如果条件成立,那么将 “值1” 赋值给resu ...
- WordPress 编辑器没有可视化
第一次安装wordpress后出现文章编辑器只有一行按钮的问题,即使我安装了其他的编辑插件也是一样只有一行, 解决方法: 原来是再Users->All Users 中勾选了Disable the ...
- shit layui & bugs
shit layui & bugs use is not useful at all! http://www.layui.com/demo/form.html layui.use([" ...
- BZOJ-1303 中位数图
先找到B的位置x,然后依次统计A[i..x-1](0<i<x)中小于B的个数,和A[x+1..i](x<i<n)中大于B的个数 最后Answer等于(左边有i个小于B的情况总数 ...
- BZOJ 1861 [Zjoi2006]Book 书架 ——Splay
[题目分析] 模板题目. 首尾两个虚拟结点,十分方便操作. [代码] #include <cstdio> #include <cstring> #include <cma ...