按设计稿中的字体大小设置页面字体大小(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页面字体大小二的更多相关文章

  1. 移动web页面字体大小三

    <script type="text/javascript"> (function (doc, win) { var docEl = doc.documentEleme ...

  2. 在前端页面中使用@font-face来显示web自定义字体【转】

    本文转自W3CPLUS 的<CSS @font-face> @font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现, ...

  3. [转]移动端web页面使用字体的思考

    一直不知道手机端用的什么字体,只是觉得类似雅黑,直到有一次设计师问到设计移动web页面该用什么字体才严肃地想起这个问题. 前人已栽树,后人我就直接转来吧…… 回想2年前刚开始接触手机项目,接到PSD稿 ...

  4. Response.Write()方法响应导致页面字体变大的解决办法

    关于ASP.NET中用Response.Write()方法响应导致页面字体变大的解决办法     最近研究了ASP.NET,发现一个问题,比方说在页面里面有个Button,要点击以后要打开新窗口,而且 ...

  5. 大华摄像头WEB页面集成

    对于海康.大华的摄像头web页面内的集成方式,根据浏览器类型,通常是采用以下形式: IE内核:调用ocx控件 例如: <object width="100%" height= ...

  6. web页面引入字体

    一.常见web字体 TrueType (.ttf) Windows和Mac系统最常用的字体格式,其最大的特点就是它是由一种数学模式来进行定义的基于轮廓技术的字体,这使得它们比基于矢量的字体更容易处理, ...

  7. html标签被div嵌套页面字体变大的解决办法

    html标签被div嵌套页面字体变大的解决办法 <div> <html> <head> <title></title> </head& ...

  8. base64:URL背景图片与web页面性能优化

    一.base64百科 Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一,可用于在HTTP环境下传递较长的标识信息. 某人: 唉,我彻底废柴了,为何上面明明是中文,洒家却看不懂嘞,为什 ...

  9. 转: web 页面加载速度优化实战-100% 的飞跃提升

    前言 一个网站的加载速度有多重要? 反正我相信之前来 博主网站 的人至少有 50% 在加载完成前关闭了本站. 为啥捏? 看图 首页完整加载时间 8.18s,看来能进来看博主网站的人都是真爱呀,哈哈. ...

随机推荐

  1. NYOJ 题目42 一笔画问题

    一笔画问题 时间限制:3000 ms  |  内存限制:65535 KB 难度:4   描述 zyc从小就比较喜欢玩一些小游戏,其中就包括画一笔画,他想请你帮他写一个程序,判断一个图是否能够用一笔画下 ...

  2. SQLite – GLOB子句

    SQLite – GLOB子句 .与LIKE不同,GLOB是大小写敏感的,它遵循语法的UNIX指定以下通配符. The asterisk sign (*) The question mark (?) ...

  3. java 面试题整理

    java面试题 1.接口和抽象类的区别 抽象类 接口 抽象类中可以有默认方法 在java8之前,不能有默认方法 extends implements 抽象类中可以有构造器 接口中不能有构造器 抽象类中 ...

  4. Node.js 创建server服务器

    var http=require('http'); //引入http模块 var server=http.createServer(function(req,res){  //创建一个server r ...

  5. mysql语句中判断是否包含某字符串的方法

    当我们需要对数据做筛选和查询的时候,往往会涉及到一些限制条件的判断,今天就分享一个判断字符串的技巧. like 相信大家对like的用法肯定都很熟悉了,它可以匹配字段以某字符串开始,以某字符串结尾,包 ...

  6. xfs文件系统修复

    1. 错误描述 启动CentOS7系统,发现进步了图形界面,并报如下错误: Error getting authority: Error initializing authority: Could n ...

  7. Openstack实验笔记

    Openstack实验笔记 制作人:全心全意 Openstack:提供可靠的云部署方案及良好的扩展性 Openstack简单的说就是云操作系统,或者说是云管理平台,自身并不提供云服务,只是提供部署和管 ...

  8. 性能优化 java 24 次阅读 · 读完需要 15 分钟 0

    摘要: 技术传播的价值,不仅仅体现在通过商业化产品和开源项目来缩短我们构建应用的路径,加速业务的上线速率,也会体现在优秀程序员在工作效率提升.产品性能优化和用户体验改善等小技巧方面的分享,以提高我们的 ...

  9. 前端基础之CSS_2

    摘要 盒子模型 浮动 清除 溢出 定位 模态框 rgba 与 opacity透明区别  一.CCS盒子模型 margin:标签与标签之间的距离,主要用于控制标签周围间的间隔,从视觉上达到相互分开的目的 ...

  10. day15-python之变量和递归

    1.局部变量与全局变量 #!/usr/bin/env python # -*- coding:utf-8 -*- # name='lhf' # def change_name(): # global ...