CSS--响应式布局

常见布局

固定布局

主要内容区域基本是固定的尺寸，再水平居中

好处：布局简单：大div设置固定宽度，利用margin:0 auto; 水平居中

缺点：无适应性（对移动端不友好）；会有滚动条；

流式布局

原理：主要内容区域以百分比来代替固定像素，不同的屏幕会有不同的表现，但是无论宽度怎么变换，页面布局不会发生变化。

好处：对不同宽度有一定适应性

缺点：当屏幕宽度足够小，导致内容无法查看

响应式布局

原理：利用媒体查询技术，实现当使用不同设备时可以采用不同的css样式。即一套代码，多端使用，同时保证无论哪种设备进行访问，都有良好的用户体验。

好处：

支持不同屏幕，有很好的适应性

良好额用户体验

缺点：

大量css代码

移动端布局

针对移动端，单独的开发一套HTML和CSS代码。其中使用了大量的css3的长度单位来实现。实际效果可能跟pc端完全不一样。

好处：移动端有极好的用户体验

缺点：pc和移动端是单独的，代码量极大。

基本概念

媒体指的各种设备，比如电视、手机、电脑、打印机等设备。查询要检查当前是属于什么设备。

媒体查询是指检测当前是哪种设备，采用对应的css代码，能够实现不同的设备有不同的用户体验（页面效果）

响应式布局：是指利用媒体查询技术来实现不同设备都有良好用户体验的一种页面布局方式。核心在于媒体查询。

技术：媒体查询+弹性布局（可选）

基本语法

@media 设备类型{

当前设备满足要求后会使用的css代码

}

媒体类型

主要的设备分类以及对应的代码：

值 设备类型

All 所有设备

Print 打印设备

Screen 电脑显示器（彩色屏幕，日常接触的都是这个或打印机）

Braille 盲人用点字法触觉回馈设备

Embossed 盲文打印机

Handhelp 便携设备

Projection 投影设备

Speech 语音或者音频合成器

Tv 电视类型设备

Try 电传打印机或者终端

媒体特征

背景：

因为pc和移动端都属于screen设备类型，所有我们需要对其进行区分。

概念：

媒体特性指的是媒体设备的特征，比如说屏幕的宽高、是否横屏等。

我们可以利用媒体的特性（比如宽高）来区分是pc端还是移动端。

媒体常见特性：

width

height

min-width：最小支持的宽度

min-height

max-width

max-height

orientation：portrait(竖屏模式）/landscape(横屏模式）

语法：

@media 设备类型 and（媒体特性：数值）{

设备满足要求会使用的css代码

}

媒体查询关键字

not

and：并且

，：或者。两边的条件是相互独立（包括设备类型）

only：只用于某种设备

响应式布局一般思路

1. 先利用div+css以及弹性布局将pc端实现出来
2. 找到合适的样式切换宽度，利用媒体查询进行切换
3. 再针对移动端写一套css代码将pc端的给覆盖掉（注意css权重问题）