viewport的width值应该怎么设置

前端响应式布局中我们常见设置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是比较合适的值。

viewport的width值应该怎么设置相关推荐

关于meta name=viewport content=width=device-width, initial-scale=1.0, maximum-scale=1.0, user-sc..
网页源代码中有时候会遇到这样的一段代码: <metaname="viewport"content="width=device-width, initial-scal ...
关于meta name=viewport content=width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalabl...
网页源代码中有时候会遇到这样的一段代码: <meta name="viewport" content="width=device-width, initial-sc ...
关于＜meta name=“viewport“ content=“width=device-width,initial-scake=1.0, maximum-scale=1.0,user-s..“＞
网页源码中有时会遇到这样的一段代码: <metaname="viewport"content="width=device-width, initial-scale= ...
移动端适配时对meta name=“viewport“ content=“width=device-width,initial-scale=1.0“的理解
viewport的概念 viewport就是设备的屏幕上能用来显示我们的网页的那一块区域. content属性值 <meta name="viewport" content= ...
meta name=viewport content=width=device-width,initial-scale=1.0 究竟什么意思
meta name="viewport" content="width=device-width,initial-scale=1.0" 解释 <meta ...
head中meta name=viewport content=width=device-width,initical-scale=1的作用
<meta name="viewport" content="width=device-width,initical-scale=1"的作用> co ...
＜ meta name=“viewport“ content=“width=device-width, initial-scale=1.0“＞的解释
< meta name="viewport" content="width=device-width, initial-scale=1.0"> me ...
理解CSS3 max/min-content及fit-content等width值
1. CSS2.1的尺寸体系在CSS2.1的世界中,常见的尺寸分为这几类: 2.1 充分利用可用空间.例如,一些div元素默认宽度100%父元素,这种充分利用可用空间的行为就称为"fill ...
meta name=viewport content=width=device-width, initial-scale=1.0, user-scalable=no, minimum-scal
触摸屏设备IOS.Android等对网站meta的定义,经常用的时候就是复制下面几行代码... <meta http-equiv="Content-Type" content ...
【移动端适配视口viewport】移动端meta属性设置的理想视口是什么
1.看一下我的代码 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...

viewport的width值应该怎么设置

viewport的width值应该怎么设置相关推荐

最新文章

热门文章