web响应式设计

-----------刚才又看了下响应式设计的步骤，以前学的都忘光了（还是写的少），总结一下---------------------

1.需要加上meta标签：<meta name="viewport" content="width=device-width, initial-scale=1.0">

2.使用媒体查询（media query）来设置不同的屏幕应用样式；

两种使用方法：

1..用于使用不同样式文件：

<linkrel="stylesheet"media="mediatypeand|not|only (expressions)"href="print.css"> //在多媒体类型匹配的设备上使用该样式表

2..用于直接设定样式：

@medianot|onlymediatypeand (expressions){CSS 代码...;}

说明：对于not|only的作用不用多说，但是only需要特别说明一下：对于支持Media Queries的移动设备来说，如果存在only关键字，移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持Media Queries的设备但能够读取Media Type类型的Web浏览器，遇到only关键字时会忽略这个样式文件。

其中：

mediatype的值有print | screen | speech:print指的是打印机，screen指的是电脑屏幕，平板，智能手机，speech指的是屏幕阅读器。

媒体查询实例

1.屏幕宽度在520px和699px之间：基本都是下面这种写法

@media screen and (max-width: 699px) and (min-width: 520px) {

   body {

  

    }

}

2.这里多了个逗号，类似OR操作符：

@media screen and (max-width: 699px) and (min-width: 520px),

(min-width: 1151px) {

  body {

       

    }

}

3.使用响应式框架开发：最常用的就是bootstrap