响应式模板手机错位？4个基础设置解决90%的问题

新手做响应式网页，经常在手机上打开错位、文字溢出、图片太大，今天说一下响应式模板最常见的几个问题和解决办法。

1. 没加viewport标签

这是最基础的，HTML的head里必须加一行viewport标签，告诉浏览器按设备宽度渲染，不然手机打开的时候，浏览器会按电脑宽度缩小页面，字特别小，还错位。加一行meta name="viewport" content="width=device-width, initial-scale=1.0"，立刻就正常了。

2. 图片太宽撑破页面

电脑上的图片宽度是1200px，手机屏幕才375px宽，直接放上去，图片会撑出屏幕，出现横向滚动条。在CSS里加一句img {max-width: 100%; height: auto;}，图片就会自动缩放到容器宽度，不会撑破页面。

3. 固定宽度元素错位

别写固定宽度，比如width: 1200px，手机上屏幕才375px，固定宽度就会超出屏幕。改成max-width，宽度100%，在电脑上最大1200px，手机上自动占满屏幕宽度，就不会错位了。

4. 文字太小

电脑上字体14px，手机上可以适当调大，用媒体查询，在小屏幕下把字体调到16px，看着不费眼。

响应式不难，把这几个基础问题解决，大部分网页在手机上就正常了。