前端响应式布局中我们常见设置viewport的width=device-width。但是，当我们看到一种新的viewport设置思路的时候，我们知道viewport的width也可以设置成一个固定值。详见：《响应式布局及设计-一种新的viewport设置观点》对于这个固定的值，我们该怎么设置呢？
首先，我们先说说这个width的值，主要影响的是什么呢？根据我们以往的移动端开发经验往往网页的基础字号最难设置，要用javascript各种计算得出。在按照《响应式布局及设计-一种新的viewport设置观点》的思路设置viewport后，我们只要确定好viewport的width的值就可以用固定的基础字号大小来展现页面了。
在以往的pc端开发中我们一般设置body的基础字号为13px或者14px，现在我们希望在移动端也能沿用这个设计。于是用以下代码可以测试不同width值表现出来的页面情况了。
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=720 , user-scalable=no">
<style>
*{
margin: 0;
padding: 0;
}
body{
font-size: 14px;
}
</style>
</head>
<body>
<div style="width:94%; padding: 50px 3%; color: #111; background-color: #f1f1f1;">
这是一大段文字，用来检测viewport的width应该怎么设置才合适阅读。
这是一大段文字，用来检测viewport的width应该怎么设置才合适阅读。
这是一大段文字，用来检测viewport的width应该怎么设置才合适阅读。
这是一大段文字，用来检测viewport的width应该怎么设置才合适阅读。
这是一大段文字，用来检测viewport的width应该怎么设置才合适阅读。
这是一大段文字，用来检测viewport的width应该怎么设置才合适阅读。
这是一大段文字，用来检测viewport的width应该怎么设置才合适阅读。
这是一大段文字，用来检测viewport的width应该怎么设置才合适阅读。
这是一大段文字，用来检测viewport的width应该怎么设置才合适阅读。
这是一大段文字，用来检测viewport的width应该怎么设置才合适阅读。
这是一大段文字，用来检测viewport的width应该怎么设置才合适阅读。
这是一大段文字，用来检测viewport的width应该怎么设置才合适阅读。
这是一大段文字，用来检测viewport的width应该怎么设置才合适阅读。
</div>
</body>
</html>
还是以前的思路，我们希望设置的值，可以被2、3、4、5整除，于是我们width的值从60设置到1080。最后在一行显示20个中文字左右，并且兼顾页面细节精细度情况下我们认为720是比较合适的值。
5594
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
