响应式设计

响应式设计

响应式设计
1. <meta name="viewport" content="width=device-width, initial-scale=1" />
2.网页宽度100%
3.网页根元素(html:100%)的字体为16px html{font-size:62.5%} ,则变为10px
4.CSS3媒体查询
 <link rel="stylesheet" type="text/css“ media="screen and (max-width: 400px)“ href="tinyScreen.css" />
 上面的代码意思是，若是屏幕宽度小于400像素（max-width: 400px），就加载tinyScreen.css文件。
 <link rel="stylesheet" type="text/css“ media="screen and (min-width: 400px) and (max-width: 600px)" href="smallScreen.css" />
 若是屏幕宽度在400像素到600像素之间，则加载smallScreen.css文件。

方法二：不推荐 同一个CSS文件中，也能够根据不一样的屏幕分辨率，选择应用不一样的CSS规则。
 @media screen and (max-width: 400px) {
.column {
　　　　　　float: none;
　　　　　　width:auto;
　　　　}
　#sidebar {
　　　　　　display:none;
　　　　}
　　}
 @media screen and (min-width:400px) and (max-width: 768px) {
.column {
　　　　　　float: left;
　　　　　　width:auto;
　　　　}
　#sidebar {
            float:left;
       }
}
5.响应式图片
img,object,embed {
max-width:100%;
height:auto9; /*让IE8自适应*/
}
　　图片宽100% ，再加 text-align:center;就能够居中

 

6.手机端小图标引用，官网下载
font-awesome4.2
引入css文件夹中的font-awesome.min.css
还有字体font文件
<li><a href="tel:10086"><i class="fa fa-phone fa-2x></i></a>电话</li>
<li><a href="sms:10086"><i class="fa fa-envelope fa-2x></i>短信</li>
<li><a href="http://map.baidu.com"><i class="fa fa-send fa-2x></i>地图</li>
<li><i class="fa fa-share fa-2x></i>分享</li>

7.ie低版本兼容性问题
响应式设计 pc 平板 手机 写3个css媒体查询文件
ie6 7 8不支持媒体查询，那么 直接引用pc端的css样式
<!-- [if lt IE 9]>
<link href="css/style.css" rel="stylesheet">
<![endif]-->

8.快速js 效果,官网下载demo
jquery框架SuperSlider2
引入 jquery.js SuperSlide2.js

 

横屏竖屏切换css样式

<link rel="stylesheet" media="all and (orientation:portrait)" href="indexb.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="indexa.css">