很多刚入行或者自己折腾建站的朋友，最头疼的就是这破网页在手机上显示不全。左边空一大块，右边字被切掉，看着就心烦。其实这事儿真没那么玄乎，但如果你还在用那种十几年前的老式布局，那确实得改改思路了。

咱们今天不扯那些虚头巴脑的理论，就说说在VS（Visual Studio）或者类似的编辑器里，怎么让网页乖乖听话，手机电脑都能看。

首先，你得检查标签里有没有这一行代码，这是入场券。

很多小白漏写这个，或者写成固定的像素值，那手机浏览器根本不知道该怎么缩放。加上这行，至少浏览器知道你的页面宽度应该跟随屏幕宽度。

接下来就是重头戏，CSS的写法。

以前咱们习惯用px写死宽度，比如div width:960px。这在电脑上看挺爽，一到手机上，960px肯定溢出啊。现在都流行用百分比或者rem，或者更高级的Flexbox布局。

我在给客户改一个企业官网的时候，就遇到过这种问题。客户原来的网站是2018年做的，全是固定宽度。我打开VS，找到CSS文件，把那些写死的px全改成max-width: 100%。

比如原来的代码是这样：

.container {

width: 1200px;

margin: 0 auto;

}

改成这样：

.container {

max-width: 1200px;

width: 100%;

margin: 0 auto;

box-sizing: border-box;

}

注意那个box-sizing: border-box，这个太重要了，不然你加个padding，宽度就爆了。

还有图片，图片也得自适应。

img {

max-width: 100%;

height: auto;

}

这样图片再大也不会把容器撑破。

不过，光靠这些还不够。真正的自适应，得靠媒体查询（Media Queries）。

@media (max-width: 768px) {

.sidebar {

display: none;

}

.main-content {

width: 100%;

}

}

这段代码的意思是，当屏幕宽度小于768像素（也就是手机竖屏）的时候，把侧边栏隐藏，主内容占满全屏。

我有个客户，是个卖茶叶的，他的网站原来侧边栏全是推荐商品，在手机上根本没法看，用户还得左右滑动才能看到主内容，转化率极低。我加了这段媒体查询后，手机端直接隐藏侧边栏，转化率提升了大概15%左右。这个数据是我自己后台看的，大概就是这么个趋势，具体数字没细算，反正就是变好了。

另外，VS里有个工具叫Live Server，装个插件，改完代码自动刷新，比手动F5快多了。

还有个小坑，就是字体大小。

有些人在电脑上看着字体挺大，挺清楚，手机上看着跟蚂蚁似的。这时候要用rem或者em，或者直接用vw单位。

font-size: 2vw;

这样字体大小会跟随屏幕宽度变化，不过这个得慎用，太小了看不清，太大了又占地方。一般建议最小14px或者16px。

最后，测试一定要多测几个设备。

别光靠浏览器缩放，那个不准。真得拿手机看，或者用Chrome浏览器的开发者工具，模拟各种手机型号。

我见过有人只测iPhone 6，结果华为Mate 30上布局全乱了。所以，多试几个分辨率，心里才有底。

总之，vs做网站怎么把网页改为自适应大小，核心就是：viewport元标签、弹性布局、媒体查询、图片自适应。这四样搞定了，基本就能应付80%的情况了。剩下的20%，看具体情况微调吧。

别指望一劳永逸，网页这东西，就像衣服，得合身才行。多调试，多测试，慢慢就熟练了。

本文关键词：vs做网站怎么把网页改为自适应大小