響應式設計

響應式設計

響應式設計
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">