移动web页面字体大小三
<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 = 64 * (clientWidth / 640) + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
</script>
其中docEl.style.fontSize = 64 * (clientWidth / 640) + 'px'
; 中64是html
中设置的font-size
,640是psd
中图像宽,也就说如果PSD
设计750px,那么这边就是75px
。你可以试一下,最后html
生效的字体大小和http://m.taobao.com 上的html
上的字体大小是一样的。
PS:第一位回答问题的仁兄,用了下你的代码。
移动web页面字体大小三的更多相关文章
- 移动web页面字体大小二
按设计稿中的字体大小设置页面字体大小(px),在手机端,因为不同设备会有不同,换算成rem单位.rem是“font size of the root element”,可以通过这篇文章了解http:/ ...
- RabbitMQ的web页面介绍(三)
一.Virtual Hosts 每一个 RabbitMQ 服务器都能创建虚拟的消息服务器,我们称之为虚拟主机 (virtual host) ,简称为vhost.每一个 vhost 本质上是一个独立的小 ...
- vue+sass实现切换字体大小
接到领导指示,用户嫌我做的页面字体太小,15px的字体叫小?领导说用户多是上了年纪的人.没办法,改吧,谁让咱是个搬砖的呢..咳咳 我寻思着这次改大了,下次用户嫌大再让改小呢?干脆给他做个选择字号的功能 ...
- HTML5移动Web开发(八)——避免文本字体大小重置
适用设备:iOS.Windows Mobile在一些移动设备上,比方说iPhone,Windows Mobile,当用户把手机切换到横屏时,浏览器会自动地重置文本字体大小.这可能会对我们造成困扰,因为 ...
- [转]移动端web页面使用字体的思考
一直不知道手机端用的什么字体,只是觉得类似雅黑,直到有一次设计师问到设计移动web页面该用什么字体才严肃地想起这个问题. 前人已栽树,后人我就直接转来吧…… 回想2年前刚开始接触手机项目,接到PSD稿 ...
- 打印web页面指定区域的三种方法
本文和大家分享一下web页面实现指定区域打印功能的三种方法,一起来看下吧. 第一种方法:使用CSS 定义一 个.noprint的class,将不打印的内容放入这个class内. 代码如下: <s ...
- 在前端页面中使用@font-face来显示web自定义字体【转】
本文转自W3CPLUS 的<CSS @font-face> @font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现, ...
- 移动端rem布局,用户调整手机字体大小或浏览器字体大小后导致页面布局出错问题
一.用户修改手机字体设置大小,影响App里打开的web页面. 手机字体设置大小,影响App的页面.Android的可以通过webview配置webview.getSettings().setTextZ ...
- eclipse环境配置,字体大小,代码智能提示,JSP页面默认字符集修改
安装好JDK后,下载Java EE解压版eclipse 1.字体大小 Windows——>Preferences——>General——>Appearance——>Colors ...
随机推荐
- c# sqlserver连接字符串
odbc: string cnnstring = @"Driver={SQL Server Native Client 11.0};Initial Catalog = sxquadb;ser ...
- 在Oracle用SQL处理以 System.currentTimeMillis
有時為了系統的需求會紀錄到毫秒(Millisecond),我們會接將得到的值寫入db,但是如果要用SQL 做時間範圍的搜尋,有以下做法( systemdate欄位存放System.currentTim ...
- powerDesigner 把name项添加到注释(comment),完美方案!
第一次写博客,分享一点经验吧,平时大家用powerDesigner的时候,pd是不会把name项默认添加到comment的,所以生成的数据库表里面也没有中文字段的注释. 我在网上查了一下.有解决方案了 ...
- Android(java)学习笔记165:开发一个多界面的应用程序之不同界面间互相传递数据(短信助手案例的优化:请求码和结果码)
1.开启界面获取返回值 (1)采用一种特殊的方式开启Activity: startActivityForResult(intent , 0): (2)在被开启的Activi ...
- 闲着蛋疼没事干,写个Mac端的Kcptun Client管理器
原理: 执行一行脚本 输入服务器地址,端口,密码等做了图形化编辑 可以控制Kcptun是否正在运行 App已上传github https://github.com/nicky2k8/KcptunCli ...
- RSA2
进行签名的加密 package com.goboosoft.common.pay.util; import java.io.ByteArrayInputStream; import java.io.I ...
- jquery--cookie应用
示例:发送手机验证码 防止页面刷新后,发送验证码按钮重置 注:橙色部分为后增加代码,为防止验证码等待期间用户退出或者切换到其他页面以至于很久之后回到当前页面倒计时还在的问题,加入时间对比,记录用户发送 ...
- CAD交互绘制直线(网页版)
用户可以在CAD控件视区任意位置绘制直线. 主要用到函数说明: _DMxDrawX::DrawLine 绘制一个直线.详细说明如下: 参数 说明 DOUBLE dX1 直线的开始点x坐标 DOUBLE ...
- 【软件构造】第三章第四节 面向对象编程OOP
第三章第四节 面向对象编程OOP 本节讲学习ADT的具体实现技术:OOP Outline OOP的基本概念 对象 类 接口 抽象类 OOP的不同特征 封装 继承与重写(override) 多态与重载( ...
- 【软件构造】第八章第三节 代码调优的设计模式和I/O
第八章第三节 代码调优的设计模式和I/O 本节学习如何通过对代码的修改,消除性能瓶颈,提高系统性能?——代码调优.面向性 能的设计模式 Outline Java调优 代码调优的概念 单例模式(Sing ...