网页基本布局方式:(1)流式布局 Fluid流布局使用的是百分比,这位网页提供了很强的可塑性和流动性。通过设置百分比,我们不需要考虑设备尺寸或者屏幕宽度大小了,可以为每种情形找到一种可行的方案,因为你的设计尺寸将适应所有的设备尺寸。流布局与媒体查询和优化样式技术密切相关。(2)固定布局 Fixed在固定布局中,网页的宽度是必须指定为一个像素值,一般为960px。因为960可以整除3,4,5,6,8,10,12和15。这种布局具有很强的稳定性与可控性。但固定宽度必须考虑网站是否可以适用于不同的屏幕宽度。(3)弹性布局 Elastic弹性布局跟流布局很像,主要不同是大小单位。弹性布局的大小单位不是像素或者百分比,而是em或者rem,避免了根据px局部在高分辨率下几乎无法辨识的缺点,又相对于%百分比更加灵活,同时可以支持浏览器的字体大小调整和缩放等的正常显示,需要一段时间适应而且不易从其他布局转换过来。(4)伸缩 Flex box使用css3 Flex系列属性进行相对布局。对于富媒体和复杂排版的支持非常大,但是存在兼容性问题。(5)响应式使用@media媒体查询给不同尺寸和介质的设备切换不同的样式。优秀的响应范围设计可以给适配范围内的设备做好的体验。步骤:先完成非响应式布局,再完成响应式布局。