HTML5----響應式(自適應)網頁設計

如今,不少項目都須要作響應式或者自適應的來適應咱們不一樣屏幕尺寸的手機,電腦等設備,那麼就須要咱們在頁面上下功夫,下面我就來講一下如何作響應式(自適應)的網頁設計javascript

 

一、在網頁代碼的頭部,加入一行viewport元標籤css

  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">html

在網頁的<head>中增長以上這句話,可讓網頁的寬度自動適應手機屏幕的寬度,下面是這些屬性的解釋:java

  1)width=device-width :表示寬度是設備屏幕的寬度css3

  2)initial-scale=1.0:表示初始的縮放比例,1.0就是佔網頁的100%windows

  3)minimum-scale=1.0:表示最小的縮放比例svn

  4)maximum-scale=1.0:表示最大的縮放比例佈局

  5)user-scalable=no:表示用戶是否能夠調整縮放比例字體

若是要兼容IE6/7/8的話,就要用css3-mediaqueries.jsgoogle

<!--[if lt IE 9]>  
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>  
<![endif]--> 

 

二、寬度不要用絕對的

  width:auto; / width:XX%;  

 

三、字體大小是頁面默認大小的100%,即16像素,不要使用絕對大小"px",要使用相對大小「rem」

html{font-size:62.5%;}
body {font:normal 100% Arial,sans-serif;font-size:14px; font-size:1.4rem; }  

 固然搭配媒體查詢的樣式會更好,好比

  html{font-size:10px}      10px==62.5%

  @media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}

  @media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}

  @media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}

  @media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}

  @media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}

  @media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}

  @media screen and (min-width:800px){html{font-size:25px}}

 不過若是在PC端,最好用min-width,max-width,在移動端最好用min-device-width和max-device-width

四、流動佈局,"流動佈局"的含義是,各個區塊的位置都是浮動的,不是固定不變的

.left{ width:30%; float:left}  
.right{ width:70%; float:right;}

 像這樣,用左浮動和右浮動,好處是,若是寬度過小,放不下兩個元素,後面的元素會自動滾動到前面元素的下方,不會在水平方向overflow(溢出),避免了水平滾動條的出現

 

五、選擇加載CSS

"自適應網頁設計"的核心,就是CSS3引入的Media Query模塊。自動探測屏幕寬度,而後加載相應的CSS文件

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 600px)" href="style/css/css600.css" />  

 這段代碼的意思是:若是屏幕寬度小於600像素(max-device-width: 600px),就加載css600.css文件。

若是屏幕寬度在600像素到980像素之間,則加載css600-980.css文件

<link rel="stylesheet" type="text/css" media="screen and (min-width: 600px) and (max-device-width: 980px)" href="css600-980.css" />  

還有(不建議使用):除了用html標籤加載CSS文件,還能夠在現有CSS文件中加載

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

  

六、CSS的@media規則(若是有須要就寫)

@media screen and (max-device-width: 400px) {  .left{ float:none;} } 

 當屏幕寬度小於400px的時候,就取消浮動

 

七、圖片自適應,"自適應網頁設計"還必須實現圖片的自動縮放。

img {width: 100%;}  

 windows平臺縮放圖片時,可能出現圖像失真現象。這時,能夠嘗試使用IE的專有命令

img { width:100%; -ms-interpolation-mode: bicubic;}  

 或使用js--imgSizer.js 

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

  

好,這樣寫出的網頁就會自適應啦!  

相關文章
相關標籤/搜索