html部分主要是基于bootstrap的原站我发现他们写html部分的时候用的语义标签很好和规范，值得学习。比如页面头部使用header标签，导航部分使用nav，文本部分使用main标签等。这些标签的准确使用可以让我们看到页面的整体上下文。3.2css部分核心代码body{font-family:-apple-system,system-ui,BlinkMacSystemFont,"SegoeUI",Roboto,"HelveticaNeue",Arial,"PingFangSC","HiraginoSansGB","MicrosoftYaHei“，无衬线字体;背景色：#fff；字体大小：14px；行高：1.42857143；颜色：#333；}div.container{字体粗细：500；颜色：#563d7c；保证金：0自动；溢出：隐藏；填充：0px15px；@media(最小宽度:768px){宽度:750px;}@media(最小宽度:992px){宽度:970px;}@media(最小宽度:1200px){宽度:1170px;}div.nav-logo{字体大小：18px；溢出：隐藏；@media(min-width:768px){浮动：左；}a{显示：块；填充：15px；行高：20px；@media(min-width:768px){margin-left:-15px;}@media(max-width:768px){float:left}}button{@media(min-width:768px){display:none;浮动：对；填充：9px10像素；边距：8px自动；背景色：#f9f9f9；边框颜色：#f9f9f9；边框：1px实心透明；span.icon-bar{宽度：22px；高度：2px；显示：块；背景色：#563d7c；&:nth-of-type(2n){边距：4px0px；}}}}nav.nav-content{溢出：隐藏；@media(max-width:768px){clear:both;高度：0px；过渡：高度200ms线性；}ul.nav-item{@media(min-width:768px){float:left;溢出：隐藏；}li{@media(min-width:768px){填充:15px;行高：20px；向左飘浮;}a{@media(max-width:768px){显示：块；填充：10px15px；行高：20px；}}}}ul.nav-item-right{@media(min-width:768px){浮动：右吨;右边距：-15px；}}}}main.bs-docs-masthead{padding:80px0px;div.container{颜色：#fff;span{边距：0自动30px；}}.lead{@media(最小宽度:768px){宽度:80%;}@media(max-width:768px){字体大小:20px;字体大小：30px；边距：0自动30px；.btn{内边距：15px30px;字体大小：20px；宽度：自动；}}}.navbar-static-top{z-index:1000;border-width:001px;}css的核心部分是使用@mediaquery查询，请参考代码主要是在几个地方使用@mediaquery来控制不同的屏幕宽度显示不同的样式。3.3一些简单交互的实现当屏幕小于768px时，页面上会显示一个button按钮。单击该按钮时，将出现菜单，然后单击隐藏。Bootstrap封装了一个collapse类来实现这个功能。因为我用的CSS动画不多，想写一个类似的简单功能，所以这里没有使用折叠类，而是实现了一个类似的功能。js部分constnavContent=document.getElementsByClassName('nav-content')[0]constclickBtn=document.getElementsByTagName('button')[0]constcollapseHeight=document.getElementsByClassName('nav-item')[0]clickBtn.addEventListener('click',function(e){if(!parseInt(window.getComputedStyle(navContent,null).height)){navContent.style.height='304px'}else{navContent.style.height=0}})上面的代码基本可以实现一个折叠部分，但是如果仅仅这样写还远远达不到预期的效果，需要在这里加上css3animation-transition。transition会捕获css的变化，并应用动画的形式过渡变化而不是突变。这是一个非常有用的功能。下面的代码是让高度在200ms内线性变化。过渡：高度200ms线性；更多关于transition的知识点这里4.小结通过上面的小案例，我们可以大致了解什么是响应式布局。在日常开发中，响应式布局是一种比较好用的布局方式。要点是媒体查询的使用。（加上不设置绝对宽度，使用流体布局等）。以后自己开发页面的时候，一定要考虑在不同分辨率的输出设备上兼容显示的问题。这一点非常重要。