创建响应式布局是通过CSS媒体查询实现的,媒体查询可以根据屏幕宽度和其他参数来确定应该应用哪些样式。 在创建响应式布局时,可以使用多种技术,包括:
弹性布局(Flexible Box Layout 或 Flexbox)可以帮助我们设计自适应页面元素并控制它们的对齐方式和位置。关键字:Flexbox。
网格布局(Grid Layout)使得我们可以在网页上按栅格排列元素,可同时控制行和列的大小。Grid layout 自动生成间隔还能具有自动对齐功能,与其他CSS板块一起使用增强了灵活性。关键字:Grid。
CSS单位(rem, em, %) 可以根据设备屏幕正常缩放而进行相应调整。特别的em单位会随着父元素的字体大小而变化,可以让页面根据屏幕大小和字体大小自动调整。关键字:CSS单位。
利用媒体查询(Media Queries),加载不同的CSS文件可以根据不同设备尺寸载入不同CSS。也可以利用媒体查询设置元素的不同样式。关键字:Media Queries。
CSS3提供的 多背景(background-size、background-position)属性也可以根据屏幕大小等因素调整元素的背景图片位置和大小。关键字:多背景。
综上可发现,创建响应式布局的一种方式是使用CSS3技术(CSS3 Flexbox、Grid布局)以及媒体查询调整适当的CSS单元(单位、多重背景等)来自动缩放页面和元素。