本章定位上一章我们已经学到页面元素会按照文档流默认排列。可以通过display改变元素的显示类型。可以通过 Flex 让一组元素横向排列和对齐。可以通过position做基础定位。到这里很多初学者第一次写出一个“像样的页面”后会产生一个新的问题为什么我在电脑上看着还行切到手机上就乱了比如电脑上三列卡片排得很好手机上却挤得看不清。导航栏在桌面端没问题到了小屏幕就挤成一团。字体在电脑上正合适到了手机上又显得太小。内容在页面里被撑得很宽甚至出现横向滚动条。这时候你就会进入前端开发里一个非常关键的主题响应式设计。这一章的目标不是让你一下子掌握所有适配技巧而是先建立最重要的基础认知响应式设计不是把页面整体缩小而是让页面根据不同屏幕重新安排布局和样式。本章学习目标学完这一章后你应该能做到理解为什么网页需要适配不同屏幕。理解什么是响应式设计以及它解决的核心问题。认识视口viewport的基础概念并知道移动端常见的meta viewport写法。掌握%、em、rem、vw、vh这些常见相对单位的基础用法。理解媒体查询的作用并会写最基础的max-width和min-width规则。能把一个简单页面从桌面布局调整为适合手机阅读的版本。学会在浏览器开发者工具里模拟不同设备观察页面变化。一、为什么网页需要适配不同屏幕先想一个很现实的问题同一个网页可能会被谁打开用台式电脑的人用笔记本的人用平板的人用手机的人这些设备的屏幕尺寸差异很大。如果你做页面时只盯着自己的电脑屏幕很可能会发生下面这些问题电脑上看着正常手机上文字太小。桌面端横向排布很多内容小屏幕根本放不下。图片太宽把页面撑出横向滚动条。按钮太小手机上很难点。这说明一个非常重要的事实网页不是只给某一种屏幕看的。1. 过去和现在的使用场景已经很不一样早些年很多网站主要在电脑上使用所以固定宽度布局比较常见。但现在大量网页访问来自手机端。很多用户甚至几乎只在手机上浏览网页。所以如果页面不能适配不同屏幕就会直接影响阅读体验操作体验页面完成度用户是否愿意继续使用2. 适配不是“高级功能”而是基础能力很多初学者会觉得“响应式设计是不是后面再说现在先把页面做出来就行”当然入门阶段先把结构和样式学会很重要。但从你开始真正写页面的那一刻起就应该慢慢建立适配意识。因为它不是锦上添花而是现代网页开发里非常基础的一部分。二、什么是响应式设计响应式设计可以先理解成一句话让同一个网页根据不同屏幕尺寸自动调整布局、尺寸和样式。这里的关键词是同一个网页不同屏幕自动调整也就是说响应式设计并不是让你为手机、平板、电脑分别写三套完全独立的页面而是尽量让一个页面有能力“自己适应环境”。1. 响应式不是“把页面整体缩小”这是最容易产生误解的地方。很多人第一次听到“适配手机”时会下意识理解成把桌面页面等比例缩小不就能塞进手机了吗但这通常并不好用。因为手机和电脑的使用方式并不一样手机屏幕窄触摸操作更常见用户阅读距离更近横向空间更珍贵所以真正的响应式设计很多时候不是“缩小”而是“重新安排”。例如电脑上三列卡片手机上改成一列电脑上横向导航手机上改成竖向排列电脑上较大的间距手机上适当收紧电脑上侧边栏和主内容并排手机上改为上下排列2. 响应式设计通常会调整什么一个页面做响应式时常见会调整这些内容布局方向元素宽度字体大小内外边距导航形式图片显示方式你可以先把响应式设计理解成页面内容不变但展示方式会根据屏幕条件发生调整。三、先认识一个关键概念视口viewport在正式讲响应式之前先要认识一个非常重要的概念视口。视口可以先理解成浏览器当前用来显示网页内容的可视区域。你看到的页面并不是“整个网页的全部内容”而是浏览器窗口当前能看到的那一块区域。在不同设备上这个可视区域大小不同电脑视口通常更宽手机视口通常更窄所以页面看起来就会不一样。1. 为什么视口概念很重要因为响应式设计本质上就是在根据“可用显示区域”调整页面。如果你不知道浏览器到底按什么宽度在渲染页面就很难理解为什么同一个页面在不同设备上表现差那么多。2. 移动端常见的meta viewport在写网页时通常会在head里加上这样一行metanameviewportcontentwidthdevice-width, initial-scale1.0/你现在先不用背后面的每个细节但要知道这行代码非常常见而且对移动端适配很重要。这里可以先这样理解widthdevice-width让页面宽度跟设备宽度对齐initial-scale1.0设置初始缩放比例3. 为什么这一行对移动端很重要如果没有这行设置移动端浏览器有时候会用一种并不符合你预期的方式去缩放页面结果可能是页面整体被压缩字体看起来很小布局判断不准确所以从这一章开始你可以把它当成响应式页面的基础配置之一。四、为什么只用固定像素很容易让页面变僵硬在刚开始学 CSS 时我们很自然会大量使用px。例如.card{width:320px;padding:20px;font-size:16px;}这当然没有问题px也是非常常用的单位。但如果整个页面所有尺寸都完全写死成固定像素就会出现一个问题页面在不同屏幕下缺少弹性。例如容器宽度固定太大小屏幕放不下字体写得太死不同场景不够灵活间距完全固定窄屏下可能显得过大所以响应式设计里我们通常会开始接触一些相对单位让页面在不同环境下更有伸缩空间。五、相对单位让页面更有弹性这一章先认识五种很常见的相对单位%emremvwvh你不需要一上来把它们都背成公式只要先知道它们各自更适合什么场景。六、%相对于父元素百分比是最容易理解的一种相对单位。例如.card{width:50%;}这表示这个元素的宽度是父元素宽度的一半。1. 百分比最常见的用途百分比特别适合做容器宽度图片宽度某些布局中的比例分配例如img{width:100%;}这表示图片宽度跟随父容器不会硬写成固定值。2. 初学者怎么理解%你可以先记成一句话%常常是在说“我占父元素的多少”。七、em相对于当前元素的字体大小em稍微比%抽象一点但也不用怕。它可以先这样理解em通常是相对于当前元素自己的字体大小来计算的。例如.card{font-size:20px;padding:1em;}这里的1em就大致等于20px。如果写padding:2em;那大致就是40px。1.em适合什么场景它常常适合用在和文字大小强相关的地方比如按钮内边距局部组件尺寸某些跟当前字号绑定的间距2. 初学阶段怎么用em你现在先知道它的核心特点就够了em会更依赖当前元素本身的字体大小。如果你暂时还觉得容易绕不要紧前期你可以更多用rem和%慢慢再回头加深对em的理解。八、rem相对于根元素字体大小rem是响应式设计里非常常见也非常实用的单位。它可以先理解成rem通常是相对于根元素也就是html的字体大小。例如html{font-size:16px;}h1{font-size:2rem;}这时1rem大约等于16px2rem大约等于32px1. 为什么rem很常用因为它更统一。如果页面很多地方都使用rem你只要调整根元素字体大小很多尺寸就能跟着成比例变化。这非常适合做字体体系间距体系基础尺寸体系2.rem和em的直观区别你可以先做一个入门级理解em更看当前元素自己rem更看整个页面的根字体大小对于初学者来说rem往往更稳定、也更容易统一管理。九、vw相对于视口宽度vw表示 viewport width也就是视口宽度。你可以先这样理解1vw大约等于当前视口宽度的 1%。例如.banner{width:100vw;}表示这个元素宽度接近整个视口宽度。1.vw常见用途它常用在横幅宽度某些跟屏幕宽度直接相关的尺寸某些大标题的自适应效果例如h1{font-size:6vw;}这会让字体随屏幕宽度变化。不过初学阶段要注意vw很灵活但不要什么地方都用否则有些尺寸可能变化过头。十、vh相对于视口高度vh表示 viewport height也就是视口高度。你可以先理解成1vh大约等于当前视口高度的 1%。例如.hero{min-height:100vh;}这表示这个区域至少和整个屏幕高度差不多高。1.vh常见用途它常用于首屏大图区域整屏欢迎页需要和窗口高度联动的区域十一、初学阶段怎么选这些单位刚接触响应式时最容易犯的错误之一就是一下子想把所有单位都用起来。其实不需要。你可以先有一个很实用的入门判断1. 容器宽度、图片宽度优先先考虑%2. 文字体系、统一间距优先先考虑rem3. 个别和视口强相关的大区域可以考虑vw vh4.px还能不能用当然还能用。响应式设计不是完全禁止px而是不要把一切都写死成固定像素。你现在可以先建立一个温和的理解不是“不要用 px”而是“该固定的固定该弹性的弹性”。十二、媒体查询是什么响应式设计里最关键的工具之一就是媒体查询。它可以先理解成一句话当屏幕满足某个条件时启用一套额外的 CSS 规则。比如当屏幕宽度小于某个值时改成手机布局当屏幕宽度大于某个值时使用桌面布局这就是媒体查询在做的事。十三、媒体查询最基础的写法最常见的写法如下media(max-width:768px){.card-list{flex-direction:column;}}你可以先这样理解media开始写一个媒体查询规则(max-width: 768px)当视口宽度小于等于768px时生效花括号里满足条件后要额外执行的样式这段代码的意思就是当屏幕宽度不超过 768px 时让卡片列表改成竖向排列。1. 为什么媒体查询这么重要因为很多响应式变化不可能只靠默认样式自动完成。例如桌面端横向排三列手机端改成竖向一列这就必须告诉浏览器在不同屏幕条件下布局规则要变。而媒体查询正是在做这件事。十四、max-width屏幕不超过某个宽度时生效这是最适合新手先掌握的一种写法。例如media(max-width:768px){.nav{flex-direction:column;}}它的意思是当屏幕宽度小于等于 768px 时把导航从横向改成纵向。1. 为什么max-width很适合入门因为它很符合新手的直觉先写桌面样式再补一个“小屏幕时怎么改”这是一种很自然的起步方式。十五、min-width屏幕至少达到某个宽度时生效另一种常见写法是media(min-width:768px){.card-list{flex-direction:row;}}它表示当屏幕宽度大于等于 768px 时启用这套规则。1. 初学阶段要不要同时学很多断点不建议一上来就学太复杂。先掌握一条最基础的思路就够了小屏和大屏会用不同布局规则媒体查询就是在切换这些规则十六、响应式设计里最常改哪些内容当页面需要适配不同屏幕时最常调整的通常不是“换一套新页面”而是下面这些基础部分。1. 布局方向最常见的调整就是桌面端横向排列手机端纵向排列例如.card-list{display:flex;gap:16px;}media(max-width:768px){.card-list{flex-direction:column;}}1. 为什么布局方向调整这么常见因为横向空间在手机上非常紧张。桌面端三列可能很舒服但放到手机上就会每列太窄内容挤压可读性变差所以很多时候最简单也最有效的做法就是改为单列布局。2. 字体大小字体大小也经常需要在不同屏幕下调整。例如.hero-title{font-size:2rem;}media(max-width:768px){.hero-title{font-size:1.5rem;}}这表示桌面端标题较大手机端适当缩小1. 为什么字体不能只按电脑看起来合适就算了因为手机端的可用宽度更小。如果标题太大可能会疯狂换行整体排版显得拥挤如果正文太小阅读体验又会很差所以字体也需要根据场景调整。3. 间距大小内边距、外边距在响应式设计里也很常调整。例如.page-main{padding:32px;}media(max-width:768px){.page-main{padding:16px;}}这表示大屏可以留更宽松的空白小屏需要适当收紧1. 为什么间距也要响应式因为手机屏幕本来就窄。如果大屏那套大留白直接照搬到小屏会导致真正能放内容的空间更少页面显得又窄又挤4. 图片和卡片宽度图片、卡片这类视觉元素也很容易在适配中出问题。比如图片宽度写死卡片固定成很大宽度在小屏幕上就可能直接撑坏布局。一个常见写法是img{max-width:100%;}这表示图片不会超过父容器宽度。卡片也常常会从固定多列改成单列或更灵活的宽度。5. 导航形式导航栏是响应式里最常见的变化区域之一。例如桌面端横向排列小屏幕改成换行、竖排或者更简化的结构初学阶段你先学会最基础的一种变化就很好桌面端横向手机端纵向。十七、一个完整的响应式小示例现在我们把前面学过的布局知识和这一章的响应式知识放到同一个页面里。1. HTML 结构!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8/metanameviewportcontentwidthdevice-width, initial-scale1.0/title响应式设计练习/titlelinkrelstylesheethref./style.css//headbodyheaderclasssite-headerh1classlogo前端学习站/h1navclassnavahref./index.html首页/aahref./articles.html文章/aahref./about.html关于/a/nav/headermainclasspage-mainsectionclassheroh2classhero-title让同一个页面适配不同屏幕/h2pclasshero-desc这一页用于练习相对单位、媒体查询和基础响应式布局。/p/sectionsectionclasscard-listarticleclasscardh3HTML/h3p先搭好页面结构。/p/articlearticleclasscardh3CSS/h3p让页面有样式和层次。/p/articlearticleclasscardh3Responsive/h3p根据屏幕大小重新安排布局。/p/article/section/main/body/html2. CSS 样式*{box-sizing:border-box;}html{font-size:16px;}body{margin:0;font-family:Arial,sans-serif;background-color:#f5f7fb;color:#333333;}.site-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;background-color:#ffffff;border-bottom:1px solid #d9e2f2;}.logo{margin:0;color:#1677ff;font-size:1.5rem;}.nav{display:flex;gap:1rem;}.nav a{color:#333333;text-decoration:none;}.page-main{padding:2rem;}.hero{margin-bottom:1.5rem;padding:1.5rem;background-color:#eaf2ff;border:1px solid #b7d4ff;}.hero-title{margin:0 0 0.75rem;font-size:2rem;}.hero-desc{margin:0;font-size:1rem;}.card-list{display:flex;gap:1rem;}.card{width:33.33%;padding:1.25rem;background-color:#ffffff;border:1px solid #d9e2f2;}/* 图片常见也会这样写避免它把父容器撑坏 */img{max-width:100%;}/* 小屏幕时重新安排布局而不是简单把整页缩小 */media(max-width:768px){.site-header{flex-direction:column;align-items:flex-start;gap:0.75rem;}.nav{flex-direction:column;gap:0.5rem;}.page-main{padding:1rem;}.hero-title{font-size:1.5rem;}.card-list{flex-direction:column;}.card{width:100%;}}这份样式最值得你观察的是桌面端导航和卡片默认横向排列。小屏幕时通过媒体查询把它们改成纵向排列。大小和间距使用了rem、%等更有弹性的单位。meta viewport和媒体查询一起配合页面才会真正按预期适配手机。十八、怎么读懂这份响应式代码如果你第一次看响应式代码最容易觉得怎么忽然多了一层media我有点乱。其实可以按这个顺序理解1. 先看默认样式默认样式通常可以先理解成“正常情况下的页面表现”。例如这里导航横向卡片横向页面留白较宽标题更大2. 再看媒体查询媒体查询的意思是当屏幕变小以后要额外改哪些地方。例如这里改了页头方向导航方向主体内边距标题字号卡片排列方式3. 最后把它理解成一句话你可以把响应式代码先想成默认先让页面正常显示再在小屏幕时覆盖掉一部分规则。这会比一上来想所有规则一起生效更容易理解。十九、浏览器里怎么模拟手机查看页面学响应式最好的方法之一不只是写代码还要真的看不同屏幕下页面长什么样。1. 打开设备模拟模式在 Chrome、Edge 这类浏览器里你可以这样操作打开网页。右键页面点击“检查”。打开开发者工具。点击设备切换按钮或者使用快捷方式进入设备模拟模式。进入后你可以看到页面被放进一个类似手机屏幕的区域里。2. 重点观察什么你在设备模拟模式里可以重点看这些问题页面有没有出现横向滚动条文字会不会太小导航有没有挤在一起卡片是不是太窄按钮和链接是否容易点击这些观察点会帮助你建立响应式判断能力。3. 为什么不能只看一种设备尺寸很多新手调响应式时只盯着一个尺寸比如只看某一款手机。这样做当然能暂时调对但不够稳。更好的方式是观察大屏观察中等宽度观察小屏这样你会慢慢建立一种更可靠的思路不是适配某一台设备而是适配一段屏幕范围。二十、新手最容易踩的坑1. 误区 1把响应式理解成整体缩放这是最常见的误解。真正的响应式更关注布局有没有重排字号是否合适间距是否合理操作是否方便而不是“看起来是不是整页都缩小了”。2. 误区 2所有宽度都写死成固定像素如果容器、卡片、图片全是固定宽度小屏幕就很容易被撑坏。你不需要彻底不用px但要开始学会在合适的地方使用%remvwvh3. 误区 3忘记写meta viewport这会直接影响移动端页面的渲染表现。所以从这一章开始写响应式页面时请尽量养成习惯metanameviewportcontentwidthdevice-width, initial-scale1.0/4. 误区 4媒体查询写了但不知道为什么没生效这种情况常见原因有断点条件没写对。浏览器宽度没有达到触发条件。你改的不是正确的元素。HTML 文件或 CSS 文件没有保存。所以不要一看到没效果就怀疑媒体查询本身先逐条排查。5. 误区 5一开始就写很多复杂断点初学阶段最容易把自己写乱的方式之一就是一下子写很多层480px576px640px768px820px992px这当然不是永远不行但对刚入门的人来说太容易失控。更稳妥的起点是先学会一个最基础的断点把桌面和小屏区别开。二十一、本章实践练习这一章非常适合把前面写过的页面拿出来做“升级改造”。1. 练习 1让旧页面适配手机和桌面从你之前写过的页面里任选一个比如自我介绍页面兴趣清单页面带导航的小页面尝试做这些调整给页面补上meta viewport让主要内容区在小屏下有更合适的内边距让横向内容在小屏下变成纵向检查是否还有横向滚动条2. 练习 2用媒体查询改造导航栏要求桌面端导航横向排列小屏幕时导航改成纵向排列小屏幕时链接之间要有足够间距建议使用media(max-width:768px){.nav{flex-direction:column;}}3. 练习 3用相对单位优化页面把页面中部分固定值尝试替换成更合适的相对单位例如把某些字号从px改成rem把某些容器宽度改成%把某些大区域高度尝试改成vh然后观察页面在不同宽度下会发生什么变化。4. 练习 4在设备模拟模式下做观察记录请打开浏览器设备模拟模式至少观察三种宽度下页面表现。建议你记录哪个位置最容易挤哪个字号最需要调整哪个区域最适合改成纵向布局有没有元素撑坏页面宽度这个练习非常重要因为它会让你从“写代码的人”慢慢变成“能主动发现适配问题的人”。二十二、学习重点提示这一章最重要的不是背很多断点数值而是建立响应式设计思维。请重点记住响应式设计不是整体缩小页面而是根据屏幕重新安排布局和样式。视口决定了浏览器当前能显示网页的区域。相对单位能让页面在不同环境下更有弹性。媒体查询是在“满足某个屏幕条件时切换规则”。最常调整的通常是布局方向、字号、间距和容器宽度。初学阶段先掌握一个基础断点思路不要急着写很复杂的多端规则。如果你只记一句话请记住响应式设计的核心不是把页面缩小而是让页面在不同屏幕下依然好读、好看、好操作。二十三、本章小结这一章我们正式从“能把页面写出来”走到了“能让页面适配不同屏幕”。你已经学习了为什么网页需要适配不同屏幕什么是响应式设计什么是视口以及为什么要写meta viewport%、em、rem、vw、vh的基础用法媒体查询的基本思路如何把导航、卡片、标题和间距做基础响应式调整这一步非常关键因为从现代前端开发角度看“页面能显示”和“页面适合在不同设备上使用”其实是两件不同层次的事。当你开始具备响应式思维你写出来的页面就会更接近真正能用的网页。二十四、课后思考题请你思考下面几个问题为什么说响应式设计不是简单地把桌面页面缩小%和rem在使用场景上你现在会怎么区分为什么媒体查询能帮助页面适配不同屏幕如果一个三列卡片布局到了手机上很拥挤你第一反应应该优先调整什么为什么只在一台手机尺寸上调通页面并不等于真正理解了响应式建议你用自己的话写下答案。只要你能把这些问题讲清楚说明你已经不只是“见过媒体查询”而是真的开始理解响应式设计了。二十五、下一章预告下一章我们会继续学习从零开始学前端 | 第九章表单基础与页面可用性到那时你会开始系统理解输入框、按钮、选择项、标签说明和错误提示这些真正和用户操作直接相关的页面内容。