移动web页面字体大小二
按设计稿中的字体大小设置页面字体大小(px),在手机端,因为不同设备会有不同,换算成rem单位。
rem是“font size of the root element”,可以通过这篇文章了解http://www.w3cplus.com/css3/define-font-size-with-css3-rem
以640px宽为例,设置html{ font-size: 20px; }
再把css中原来的px单位除以20,换成rem,比如120px,就写6rem
都设置完以后,这个页面是适配640的手机,那如果不是640的手机怎么办呢?在页面中加入这段脚本:
<script type="text/javascript">
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 20 * (clientWidth / 640) + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
</script>
其中docEl.style.fontSize = 20 * (clientWidth / 640) + 'px'; 中20是html中设置的font-size,640是psd中图像宽,如果psd设计的是1080的,那就换成1080.
移动web页面字体大小二的更多相关文章
- 移动web页面字体大小三
<script type="text/javascript"> (function (doc, win) { var docEl = doc.documentEleme ...
- 在前端页面中使用@font-face来显示web自定义字体【转】
本文转自W3CPLUS 的<CSS @font-face> @font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现, ...
- [转]移动端web页面使用字体的思考
一直不知道手机端用的什么字体,只是觉得类似雅黑,直到有一次设计师问到设计移动web页面该用什么字体才严肃地想起这个问题. 前人已栽树,后人我就直接转来吧…… 回想2年前刚开始接触手机项目,接到PSD稿 ...
- Response.Write()方法响应导致页面字体变大的解决办法
关于ASP.NET中用Response.Write()方法响应导致页面字体变大的解决办法 最近研究了ASP.NET,发现一个问题,比方说在页面里面有个Button,要点击以后要打开新窗口,而且 ...
- 大华摄像头WEB页面集成
对于海康.大华的摄像头web页面内的集成方式,根据浏览器类型,通常是采用以下形式: IE内核:调用ocx控件 例如: <object width="100%" height= ...
- web页面引入字体
一.常见web字体 TrueType (.ttf) Windows和Mac系统最常用的字体格式,其最大的特点就是它是由一种数学模式来进行定义的基于轮廓技术的字体,这使得它们比基于矢量的字体更容易处理, ...
- html标签被div嵌套页面字体变大的解决办法
html标签被div嵌套页面字体变大的解决办法 <div> <html> <head> <title></title> </head& ...
- base64:URL背景图片与web页面性能优化
一.base64百科 Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一,可用于在HTTP环境下传递较长的标识信息. 某人: 唉,我彻底废柴了,为何上面明明是中文,洒家却看不懂嘞,为什 ...
- 转: web 页面加载速度优化实战-100% 的飞跃提升
前言 一个网站的加载速度有多重要? 反正我相信之前来 博主网站 的人至少有 50% 在加载完成前关闭了本站. 为啥捏? 看图 首页完整加载时间 8.18s,看来能进来看博主网站的人都是真爱呀,哈哈. ...
随机推荐
- JD IPO address by liuqiangdong
Ladies and gentlemen, Good evening.I'd rather use english, not mandarin.Because during the road show ...
- codevs 2905 足球晋级
时间限制: 1 s 空间限制: 64000 KB 题目等级 : 黄金 Gold 题目描述 Description A市举行了一场足球比赛 一共有4n支队伍参加,分成n个小组(每小组4支队伍)进 ...
- python * urllib_urlopen( )
python * urllib_urlopen( ) Python urllib 库提供了一个从指定的 URL 地址获取网页数据,然后对其进行分析处理,获取想要的数据. 一.urllib模块urlop ...
- dumpkeys - 转储显示键盘翻译表
总览 (SYNOPSIS) dumpkeys [ -hilfn1 -Sshape -ccharset --help --short-info --long-info --numeric --full- ...
- xls表格 拼接字段 拼json =CONCAT("{ code:'",A2,"',","codeName: '",B2,"',","flag: '",C2,"'},")
xls表格 拼接字段 拼json =CONCAT("{ code:'",A2,"',","codeName: '",B2,"',& ...
- 关于Java的三种普通排序
首先要知道是哪几种排序 这里我们所说的是 冒泡排序,选择排序以及插入排序 然后要理解大概的排序速度 : 插入<选择<冒泡 下面是代码 大家可以拷贝自己在java环境里运行运行! publi ...
- BZOJ1232: [Usaco2008Nov]安慰奶牛cheer(最小生成树)
题意:给一个图 需要找到一个子图使得所有点都连通 然后再选择一个点做为起点 走到每个点并回到起点 每条边,每个点被经过一次就要花费一次边权.点权 题解:肯定是找一颗最小生成树嘛 然后惊奇的发现 任意选 ...
- layer层次
Core Animation的基本使用(十六) 发表于2013/08/25由juluren layer tree addSublayer: 将层追加到接受者的子层数组中. insertSublayer ...
- ios之@class
objective-c中,当一个类使用到另一个类时,并且在类的头文件中需要创建被引用的指针时, 如下面代码: A.h文件 C代码 #import "B.h" @interfac ...
- [JOYOI] 1415 西瓜种植
题目描述 笨笨种了一块西瓜地,但这块西瓜地的种植范围是一条直线的-- 笨笨在一番研究过后,得出了m个结论,这m个结论可以使他收获的西瓜最多. 笨笨的结论是这样的: 从西瓜地B处到E处至少要种植T个西瓜 ...