Question

HTML CSS代码求助：怎样让大段的文本，同时在手机和电脑浏览器中都以比较合适的字体显示。

如题：一有大段文本，字体大小设置成16px，在电脑上可以看得比较清楚。但是用手机来访问的话，字就非常小个。如果在手机上多点触控来放大页面，页面宽度又会大过手机屏幕，需要不停地左右移动才能读完一行文字。怎样写代码，可以让手机和电脑上看起来都比较OK。手机就以苹果640px宽度为例，电脑以主流笔记本1280宽度为例。非常感谢。

还发现一个问题，就算用一个限制宽度的BOX把文本装起来，在手机上显示的换行位置跟电脑上也不相同。手机上一行的字数显示的比电脑上少。这个用什么语句可以控制吗？手机上一行显示的文字再少一点，字体是不是就能变大些了。
再补充一个问题：有没有可能在手机上进行多点缩放的时候，不是放大整个页面，而是放大文字？让文字始终以屏幕边界，或是限定的像素宽度自动换行？这样就不用左右拖动页面来看了。

Answer 1

你的问题应该是：为电脑开发的网页在手机上看起来就整体变小了，需要放大和拖动才能浏览是吧？
解决方案：在你的页面中加入：<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />，viewport概念最初由苹果提出，并应用到Safari浏览器中，现在基本上所有的手机浏览器都支持这个属性了。content属性可以设置成多种值，对于你的页面需要如何设置，你可以自己研究一下viewport这个概念。

Answer 2

1. css3新增加了尺寸叫rem，这玩意是相对尺寸，手机wk内核的天下，应该是可以放心大胆用的，如果你不是很在乎电脑客户端的话可以试试

   
   

2. 有个老外写了个脚本叫：fittext.js，可以让字号根据容器大写自动变化，和上面rem是一回事，只是这个是js实现的，不像rem那样有浏览器兼容问题

   
   

3. 有个技术叫：css媒体查询，你可以设定很多条件，比如：屏幕宽320px以内，字号18px，行高1.2。屏幕宽320px-1024px，字号16px，行高1.6。

你自己选哪个方法合适，相关知识自行百度。

Answer 3

如果要针对桌面端和移动端获得一致的用户体验，前段直接用Bootstrap开发即可。