根据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设计稿尺寸以及前端与设计之间协作流程的问题,内容较多,但对你的技术和工作一定有价值,欢迎阅读和点 ...
随机推荐
- abp Cannot access a disposed object. A common cause of this error is disposing
框架:abp 异常信息: An unhandled exception was thrown by the application.System.ObjectDisposedException: Ca ...
- boost的下载和安装(windows版)
1 简介 boost是一个准C++标准库,相当于STL的延续和扩充,它的设计理念和STL比较接近,都是利用泛型让复用达到最大化. boost主要包含以下几个大类: 字符串及文本处理.容器.迭代器(it ...
- ipcam
ipcam也叫ip network camera,就是基于internet protocol的网络摄像机,同普通摄像头或者网眼的主要区别是ipcam实际上是一台视频服务器和摄像头的集成.ipcam只要 ...
- SPOJ - AMR11B
题目链接:https://www.spoj.com/problems/AMR11B/en/ 题目大意就是要你求图形覆盖的格点数,标记每个图形里的未标记格点(包括边界),总标记数就是覆盖的总格点数. # ...
- solr7.7.0搜索引擎使用(一)(下载安装)
一.下载安装 可以直接在官网下载地址:https://lucene.apache.org/solr/ 解压之后,目录结构如下图,bin里边提供部署的文件,contrib提供额外的jar包,docs提供 ...
- @RemoteProxy()注释 与@File注释的使用
@RemoteProxy()注释 dwr3.0可以通过全注解的方式,极大的简化了配置,所有xml配置加在一起不超过20行,而且使用更加简单,bean注入的问题也都解决.配置步骤如下: web.xml的 ...
- strftime使用%F格式化日期失败
报错:invalid format directive 解决:把%F换成%Y-%m-%d
- 深入浅出WPF文摘
第一部分 深入浅出XMAL 第一章 XMAL概览 第二章 从零起步认识XMAL 第三章 系统学习XMAL语法 第四章 X名称空间详解 第五章 控件与布局 GUI:图形化用户界面 逻辑树: 可视树: : ...
- bgfx入门练习2——找出DX,OpenGL驱动切换实现原理
找到驱动切换的代码,自然而然就要找实现的位置了,简单搜了下,原来是GLSL Shader字节码转换到HLSL字节码,正好和Klayge做了相反的工作. 时间上似乎也差不多,Klyage是2014年搞的 ...
- s4 docker 网络2进阶
多容器复杂应用的部署 基于 flask容器,链接外部另一个redis 容器 docker pull redis sudo docker run -d --name redis redis # redi ...