常见布局

固定布局

原理：主要内容区域基本都是固定像素（比如960-1200px），水平居中，两边自适应。
一般应用于pc端，中间内容固定，两边自适应（margin：0 auto），从psd原稿分析网页结构，中间内容居中，两边在设计过程中自适应。
好处：
布局简单，大div设置一个固定宽度，设置margin：0 auto水平居中。
缺点：
无适应性（对移动端不友好）；
产生水平滚动条。

流式布局

原理：为了适应不同的屏幕，主要内容区域是以百分比代替固定像素，不同的屏幕会有不同的页面效果，有良好的适应性。
一般用于移动端较多。
好处：
支持不同的屏幕，有很好的适应性。
良好的用户体验。
缺点：
当屏幕宽度足够小时，导致内容无法查看。

响应式布局

原理：利用媒体查询技术，实现当不同的屏幕采用不同的css代码，即一套HTML代码，多种css样式，多端使用。
好处：
很好的适应，不同的屏幕有不同的页面效果。
特别好的用户体验。
缺点：
大量css代码，开发难度比较大，维护性下降。

移动端布局

原理：专门针对移动端设计一套HTML和css代码，移动端一套代码，pc端是单独的一套代码。
好处：
移动端有极好的用户体验。
缺点：
pc端和移动端相互独立，代码量比较大。
注意：
如果网页的布局比较简单，可以采用响应式布局；
如果网页的布局比较复杂，移动端和pc端页面效果差距比较大，采用移动端布局。

媒体查询

媒体：在网页中媒体是指各种设备，比如电视、手机、ipad、电脑等等。
查询：检测当前屏幕属于哪种设备，以及属于哪种类型，根据这些信息采用不同的css代码。

基本语法

在引入css文件时规定css样式的作用范围。

<link rel="stylesheet" href="css/style.css" media="媒体类型">

在css语法中规定css样式作用范围

<style>
  @media 媒体类型 {
  选择器 {
          css样式代码；
          }
       }
</style>

媒体类型

可以将不同的设备进行分类，可以针对不同的设备执行不同的css代码。

媒体特性

媒体特性是指媒体设置的特性，用来描述设备的特点，比如宽度、高度、最大最小的宽度等等。
常见媒体特性：

媒体关键字

用于媒体特性的连接词，可以将多个媒体特性关联在一起。
and：代表并且的意思，前后条件必须同时满足。

@media screen and (width:320px) {
     .box {
           background-color:red;
           }
       }

not：代表非，不是的意思，否定媒体特性。

@media not screen and (width:320px) {
    .box {
          background-color:red;
          }
      }

, ：代表或者的意思，逗号前后满足一个条件即可。

@media screen and (width:320px), print and (min-width:750px) {
    .box {
           background-color:red;
           }
      }

注意：逗号前后的设备是相互独立的。
only：代表仅仅的意思，就是修饰，强调。

@media only screen and (width:320px) {
    .box {
          background-color:red;
          }
     }

only在早期用于某些浏览才能识别，可以检测哪些浏览可以使用，哪些不能作用的css样式，目前的浏览没有什么限制。