01-响应式布局&网页布局方式

一、响应式布局
1、什么是响应式布局？
屏幕尺寸不同展示给用户的网页内容也不同
2、响应式布局如何实现？
利用媒体查询可以检测到屏幕尺寸（主要检测宽度），并且设置不同css样式，即可实现响应式布局
3、响应式开发优缺点？
a) 一个页面可适配不同的终端
b) 产生代码体积过大各种终端的资源都会存在加载
4、什么是响应式开发？
页面在不同的终端做不同的屏幕适配显示不同的页面效果

image.png

二、网页布局方式
a、固定宽度布局：为网页设置一个固定的宽度，通常以px做为长度单位，常见于PC端网页。
b、流式布局：为网页设置一个相对的宽度，通常以百分比做为长度单位。
c、栅格化布局：将网页宽度人为的划分成均等的长度，然后排版布局时则以这些均等的长度做为度量单位，通常利用百分比做为长度单位来划分成均等的长度。
d、响应式布局：通过检测设备信息，决定网页布局方式，即用户如果采用不同的设备访问同一个网页，有可能会看到不一样的内容，一般情况下是检测设备屏幕的宽度来实现。
注：以上几种布局方式并不是独立存在的，实际开发过程中往往是相互结合使用的。