移动web页面字体大小二
2024-09-29 14:34:33
按设计稿中的字体大小设置页面字体大小(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.
最新文章
- 6.6	 Android 编译机制的变迁
- NGUI 图集生成 图片Sprite 有撕裂边的问题
- ZOJ 1016 Parencodings
- ApiCloud重新定义移动应用开发
- 常见的http头信息
- 【笨嘴拙舌WINDOWS】实践检验之剪切板查看器【Delphi】
- ubuntu 下dbus的环境搭建和使用
- Windows 如何在cmd命令行中查看、修改、删除与添加环境变量
- 基于bootstrap的datatable控件
- css圆角
- PHP学习之-1.7 注释
- dedecms 获取描述信息限制字数
- [LeetCode] 033. Search in Rotated Sorted Array (Hard) (C++)
- peewee 通俗易懂版
- matlab-双摆仿真
- SQL Server 备份到网络盘网络映射盘
- CGI,FastCGI,PHP-CGI与PHP-FPM区别详解【转】
- Nginx详解五:Nginx基础篇之HTTP请求
- 在storm中运行jar产生模拟数据的时候,遇见的问题
- PHP-不同Str 拼接方法性能对比