响应式设计-前端笔记

我的学习网址

一篇归纳的博客：响应式和自适应的区别
响应式设计网站参考：mediaqueri.es；
另一个响应式设计网站参考：responsive.cn
更详细周到的学习响应式：折腾响应式布局设计
悄悄经验到我的响应式学习网站（请注意它的banner）：alistapart.com

一、网页宽度初始设置

<meta name="viewport" content="width=device-width,inital-scale=1.0"/><!--[if it IE 9]>    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![end if]-->

*解释：上面的meta——网页宽度默认是屏幕宽度device-width，并且将网页原始缩放比例inital-scale设置为1.0，即网页初始大小为屏幕大小的100%；
由于IE9以下版本不支持，所以采用加载css3-mediaqueries.js的方法来解决*

二、css中的响应式设置

1、html中选择性加载css文件

<link rel="stylesheet" media="screen and (max-device-width:400px)" href="mystyle.css" />

2、css中选择加载css文件

@import url("mystyle.css") screen and(max-device-width:400px);

3、css的选择判断

@media screen and(max-device-width:400px){...css 语句 ...}

三、图片的响应式设置

1、img的响应式设置

img{     //假如图片超过了，就缩小。假如图片小了，就原尺寸输出。    width: auto;     max-width: 100%;}

2、用content元素选择加载不同分辨率的图片
用::before和::after伪元素 +content 属性来动态显示一些内容或者做其它很酷的事情，在 css3 中，任何元素都可以使用 content 属性了，这个方法就是结合 css3 的 attr 属性和 HTML 自定义属性的功能：
HTML 结构：

<img src="image.jpg"     data-src-600px="image-600px.jpg"     data-src-800px="image-800px.jpg"     alt="">

css:

@media (min-device-width:600px) {    img[data-src-600px] {        content: attr(data-src-600px, url);    }}@media (min-device-width:800px) {    img[data-src-800px] {        content: attr(data-src-800px, url);    }}

老版本IE不兼容max-width所以写成：

img { width: 100%; }

此外，windows平台缩放图片时，可能出现图像失真现象。这时，可以尝试使用IE的专有命令：

img { -ms-interpolation-mode: bicubic; }

或者，Ethan Marcotte的imgSizer.js。

　　addLoadEvent(function() {　　　　var imgs = document.getElementById("content").getElementsByTagName("img");　　　　imgSizer.collate(imgs);　　});

不过，有条件的话，最好还是根据不同大小的屏幕，加载不同分辨率的图片。有很多方法可以做到这一条，服务器端和客户端都可以实现。

打造响应式布局

我们可以监测页面布局随着不同的浏览环境而产生的变化，如果它们变的过窄过短或是过宽过长，则通过一个子级样式表来继承主样式表的设定，并专门针对某些布局结构进行样式覆写。我们来看下代码示例：

/* Default styles that will carry to the child style sheet */html,body{   background...   font...   color...}h1,h2,h3{}p, blockquote, pre, code, ol, ul{}/* Structural elements */#wrapper{    width: 80%;    margin: 0 auto;    background: #fff;    padding: 20px;}#content{    width: 54%;    float: left;    margin-right: 3%;}#sidebar-left{    width: 20%;    float: left;    margin-right: 3%;}#sidebar-right{    width: 20%;    float: left;}

下面的代码可以放在子级样式表Mobile.css中，专门针对移动设备进行样式覆写：

#wrapper{    width: 90%;}#content{    width: 100%;}#sidebar-left{    width: 100%;    clear: both;    /* Additional styling for our new layout */    border-top: 1px solid #ccc;    margin-top: 20px;}#sidebar-right{    width: 100%;    clear: both;    /* Additional styling for our new layout */    border-top: 1px solid #ccc;    margin-top: 20px;}