响应式网页设计rem em设置网页字体大小自适应_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
响应式网页设计rem em设置网页字体大小自适应
上传于||暂无简介
阅读已结束，如果下载本文需要使用0下载券
想免费下载更多文档？
定制HR最喜欢的简历
你可能喜欢热门搜索：　 　 　 　 　
手机端rem布局详解rem.js
来源：未知
时间： 18:47
作者：xxadmin
[导读] 用rem来实现移动端的弹性布局是个好主意！用法如下： CSS @mediaonlyscreenand(max-width:320px),onlyscreenand(max-device-width:320px){html{font-size:10}}@mediaonlyscreenand(max-width:640px),onlyscreenand(max-device-widt...
用rem来实现移动端的弹性布局是个好主意！用法如下：CSS@media&only&screen&and&(max-width:&320px),&only&screen&and&(max-device-width:320px)&{&&&&html&{&&&&&&font-size:10
@media&only&screen&and&(max-width:&640px),&only&screen&and&(max-device-width:640px)&{&&&&html&{&&&&&&font-size:20
&&&&}}.test-div{width:&10}那么这个.test-div的宽度在320px的分辨率下会是10 * 10 = 100px, 在640下是10 * 20 = 200px，从而达到了弹性缩放的目的。但是这样做还是有2个问题：1. 随着各种新手机的发布，分辨率也碎片化了，我们无法预知将来会出现的分辨率宽度，我们不可能把所有要兼容的分辨率写到css里。2. 这样写只能做到页面适配不同的宽度，对于那种在各种屏幕上都要在一屏幕内显示的页面，就没有办法适配了。比如这种非常流行的整屏滑动页面，当屏幕宽高比小于设计稿的比例时会缩放：所以完美解决适配的问题就得靠js了，思路非常简单，判断一下当前终端的宽度（这里在安卓上有个坑，后面会说）和设计稿宽度的比例，计算出需要缩放的倍数，然后根据这个倍数值改变html的字体大小即可。如果需要横竖屏都适配，那么根据终端宽高比例较小的那一个来计算。用通俗的语言来说，如果终端屏幕比设计稿更加宽矮一些，那么久根据它和设计稿的高度比例来计算字体。思路永远是简单，实现永远是有问题需要解决的，先上代码：/leon776/setHtmlRemJAVASCRIPTconsole.time(&test&);/*
&&&&#&按照宽高比例设定html字体,&width=device-width&initial-scale=1版
&&&&#&@pargam&win&窗口window对象
&&&&#&@pargam&option{
&&&&&&designWidth:&设计稿宽度，必须
&&&&&&designHeight:&设计稿高度，不传的话则比例按照宽度来计算，可选
&&&&&&designFontSize:&设计稿宽高下用于计算的字体大小，默认20，可选
&&&&&&callback:&字体计算之后的回调函数，可选
&&&&#&return&B
&&&&#&ps:请尽量第一时间运行此js计算字体
*/!function(win,&option)&{&&var&count&=&0,&
&&&&&&designWidth&=&option.designWidth,&
&&&&&&designHeight&=&option.designHeight&||&0,&
&&&&&&designFontSize&=&option.designFontSize&||&20,&
&&&&&&callback&=&option.callback&||&null,
&&&&&&root&=&document.documentElement,
&&&&&&body&=&document.body,
&&&&&&rootWidth,&newSize,&t,&
&&&&&&root.style.width&=&100%;&&//返回root元素字体计算结果
&&function&_getNewFontSize()&{
&&&&var&scale&=&designHeight&!==&0&?&Math.min(win.innerWidth&/&designWidth,&win.innerHeight&/&designHeight)&:&win.innerWidth&/&designW&&&&return&parseInt(&scale&*&10000&*&designFontSize&)&/&10000;
&&!function&()&{
&&&&rootWidth&=&root.getBoundingClientRect().&&&&self&=&self&?&self&:&arguments.&&&&//如果此时屏幕宽度不准确，就尝试再次获取分辨率，只尝试20次，否则使用win.innerWidth计算
&&&&if(&rootWidth&!==&win.innerWidth&&&&&count&&&20&)&{
&&&&&&win.setTimeout(function&()&{
&&&&&&&&count++;&&&&&&&&self();
&&&&&&},&0);
&&&&}&else&{
&&&&&&newSize&=&_getNewFontSize();&&&&&&//如果css已经兼容当前分辨率就不管了
&&&&&&if(&newSize&+&'px'&!==&getComputedStyle(root)['font-size']&)&{
&&&&&&&&root.style.fontSize&=&newSize&+&&px&;&&&&&&&&return&callback&&&&callback(newSize);
&&}();&&//横竖屏切换的时候改变fontSize，根据需要选择使用
&&win.addEventListener(&onorientationchange&&in&window&?&&orientationchange&&:&&resize&,&function()&{
&&&&clearTimeout(t);
&&&&t&=&setTimeout(function&()&{
&&&&&&self();
&&&&},&300);
&&},&false);
}(window,&{
&&designWidth:&640,&
&&designHeight:&1136,
&&designFontSize:&20,
&&callback:&function&(argument)&{
&&&&console.timeEnd(&test&)
});然后再说几个点和问题：这段代码对viewport有要求，必须是width=device-width initial-scale=1，即窗口的大小是设备物理宽度(分辨率 / devicePixelRatio)，并且禁止缩放。另外还有一种做法就是手机淘宝的做法，窗口大小是分辨率宽度，然后缩放倍数是1/devicePixelRatio，这里暂且不讨论。就是解决安卓上的问题。经过实测，有些安卓机器，使用1的viewport，在页面刚加载的时候。不管是读取window.innerWidth，还是doc的getBoundingClientRect().width，或者是body的clientWidth，都不是设备的物理宽度。所以只好祭出黑魔法setTimeout，一试果然可以，异步100ms执行获取屏幕宽度的代码就准确了。但是这种不可控的代码让人不爽。因为width=device-width initial-scale=1，documentElement的宽度又是100%，所以当这两个值相等的时候我们可以认为目前获取到的屏幕宽度是准确的。那么使用此条件作为判断条件，不断的setTimeout(fun(){}, 0)去判断，当此条件为真时改变documentElement的字体。可以尽可能快的执行目标代码。但是又万一这两个值一直不相等又不能无限的死循环下去，所以设置了一个尝试上限，到上限之后用窗口宽度来计算（缩放比例不对的话用户起码可以看到完整的页面）。在chrome下测试，执行40次代码的平均时间是230ms，考虑到安卓机的js引擎速度，将上限设为了20。是执行时机，个人建议将这段代码放到head里，第一时间计算好html的fontSize，避免重绘。如果你有有一些跟获取dom元素尺寸相关的操作，就得放到这个计算函数的回调里面了，这时候就不能放到head里(因为运行的时候dom都还没加载)，只能放到底部或者doc的ready事件里了。最佳实践是有一个全屏的loading画面，当fontSize计算好了之后再把真正的页面展示出来。
上一篇： 下一篇：
更多文章推荐
<span style="display: padding-left:5 font-size:12 color:#FF
<span style="display: padding-left:5 font-size:12 color:#FF
<span style="display: padding-left:5 font-size:12 color:#FF
<span style="display: padding-left:5 font-size:12 color:#FF
<span style="display: padding-left:5 font-size:12 color:#FF
<span style="display: padding-left:5 font-size:12 color:#FF
<span style="display: padding-left:5 font-size:12 color:#FF
<span style="display: padding-left:5 font-size:12 color:#FF
<span style="display: padding-left:5 font-size:12 color:#FF
<span style="display: padding-left:5 font-size:12 color:#FFLeave a reply
View Sidebar
&&分类目录
Designed / Wanfor Redesigned移动端开发流行单位rem的几点看法
4727次浏览
rem单位在移动端前端开发很流行，今年我参加上海8月8号的CSS Conf 大会,好几个老师都提过了！其实我们公司很早也就用rem单位了，关于css的单位，大家请看
rem单位确实好处蛮多的，它是相对于根节点，让我们整个网站单位可以统一。还可以让我们的字体更好的自适应网站的大小。但是，你用过了就知道，它会出现一个问题：
用Chrome浏览器打开你做的网站的时候，有时候会出现字体很大的情况。但是刷新一下页面就好了。
之所以会出现这种情况，原因是因为我们为了计算方便，将原本默认1rem=16px修改1rem=10px。因此，我们在html中通常做了如下设置：
html {font-size: 62.5%; /**10 ÷ 16 × 100% = 62.5%
1rem = 10px
但是呢，Chrome浏览器有时候会忽略了html的设置。于是在初始化页面的时候，出现了上面字体过大的情况，本来1.6rem应该渲染成16px的字体，却被渲染成了16*1.6=25.6px大小了。
你仔细研究会发现，出现字体过大的“元素”，通常是没有设置font-size的，元素的font-size是继承根目录的，因此，字体会变大。
因此，最佳的一种解决方案是：
在你要展现的文字父级或者其本身设置font-size
第二种解决方案：
我们在页面中添加style样式，给body设置font-size
例如把下面的代码放到 head 里面：
font-size: 1.2
期待更优方案
上面是我解决rem字体过大的方案，不知道大家有没有更加好的方案来解决这个问题。
相关文章：
关键词搜索