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. Codeforces Round #497 (Div. 2)

    Codeforces Round #497 (Div. 2) https://codeforces.com/contest/1008 A #include<bits/stdc++.h> u ...

  2. Apache ab 压力并发测试工具

    当你使用PHP(或其他编程语言)完成一个web程序的开发,并且web程序在Apache服务器上正常运行的时候,你有没有考虑过对你的Apache服务器及部署在其上的web程序进行一些压力测试呢?毕竟,真 ...

  3. 34 【kubernetes】安装手册

    全文参考了两篇中文文档: 1,https://www.cnblogs.com/RainingNight/p/using-kubeadm-to-create-a-cluster.html 2,http: ...

  4. ImportError: No module named MySQLdb问题的解决

    今天在windows上撸python代码,遇到ImportError: No module named MySQLdb的问题,遂赶紧pip install mysql-python,结果还是不行,查看 ...

  5. etcd-v2第一集

    网站:https://github.com/coreos/etcd 一些观点:https://yq.aliyun.com/articles/11035 1.etcd是键值存储仓库,配置共享和服务发现2 ...

  6. xpath&css选择器

    本文参考较多,原创基本没有,权当知识归纳. xpath并不复杂,简单的使用看完之后,及时查阅文档也是可以写出来的. 这里放上我的练手文件,大家可以参考,或者挑毛病(*^__^*) 嘻嘻-- xpath ...

  7. windbg 经典死锁调试

    代码 // Deadlock_Debug.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include "windows.h& ...

  8. selenium+java+chrome 自动化测试环境搭建

    安装jdk    (jdk 配置环境变量)    eclipse(可用免安装的) 安装谷歌浏览器 下载chorme driver (chorme driver 也要配置环境变量,将chormedriv ...

  9. SpringMCV跨域

    不在同服务器访问就会产生跨域(用其他软件编写HTML测试) 后台Controller package edu.nf.ch02.controller; import org.springframewor ...

  10. ABP框架系列之三十六:(MVC-Views-MVC视图)

    Introduction ASP.NET Boilerplate is integrated to MVC Views via Abp.Web.Mvc nuget package. You can c ...