如何实现HTML/CSS网站的屏幕/浏览器尺寸自适应？高中生项目咨询

嘿，作为刚接触HTML/CSS的高中生，能完成基本网站已经超棒啦！针对你问的自适应问题，我给你整理几个最适合你的方案：

1. 原生CSS方案：@media媒体查询（最推荐，无依赖） #

这是实现响应式最基础也最核心的方法，不需要任何插件，完全靠CSS就能搞定，非常适合新手理解原理。

首先，你必须先在HTML的<head>里加上viewport meta标签，这是移动端自适应的基础：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

它的作用是让浏览器以设备的实际宽度来渲染页面，而不是缩放显示。

然后就可以用你提到的@media规则来针对不同屏幕尺寸调整样式了，比如你写的例子：

@media screen and (max-width: 1310px) {
  .container1 {
    width: 50%;
  }
  .main {
    width: 50%;
  }
}

你可以根据不同的断点（比如手机端max-width:768px，平板max-width:1024px）来设置对应的样式，比如把导航栏改成堆叠布局、调整字体大小、隐藏不必要的元素等。

另外搭配相对单位（比如%、rem、em）代替固定的px，元素会更灵活地适应屏幕，比如width: 80%比width: 1200px更能适配不同尺寸。

2. 简便工具：CSS响应式框架（快速实现） #

如果你想更快搞定，不想写太多@media代码，可以用现成的CSS框架，比如Bootstrap或者Tailwind CSS。这些框架已经内置了大量响应式类，比如Bootstrap里的col-md-6（中等屏幕占6列）、d-none d-md-block（小屏幕隐藏，中等屏幕显示），直接给HTML元素加类就能实现自适应，不用自己写复杂的媒体查询。

不过注意：如果你的项目是为了学习HTML/CSS，建议先把原生@media的原理搞清楚再用框架，毕竟理解底层逻辑对以后的学习更有帮助～

3. 不推荐使用插件 #

响应式是CSS的原生能力，用插件反而会增加项目的复杂度，而且新手容易搞不清插件的逻辑，反而不利于学习。原生方法和框架完全能满足你的需求，没必要额外加插件。

额外小技巧 #

• 试试用Flexbox或Grid布局，这两种现代布局方式本身就自带响应式特性，比如display: flex; flex-wrap: wrap;能让子元素在屏幕不够时自动换行，比传统的浮动布局更省心。
• 测试时可以用浏览器的开发者工具（按F12），切换不同的设备视图，实时看页面的自适应效果。

内容的提问来源于stack exchange，提问作者mitch