Web前端开发 课件 6.6 响应式布局

静态网页设计第六章核心应用——排版布局响应式布局1什么是响应式布局？响应式布局的应用场景23响应式布局的实现媒体查询技术4响应式布局应用示例5什么是响应式布局？01什么是响应式布局？概念一种自适应多种终端设备的布局技术，主动感知设备尺寸，自动调整显示效果同一页面在不同屏幕尺寸下有不同的布局大势所趋，越来越多的网站采用响应式布局多终端的出现：PC、手机、平板、大屏……响应式布局的应用场景02响应式布局的应用场景结合响应式布局的特性，其常用场景：多终端访问的网页宽屏自动分栏横竖屏流动布局实现响应式布局的常用技术方法03实现响应式布局的常用技术方法方法说明缺点百分比（%）相对于“包含块”的计量单位随着浏览器的变化而变化1.计算困难。2.子元各个属性百分比，相对父元素的属性不唯一vw、vh、vmin和vmaxCSS3新单位，与百分比布局很相似1vw都等于视图宽度的百分之一计算困难。兼容性稍差。rem相对于根元素字体大小的计量单位适用于页面整体缩放需要动态控制根元素font-size的大小。弹性布局能让子元素自由伸缩或自动换行特别适用于宽高变化。难以实现多维度的控制网格布局能自由控制两个维度的伸缩特别适用于宽高变化不能实现特殊造型媒体查询查询不同媒体类型和屏幕尺寸，编写多套样式实现响应式布局特别适用于页面结构发生变化需要适配不同设备及其尺寸等，需要改变很多样式。JavascriptJS脚本获取浏览器信息，动态设置样式操作麻烦，代码多实际应用中，很多时候都需要混合使用多种技术方法媒体查询技术04媒体查询技术是一种通过CSS来感知媒体类型和屏幕尺寸的技术网页根据查询到的媒体信息，调配相应样式代码，实现更完美布局是目前实现响应式最主要的方法@media媒体类型and|not|only(媒体特征){/*CSS样式*/}语法all、screenprint、speechmax-width、min-widthmax-height、min-heightmax-resolution、min-resolutionaspect-ratio、orientation概念响应式布局应用示例05响应式布局应用示例示例实现屏幕尺寸变化时，调整页面内容的布局效果。162435123456响应式布局应用示例示例参考代码.container{display:grid;grid-template-columns:1fr1fr1fr;gap:15px;}.item{border:3pxsolid#80d8f8;padding:20px;}@mediascreenand(max-width:760px){.container{grid-template-columns:1fr1fr;}.item:nth-child(1),.item:nth-child(6){

grid-column:span2;}}屏宽小于760px时常规屏宽后期剪辑：理解响应式布局的基本概念，为什么需要响应式布局实现响应式布局的常用方法有哪些什么是媒体查询，如何实现媒体查询总结与思考面对不同分辨率设备灵活性强快捷解决多设备显示的适应问题缺点优点若兼容所有终端，工作量大，效率低