响应式设计-前端笔记

我的学习网址

一篇归纳的博客：响应式和自适应的区别
响应式设计网站参考：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;
}