css 响应式布局重学笔记

1、常用的布局

        1、固定布局。以px为基本单位，不考虑设备的屏幕和尺寸。

        2、可切换的固定布局。同样以px作为单位，参考主流设备尺寸，设计几套不同宽度的布局。如移动端一套html代码，PC端一套html代码，程序区分对应的设备，加载不同的模型。

        3、弹性布局。以百分比作为页面的基本单位，可以适应一定范围内的设备屏幕和浏览器宽度。特点是一套代码，多端应用。

        4、混合布局。兼容弹性布局，同时运用混合像素作为页面单位。

        5、响应式布局。对页面进行响应式设计，使用一套代码兼容不同的屏幕和浏览器宽度。

2、响应式布局策略

        1、挤压内容。挤压中间空白的内容，已经拉长屏幕，保持布局结构不变。

        2、换行展示。页面百分比不变，多余的内容换行展示。

        3、增删。在布局不变的基础上，隐藏部分内容（删）或者将增加部分内容。

        4、位置变换。将部分内容的位置更换，使整个内容显示出来。

        5、隐藏和展开。调整布局结构，不改变内容的量的基础上，隐藏部分内容。在用户点击的时候，将隐藏的内容展开来。

3、基础知识

        1、媒体查询：@media(max-width:750px) {}

4、响应式布局的特点

        1、优点：一套代码，多端应用。

        2、缺点：代码量大，加载时间长，修改复杂。