博主最新文章
博主热门文章
AI技术研究院
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)博主最新文章
博主热门文章
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
标签：至少1个，最多5个
本文作者: 本文地址: 本文由
创作，转载请保留此声明。 所有权保留，请勿用于商业目的。
【资源一】基础知识恕不回顾
基础知识参考以下两篇博客：
【资源二】淘宝m站首页的动态实现
学习 首页的实现。
最近读到的新文章《》，和本部分有点关系。暂且加上来以供参考。（updated ）
源码进行美化、解读之后，基本布局部分的代码已经被我还原出来了：（补充：后来才发现，早就开源在上了）
!function(win, lib) {
var timer,
= win.document,
docElem = doc.documentElement,
= doc.querySelector('meta[name="viewport"]'),
flexMeta = doc.querySelector('meta[name="flexible"]'),
scale = 0,
flexible = lib.flexible || (lib.flexible = {});
// 设置了 viewport meta
if (vpMeta) {
console.warn("将根据已有的meta标签来设置缩放比例");
var initial = vpMeta.getAttribute("content").match(/initial\-scale=([\d\.]+)/);
if (initial) {
scale = parseFloat(initial[1]); // 已设置的 initialScale
dpr = parseInt(1 / scale);
// 设备像素比 devicePixelRatio
// 设置了 flexible Meta
else if (flexMeta) {
var flexMetaContent = flexMeta.getAttribute("content");
if (flexMetaContent) {
var initial = flexMetaContent.match(/initial\-dpr=([\d\.]+)/),
maximum = flexMetaContent.match(/maximum\-dpr=([\d\.]+)/);
if (initial) {
dpr = parseFloat(initial[1]);
scale = parseFloat((1 / dpr).toFixed(2));
if (maximum) {
dpr = parseFloat(maximum[1]);
scale = parseFloat((1 / dpr).toFixed(2));
// viewport 或 flexible
// meta 均未设置
if (!dpr && !scale) {
// 这里的 第一句有什么用 ?
// 和 Android 有毛关系 ?
var u = (win.navigator.appVersion.match(/android/gi), win.navigator.appVersion.match(/iphone/gi)),
_dpr = win.devicePixelR
// 所以这里似乎是将所有 Android 设备都设置为 1 了
dpr = u ? ( (_dpr &= 3 && (!dpr || dpr &= 3))
: (_dpr &= 2 && (!dpr || dpr &= 2))
scale = 1 /
docElem.setAttribute("data-dpr", dpr);
// 插入 viewport meta
if (!vpMeta) {
vpMeta = doc.createElement("meta");
vpMeta.setAttribute("name", "viewport");
vpMeta.setAttribute("content",
"initial-scale=" + scale + ", maximum-scale=" + scale + ", minimum-scale=" + scale + ", user-scalable=no");
if (docElem.firstElementChild) {
docElem.firstElementChild.appendChild(vpMeta)
var div = doc.createElement("div");
div.appendChild(vpMeta);
doc.write(div.innerHTML);
function setFontSize() {
var winWidth = docElem.getBoundingClientRect().
if (winWidth / dpr & 540) {
(winWidth = 540 * dpr);
// 根节点 fontSize 根据宽度决定
var baseSize = winWidth / 10;
docElem.style.fontSize = baseSize + "px";
flexible.rem = win.rem = baseS
// 调整窗口时重置
win.addEventListener("resize", function() {
clearTimeout(timer);
timer = setTimeout(setFontSize, 300);
}, false);
// 这一段是我自己加的
// orientationchange 时也需要重算下吧
win.addEventListener("orientationchange", function() {
clearTimeout(timer);
timer = setTimeout(setFontSize, 300);
}, false);
// pageshow
// keyword: 倒退 缓存相关
win.addEventListener("pageshow", function(e) {
if (e.persisted) {
clearTimeout(timer);
timer = setTimeout(setFontSize, 300);
}, false);
// 设置基准字体
if ("complete" === doc.readyState) {
doc.body.style.fontSize = 12 * dpr + "px";
doc.addEventListener("DOMContentLoaded", function() {
doc.body.style.fontSize = 12 * dpr + "px";
}, false);
setFontSize();
flexible.dpr = win.dpr =
flexible.refreshRem = setFontS
flexible.rem2px = function(d) {
var c = parseFloat(d) * this.
if ("string" == typeof d && d.match(/rem$/)) {
c += "px";
flexible.px2rem = function(d) {
var c = parseFloat(d) / this.
if ("string" == typeof d && d.match(/px$/)) {
c += "rem";
}(window, window.lib || (window.lib = {}));
注意：淘宝首页在iPhone4上设置的initial-scale是0.5（其他尺寸类似）。
因此，这句在iPhone4上得出的结果是640：
var winWidth = docElem.getBoundingClientRect().
正是因为淘宝这种独特的设置，使得 ios 上 1px边框的问题完美解决（1px变2px， 又被 initial-scale=0.5 缩小了一半）。
【资源三】常规情况下js根据屏幕宽度动态计算
使用js动态计算：
!(function(doc, win) {
var docEle = doc.documentElement,
evt = "onorientationchange" in window ? "orientationchange" : "resize",
fn = function() {
var width = docEle.clientW
width && (docEle.style.fontSize = 20 * (width / 320) + "px");
win.addEventListener(evt, fn, false);
doc.addEventListener("DOMContentLoaded", fn, false);
}(document, window));
【资源四】媒体查询较密集的断点
使用css3 media query 实现
@media screen and (min-width: 320px) {
html {font-size: 14}
@media screen and (min-width: 360px) {
html {font-size: 16}
@media screen and (min-width: 400px) {
html {font-size: 18}
@media screen and (min-width: 440px) {
html {font-size: 20}
@media screen and (min-width: 480px) {
html {font-size: 22}
@media screen and (min-width: 640px) {
html {font-size: 28}
【资源五】强大的单位——vw
使用单位 vw 实现动态计算。
font-size: 31.25 /* 表达式：100*100vw/320 */
不过考虑到国内兼容性的问题，还是结合媒体查询来使用比较好。（媒体查询的断点暂时是借用上面的例子）
@media screen and (min-width: 320px) {
font-size: 100
@media screen and (min-width: 360px) {
font-size: 112.5
@media screen and (min-width: 400px) {
font-size: 125
@media screen and (min-width: 440px) {
font-size: 137.5
@media screen and (min-width: 480px) {
font-size: 150
@media screen and (min-width: 640px) {
font-size: 200
font-size: 31.25
对以上种种方法的综合：
1、meta:viewport,
还是initial-scale为 1；
2、320px屏幕下，把页面根元素html的字体大小设置为50px；
3、鉴于我们拿到的设计图目前是640px宽的基准，这样我们就不用每次自己除以2了，直接在PS中量就好；
4、宽度什么的最好还是用百分比处理；涉及到高度、字体大小之类的则用rem。
eg：设计稿上，div高度为40px；那么css就是 div {height: 0.4}
结果就只剩下一步转换：设计稿上量的长度转化为小数。 50% =& 0.5
这种计算，不要太简单。。。
【方法一】纯粹css，支持calc函数的动态计算；不支持的用css媒体查询断点，优雅降级。
@media screen and (min-width: 320px) {
font-size: 50
@media screen and (min-width: 360px) {
font-size: 56
@media screen and (min-width: 400px) {
font-size: 63
@media screen and (min-width: 440px) {
font-size: 69
@media screen and (min-width: 480px) {
font-size: 75
* 做适当限制
* 大于640的屏幕 固定为100px
* 同时需要对body或者最外层wrapper做max-width: 640px的限制
@media screen and (min-width: 640px) {
font-size: 100
font-size: 15.625
font-size: 15.625
@media screen and (min-width: 640px) {
font-size: 100
【方法二】脚本动态计算
1、initial-scale 为 1；
2、在项目css中(注意不要被公共的base、common之类的影响了，资源加载顺序也是蛮重要的)，先把html的fontSize设置为 50px（或者加上媒体查询代码）, 避免加载未完成时候样式错乱;
html {font-size: 50}
/* javascript */
!(function(win, doc){
function setFontSize() {
// 获取window 宽度
// zepto实现 $(window).width()就是这么干的
var winWidth =
window.innerW
// doc.documentElement.style.fontSize = (winWidth / 640) * 100 + 'px' ;
// 640宽度以上进行限制 需要css进行配合
var size = (winWidth / 640) * 100;
doc.documentElement.style.fontSize = (size & 100 ? size : 100) + 'px' ;
var evt = 'onorientationchange' in win ? 'orientationchange' : 'resize';
var timer =
win.addEventListener(evt, function () {
clearTimeout(timer);
timer = setTimeout(setFontSize, 300);
}, false);
win.addEventListener("pageshow", function(e) {
if (e.persisted) {
clearTimeout(timer);
timer = setTimeout(setFontSize, 300);
}, false);
setFontSize();
}(window, document));
就这么愉快地结束了。。。
不知道解读了某宝首页的一点点代码，然后发在这里，会不会有什么后果。。。
==================================================
写过这篇博客之后，又陆续读过几篇关于布局的文章。
具体已经忘了，大约是大漠的文章，还有一篇应该是搜车前端的博文，另外应该还有关于手淘首页的分析的文章。
另外，自己也用rem布局实践过几个项目。
不得不说，个人觉得rem布局现在已经可以放弃了。flex布局已经很好用了，早已有之的百分比布局等稍用点心思也并不难。
这篇博客一直想改。但懒惰总是占据着我的身体。
最后再说下，字体大小自适应是错误的，字体大小自适应是错误的，字体大小自适应是错误的。
rem 布局，可以告别了。
迎接 flex 布局吧。
=========================================
这篇博客写于半年前，那时候还是个刚毕业的菜鸟。
偶尔有点想法，看了一些大牛的文章，有了这篇博客。
这也是半年来唯一一篇产出。
5k的浏览量，95收藏，13推荐，已经让我很惊讶了。
谢谢各路大神们的关注。
半年来感受到的前端大环境变化还是很大。虽然在公司没有太多变化，但眼睛总得看着世界吧。
接下来，还得继续学习。
由于手上没什么项目，一直想探索出一套自己的自动化流程，但到现在也只是积累了许多版的草稿。
nodejs方面也得有所探索，nodejs 再加上 shelljs 和 yargs 用起来是真的很爽。（鸣谢阮大神的文章）
算是年终总结了。在前端的路上继续走吧。
=========================================
一点想法：评论区的回复
媒体查询和js动态计算是两种方式。
首先，支持 CSS3 calc方法 和 rem、vw单位的浏览器下，只需要html {font-size: 15.625}这样一句就好，另外加个媒体查询限制下。
之前的一大堆密集的断点只是为了hack不支持calc或者calc的情况。其次，js动态设置html的font-size，只要浏览器支持rem单位即可。
为什么会考虑到密集的mq断点呢，因为当时还在考虑文字大小的自适应问题。
实践证明，字体大小自适应是一种错误的想法。
移动开发在必要情况的下，可以适当使用mq来调整字体大小，但做成完全自适应则是一种存在问题的做法。
因此，这里提到的 calc和vh rem配合的做法，最好只用来做布局的工作。js动态计算也是类似，更适合做布局。
Articles on responsive font:
41 收藏&&|&&380
你可能感兴趣的文章
6 收藏，648
45 收藏，8.2k
46 收藏，2.2k
本作品 保留所有权利 。未获得许可人许可前，不允许他人复制、发行、展览和表演作品。不允许他人基于该作品创作演绎作品
您好，我想请教一下。目前的设计稿大多都是750的宽度，用媒体查询的话html的font-size应该设置为多少呢？1rem又等于多少px？
您好，我想请教一下。目前的设计稿大多都是750的宽度，用媒体查询的话html的font-size应该设置为多少呢？1rem又等于多少px？
嗯，这就是内联的行内样式(style属性)和css文件中声明的属性的优先级的问题了。另外借着评论说一下最近的想法。这篇博客实际上已经过时了。一直想改，但还没想好。媒体查询和js动态计算是两种方式。首先，支持 CSS3 calc方法 和 rem、vw单位的浏览器下，只需要html {font-size: 15.625}这样一句就好，另外加个媒体查询限制下。之前的一大堆密集的断点只是为了hack不支持calc或者calc的情况。其次，js动态设置html的font-size，只要浏览器支持rem单位即可。为什么会考虑到密集的mq断点呢，因为当时还在考虑文字大小的自适应问题。实践证明，字体大小自适应是一种错误的想法。移动开发在必要情况的下，可以适当使用mq来调整字体大小，但做成完全自适应则是一种存在问题的做法。因此，这里提到的 calc和vh`rem配合的做法，最好只用来做布局的工作。js动态计算也是类似，更适合做布局。但考虑到布局现在已经有flex布局可以使用，百分比布局等稍用点心思也并不难。因此，实际上可以说，rem布局（注意我说的是布局）差不多已经可以放弃了。
嗯，这就是内联的行内样式(style属性)和css文件中声明的属性的优先级的问题了。
另外借着评论说一下最近的想法。这篇博客实际上已经过时了。一直想改，但还没想好。
媒体查询和js动态计算是两种方式。
首先，支持 ```CSS3``` ```calc```方法 和 ```rem```、```vw```单位的浏览器下，只需要```html {font-size: 15.625}```这样一句就好，另外加个媒体查询限制下。之前的一大堆密集的断点只是为了hack不支持```calc```或者```calc```的情况。
其次，js动态设置html的```font-size```，只要浏览器支持```rem```单位即可。
为什么会考虑到密集的```mq```断点呢，因为当时还在考虑文字大小的自适应问题。实践证明，字体大小自适应是一种错误的想法。移动开发在必要情况的下，可以适当使用```mq```来调整字体大小，但做成完全自适应则是一种存在问题的做法。因此，这里提到的 ```calc```和``vh``````rem```配合的做法，最好只用来做布局的工作。```js```动态计算也是类似，更适合做布局。
但考虑到布局现在已经有```flex```布局可以使用，百分比布局等稍用点心思也并不难。因此，实际上可以说，rem**布局**（注意我说的是布局）差不多已经可以放弃了。
我想问问，这个rem究竟该用在什么地方合适呢？我观察到网易手机版首页，全部用的rem,导致页面变宽的话，所有的元素都变大了。看上去非常奇怪。而rem又和%很像，所以既然rem不该用在字体上的话，rem可以用在哪些地方呢？困惑了好久。求解答~
我想问问，这个rem究竟该用在什么地方合适呢？我观察到网易手机版首页，全部用的rem,导致页面变宽的话，所有的元素都变大了。看上去非常奇怪。
而rem又和%很像，所以既然rem不该用在字体上的话，rem可以用在哪些地方呢？困惑了好久。求解答~
想不通淘宝这种自动计算rem的有什么用？之前使用百分比不也挺好的，也是弹性的吗，你能用一句话说出淘宝这个库的作用吗，以及是解决什么问题的。
想不通淘宝这种自动计算rem的有什么用？之前使用百分比不也挺好的，也是弹性的吗，你能用一句话说出淘宝这个库的作用吗，以及是解决什么问题的。
关于总结的第四条——“宽度什么的最好还是用百分比处理；涉及到高度、字体大小之类的则用rem。” 想追问下，为什么宽度不能直接使用rem来定义呢？
关于总结的第四条——“宽度什么的最好还是用百分比处理；涉及到高度、字体大小之类的则用rem。” 想追问下，为什么宽度不能直接使用rem来定义呢？
这个纯属个人观点，和我工作的实际情况有关系。使用宽度使用rem度量当然是可以的，不过有时候百分比还是更好计算，也更明了直观。。假设标准的320p宽度的页面下，html{font-size:50px}的时候，元素width是25%直观还是4rem直观呢？同样，在html{font-size:50px}的情况下，是25%直观还是1.6rem比较直观呢？
这个纯属个人观点，和我工作的实际情况有关系。使用宽度使用rem度量当然是可以的，不过有时候百分比还是更好计算，也更明了直观。。假设标准的320p宽度的页面下，html{font-size:50px}的时候，元素width是25%直观还是4rem直观呢？同样，在html{font-size:50px}的情况下，是25%直观还是1.6rem比较直观呢？
哦，原来是这样，明白你的想法。这里再探讨一个问题，就是你假设的320p宽度标准的页面，因为我实际开发当中用的是640p的宽度标准，定义html{font-size:100px}，换算过来1rem就相当于100px，相对也很好理解。你这边开发假定的宽度是320p，是出于某些方面的考虑，还是习惯问题呀！（如果问题脑残，还望见谅）
哦，原来是这样，明白你的想法。
这里再探讨一个问题，就是你假设的320p宽度标准的页面，因为我实际开发当中用的是640p的宽度标准，定义html{font-size:100px}，换算过来1rem就相当于100px，相对也很好理解。
你这边开发假定的宽度是320p，是出于某些方面的考虑，还是习惯问题呀！（如果问题脑残，还望见谅）
嗯，我现在在开发过程中，拿到的设计稿一般都是640宽的，psd转换为 html+css 的时候我们是按照320来做的（用css像素来度量的话，iPhone4、iPhone4都是这个尺寸）。在没有使用rem而是直接把字体、高度之类的写死的时候，在ps中量出来宽高、字体什么的每次都得手动除以2再写到css中。。现在我设定的基准是320下面html{font-size:50px}，主要是方便每次在ps中测量完了之后不用除以2，纯粹是为了偷懒（懒到就算用了scss之类的我也不愿写 a {font-size: 28px/2;} 这样的表达式）。。就是酱紫。。见笑。。
嗯，我现在在开发过程中，拿到的设计稿一般都是640宽的，psd转换为 html+css 的时候我们是按照320来做的（用css像素来度量的话，iPhone4、iPhone4都是这个尺寸）。在没有使用rem而是直接把字体、高度之类的写死的时候，在ps中量出来宽高、字体什么的每次都得手动除以2再写到css中。。现在我设定的基准是320下面html{font-size:50px}，主要是方便每次在ps中测量完了之后不用除以2，纯粹是为了偷懒（懒到就算用了scss之类的我也不愿写 a {font-size: 28px/2;} 这样的表达式）。。就是酱紫。。见笑。。
如何像某宝那样，设置一个最大宽度，当屏幕超过这个宽度，则按照这个最大宽度来计算rem大小呢？
如何像某宝那样，设置一个最大宽度，当屏幕超过这个宽度，则按照这个最大宽度来计算rem大小呢？
css方面，mq按下不表。js方面，在setFontSize函数中，对屏幕宽度winWidth进行判断即可。
var winWidth =
window.innerW
var size = (winWidth / 640) * 100;
// 以 640 为例
doc.documentElement.style.fontSize = (size & 100 ? size : 100) + 'px' ;
不知是这个意思否？
css方面，```mq```按下不表。
js方面，在```setFontSize```函数中，对屏幕宽度```winWidth```进行判断即可。
```javascript
var winWidth =
window.innerW
var size = (winWidth / 640) * 100;
// 以 640 为例
doc.documentElement.style.fontSize = (size & 100 ? size : 100) + 'px' ;
不知是这个意思否？
对！是的，还想请问下脚本动态计算的js，html似乎会自动生成一个 font-size ，我插入媒体查询，但是好像无效，这是为啥？原谅我这低级的问题 - -
对！是的，还想请问下脚本动态计算的js，html似乎会自动生成一个 font-size ，我插入媒体查询，但是好像无效，这是为啥？原谅我这低级的问题 - -
那我这样理解对不对..如果做移动端适应的话，还是rem，布局的话用flex。
那我这样理解对不对..
如果做移动端适应的话，还是rem，布局的话用flex。
嗯，flex布局还是比较有前景的，方便很多。字体如果你需要自适应，还是可以用rem的，不过一般情况下几个媒体查询也就够用了。
嗯，flex布局还是比较有前景的，方便很多。字体如果你需要自适应，还是可以用rem的，不过一般情况下几个媒体查询也就够用了。
用总结里的 方法二 以750px 为列子 应该怎样设置了html的font-size下面一窜判断是否需要变更var size = (winWidth / 640) * 100;
doc.documentElement.style.fontSize = (size & 100 ? size : 100) + 'px' ;
改成html{font-size:100}var size = (winWidth / 750) * 100;在微信上是OK
但是在浏览器上一刷新就 乱了
用总结里的 方法二 以750px 为列子 应该怎样设置了html的font-size
下面一窜判断是否需要变更
var size = (winWidth / 640) * 100;
doc.documentElement.style.fontSize = (size & 100 ? size : 100) + 'px' ;
html{font-size:100}
var size = (winWidth / 750) * 100;
在微信上是OK
但是在浏览器上一刷新就 乱了
按道理来说，确实是应该改的。。至于您说的样式错乱的问题，我暂时没有注意到，能否提供下demo代码？对了，刚写了个， 您可以看一下。。
按道理来说，确实是应该改的。。至于您说的样式错乱的问题，我暂时没有注意到，能否提供下demo代码？对了，刚写了个[demo](http://sandbox.runjs.cn/show/jrunbz67)， 您可以看一下。。
看了下你的demo微信打开是也OK的
但是用Safari打开已然错乱 ps我的是ip6 plus 还有一台三星机都一个样
看了下你的demo微信打开是也OK的
但是用Safari打开已然错乱 ps我的是ip6 plus 还有一台三星机都一个样
文蔺，你好！我们是苏州一个创业团队，在找Angular开发人员，能加下我的微信认识一下吗？我的微信号是woodtown，谢谢！
文蔺，你好！我们是苏州一个创业团队，在找Angular开发人员，能加下我的微信认识一下吗？我的微信号是woodtown，谢谢！
诚然flex有很多优点，但是不可避免的兼容，rem还是有他的优点和使用范围的，而不是一味的所有东西全部使用ren。还是需要根据业务需求，场景，考虑使用哪种方案
诚然flex有很多优点，但是不可避免的兼容，rem还是有他的优点和使用范围的，而不是一味的所有东西全部使用ren。还是需要根据业务需求，场景，考虑使用哪种方案
最终还是要根据项目的需求来决定方案
最终还是要根据项目的需求来决定方案
分享到微博？
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。一般移动端页面怎么适配ios页面_百度知道
一般移动端页面怎么适配ios页面
我有更好的答案
1、viewport 简单粗暴的方式：&meta name=&viewport& content=&width=320,maximum-scale=1.3,user-scalable=no&&直接设置viewport为320px的1.3倍，将页面放大1.3倍。为什么是1.3？目前大部分页面都是以320px为基准的布局，而iphone6的宽度比是375/320 = 1.171875，iphone6+则是 414/320 = 1.29375那么以1.29倍也就约等于1.3了。2、ip6+ 的CSS media query@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){
/*iphone 6*/}@media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3){
/*iphone 6 plus*/}PS: 也可以直接使用实际的device-width：如 device-width : 375px在原有页面的基础上，再针对相应的屏幕大小单独写样式做适配。3、REM布局REM是CSS3新增的一种单位，并且移动端的支持度很高，android2.x+，ios5+ 都支持。REM是相对于dom结构的根元素来设置大小，也就是html这个元素。相较于em单位，rem使用上更容易理解及运用。REM与PX的换算可以查看网址： 假设，html我们设置font-size:12 也就是说12px相对于1rem，那么18px也就是 18/12 = 1.5rem。那么我们以320px的设计布局为基准，将html设置为font-size:100px，即100px = 1rem。(设置100px是为了方便计算)那么可以将大部分px单位除以100就可以直接改成rem单位了。REM如何做响应式布局？1、如果仅仅是适配ip6+设备，那么使用media query就行。伪代码如下：/*320px布局*/html{font-size: 100}body{font-size: 0.14rem /*实际相当于14px*/}/* iphone 6 */@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){
html{font-size: 117.1875}}/* iphone6 plus */@media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3){
html{font-size: 129.375}}这样，在ip6下，也就将页面内的元素放大了1.17倍，ip6+下也就是放大了1.29倍。2、如果是完全自适应，那么可以通过JS来控制。(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientW
if (!clientWidth)
docEl.style.fontSize = 100 * (clientWidth / 320) + 'px';
// Abort if browser does not support addEventListener
if (!doc.addEventListener)
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);})(document, window);页面初始化的时候计算font-size，然后再绑定resize事件。这种效果就和百分比布局一样了。
【0元入学，两周免费试听】
主营：培训【Python+人工智能，Java大数据，HTML5】
为您推荐：
其他类似问题
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。