响应式网页设计怎么写？CSS媒体查询@media实战入门

现在大家用手机看网页比用电脑还多，要是你的网站在手机上字小得看不清、按钮点不准，访客扭头就走。响应式网页设计就是解决这个问题的：一套代码，电脑、平板、手机自动适配不同屏幕。它的核心武器就一个，叫CSS媒体查询@media。今天老陈带你从零写一个能跑的响应式页面，新手也能跟着做。

一、什么是响应式网页设计

早些年做网站，电脑一套、手机一套，维护两份代码，累死人。响应式网页设计只用一套HTML和CSS，靠屏幕宽度自动调整布局和字号。好处很明显：开发快、维护省事、对SEO也友好（搜索引擎更喜欢移动友好的页面）。

二、@media媒体查询怎么写

@media 的写法很简单，基本格式是：在某个屏幕宽度条件下，套用一段CSS。比如下面这段，意思是当屏幕宽度不超过768像素时，把容器宽度设为百分百。

• max-width：屏幕小于等于某值时生效，常用于手机端样式。
• min-width：屏幕大于等于某值时生效，常用于桌面优先反过来写。
• 可以并列多个条件，用and连接，比如同时限制宽度和横竖屏。

三、实战：做一个响应式卡片

老陈给你一个最小可跑的例子。默认情况下，卡片是并排的两列；当屏幕小于768像素，就变成单列、宽度铺满。核心就是在外面套一个 @media (max-width: 768px)，在里面把布局改掉。你把它粘进一个html文件，用浏览器打开，拖动窗口大小就能看到变化。

• 外层用flex或grid做并排，给个固定或百分比宽度。
• 媒体查询里把宽度改成100%，并排自动变上下堆叠。
• 字号也可以跟着调小一点，手机上看着更舒服。

四、移动优先还是桌面优先

两种思路都能用。移动优先是先写手机样式，再用min-width往上加；桌面优先是先写电脑样式，再用max-width往下减。老陈建议新手用移动优先，因为现在手机流量大，先保证小屏没问题，再考虑大屏，不容易乱。

五、新手常踩的坑

• 忘了加那行viewport元标签，手机上页面会按电脑宽度缩放，媒体查询全失效。
• 断点乱设，一会儿600一会儿900，维护起来头大，建议统一用常见尺寸。
• 只在某一个宽度测过，换个屏幕就乱，记得多拖几遍窗口看看。

老陈总结

响应式网页设计入门不难，记住三件最关键的事：第一，头部一定要加viewport元标签，这是手机适配的总开关；第二，用@media根据屏幕宽度写不同样式，窄屏改布局、宽屏改排版；第三，养成移动优先的习惯，先小屏后大屏。今天就打开编辑器，照着上面的例子敲一遍，跑通了你就算真正入门了。想系统学网页开发的，可以看我整理的课程，或者评论区留言，老陈发你资料。