media响应式怎么写

响应式布局，说穿了就是用css写了好几套的样式，当屏幕大小不同的时候，读取不同的样式而已。例如：

@media screen and (max-width: 300px) {

body {

background-color:red;

}

}

和

@media screen and (min-width: 700px) {

body {

background-color:lightblue;

}

}

这两个的意思，就是当屏幕最大宽度是300的时候，body的背景是红色；当屏幕最小宽度是700的时候，body的背景是淡蓝色。在@media这个大括号中，你只要按照平常的css一样写就行了

1、学习CSS3的基础知识。

2、学习相关的媒体查询，如拼图前端框架对屏幕大小的响应方式：

@media (min-width:760px){.container{width:750px;}}

@media (min-width:1000px){.container{width:1000px;}}

@media (min-width:1200px){.container{width:1200px;}}

分别是平板、桌面、宽屏下的.container下的宽度。

3、学习下网格系统，具体可参考：结构，如下图所示：可以说这是一个很典型的博客模版结构。

一个wrapper容器包含了头部、内容、侧栏、底部。2、Meta标签 其次就需要我们针对移动设备加入这个meta标签。

告诉webkit内核浏览器初始缩放比例为1。（很多iOS和Android的浏览器都是基于webkit内核的） IE8或者更早的浏览器并不支持Media Query。

你可以使用media-queries.js或者respond.js来为IE添加Media Query支持。如果你的网站页面中用了html5文档声明，用到了很多html5标签，但是这些标签在ie9以下版本是不支持的，所以我们必须引用一个html5.js文件使得这些标签被其它低版本浏览器确认。

3、媒介查询-Media Queries 在这里马海祥就不再详细的讲正常页面下的布局如何写了。在此主要讲解下媒体查询media queries这个css的设计思路。

这个是css3的属性，也是我们这个响应式网页设计的最重要的部分。可以说是响应式设计的核心。

它根据条件告诉浏览器如何为指定视图宽度渲染页面。下面我们用CSS3的媒介查询（Media Query）特性使得网页适应不同设备，即根据设备的分辨率和缩放自动重新布局。

@media screen and (max-width: 480px) { 这里就是重新设定一些css的属性 } （1）、当浏览器视图宽度为小于等于980像素时，如下规则将会生效。基本上，我会将所有的容器宽度从像素值设置为百分比以使得容器大小自适应。

#pagwraper { width: 94%；}重新设定容器宽度为94%; #content { width: 65%; padding: 3% 4%；}重新设定内容宽度为65%; #sidebar { width: 30%；}重新设定侧边栏宽度为30% 注意这里我们用到了%，使得页面是一个流体布局。（2）、当浏览器视图宽度为小于等于700像素时，视图指定#content和#sidebar的宽度为自适应并且清除浮动，使得这些容器按全宽度显示。

#content { width: auto;float: none;margin: 20px 0;} #sidebar { display:none; width: 100%; margin: 0; float: none； } 容器宽度继承了上面94%的宽度，这个时候我们设定内容宽度为自动，使其填满外部的wraper容器。并清除其浮动样式。

这个时候的浏览的页面，可以权衡下右边侧栏的重要程度，如果觉得有必要继续在页面中显示，我们可以清除其浮动，并把宽度也设为100%，这样就在content这个容器下显示。但马海祥觉的一般情况下，在这么小的浏览窗口中，用户只想看到最主要的内容，右边侧栏成为了一个补助模块，那么可以直接把它隐藏掉。

这样可以减少页面的高度。（3）、当浏览器窗口小于等于480px的时候，一般这个就是iPhone的横向宽度。

就要将#header元素的高度设置为自适应，将h1的字体大小修改为24像素并隐藏侧边栏。首先我们设计webkit内核浏览器下禁用文字大小调整，代码如下：html { -webkit-text-size-adjust: none； } 其次就是代码的转换了，如下图所示：其实在480px宽度下的时候，整体框架布局已经不用设置，马海祥认为我们应该考虑得更多的是怎么把一个良好的页面布局展示给用户。

而在这个模式下，如果导航条有很多选项的时候，就会相互堆叠换行，那么这里我们设计成点击出下拉菜单形式，如下图所示：这里我们首先考虑在小设备窗口下header太高已经占据了大半的屏幕显示，所以这里我们重新设定下header的高度，能完整呈现出这个站点logo就可以了。在480px小设备窗口下浏览，页面内容会很长，这个时候我们要在底部加个返回页面顶部的按钮。

media是规定媒介类型的，默认是screen，此外还有

print， 输出到打印机；

projection，提交到投影机；

aural，扬声器；

braille，提交到凸字触觉感知设备；

tty，电传打字机 （使用固定的字体）；

tv，电视机；

all，所有输出设备

--

以上是传统的说明，实际上除了规定这些之外，你还可以用@media来设定不同分辨率下的不同样式形式。

比如，你设定了页面的max-width（最大宽度）为960px

在传统的用法中，不管它在什么样的分辨率下，都会这样表达。

但是你现在完全可以用media来规定，当浏览宽度大于1000px的时候，max-width为960px

而在手机，比如IP4s上，可以让其max-width为480px之类的。