响应式网页手机错位？三个基础设置，做完90%问题解决

新手写响应式网页，手机上打开错位，今天说三个最基础的设置，做完90%的错位问题就解决。

1. 加viewport标签

HTML的head里必须加，告诉浏览器按设备宽度渲染，不然手机打开按电脑宽度缩小，字小得看不清。

2. 图片宽度100%

CSS里写img {max-width: 100%; height: auto;}，图片自动缩放到容器宽度，不会超出屏幕，出现横向滚动条。

3. 别用固定宽度

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

这三个设置做完，网页在手机上基本就正常了，剩下的细节慢慢调。