页面适配

---

前言

这几天遇到一个需求，做自适应页面。我做了。接着说是整体布局不能改变，需要整体页面缩小。
直接懵逼，弄了好久，也查阅了很多资料。最后发现其实只需要修改一小部分地方，做个记录。

---

一、在网页代码的头部，加入一行viewport元标签

在网页的中增加以下这句话。

<meta name="viewport" content="width=device-width">

二、在body下的第一个div（包住全部内容的）

写入固定宽度

<div class="main-css">

三、具体css

代码如下（示例）：

.main-css{
    width: 1300px;
    height: auto;
    margin: 0 auto;
    text-align: left;
}

---

总结

这样就可以实现整体布局不变，但是整体页面缩放的效果。

---

贴一个大致效果图。

在不同宽度下，整体布局不变，一行不会变成两行。但是整体页面缩放了。