關於響應式佈局

時間 2019-11-19

標籤關於響應佈局简体版

原文原文鏈接

隨着互聯網的快速發展，以及html5+css3的迅速崛起。漸漸的響應式佈局，也會慢慢的出如今咱們的視野裏，身爲專業的web前端人員，還不學習新技術你就out啦！爲何這樣說呢？由於響應式佈局能同時兼容多個終端，好比（手機、平板、PC）作一個網站轉眼間就能夠變成3個網站，和如今相比是否是更加具備優點呢!css

可能有些人對「什麼是響應式佈局」還不是很瞭解，下面就跟你們簡單說下什麼是響應式佈局：html

響應式佈局：簡單點說，就是作一個網站同時能兼容多個終端，由一個網站轉變成多個網站，爲咱們大大節省了資源。前端

那麼響應式佈局的優勢和缺點又有哪些呢？html5

優勢：1.面對不一樣分辨率設備靈活性強css3

2.可以快捷解決多設備顯示適應問題web

缺點：不能徹底兼容全部瀏覽器，代碼累贅，加載時間加長。瀏覽器

說了這麼多，可能還有不少人，不明白響應式佈局該怎麼去作，以及它的開發原理是什麼？框架

原理：簡單點說響應式佈局它是經過CSS中Media Query（媒介查詢）@media功能，來判斷咱們的終端設備寬度在多少像素內，而後就執行與之對應的CSS樣式。佈局

下面我就以我最近作的一個簡單的響應式佈局框架爲案列給你們講講：學習

代碼以下：

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<title>響應式佈局</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
*{margin:0;padding:0;text-decoration:none;list-style:none;
 font-size:14px;font-family:"微軟雅黑";text-align:center;
 color:#fff;}
 .clear{clear:both;}
          #header,#content,#footer{margin:0 auto;margin-top:10px;}  
          #header,#footer{margin-top:10px;height:100px;}
 #header,#footer,.left,.right,.center{background:#333;}
/*通用樣式*/
 /*手機*/
@media screen and (max-width:600px){
   #header,#content,#footer{width:400px;}
   .right,.center{margin-top:10px;}
   .left,.right{height:100px;}
   .center{height:200px;}
}
/*平板*/
@media screen and (min-width:600px) and (max-width:960px){
    #header,#content,#footer{width:600px;}
.right{display:none;}
.left,.center{height:400px;float:left;}
.left{width:160px;margin-right:10px;}
.center{width:430px;}
}
/*PC*/
@media screen and (min-width:960px){
    #header,#content,#footer{width:960px;}
.left,.center,.right{height:400px;float:left;}
.left{width:200px;margin-right:10px;}
.center{width:540px;margin-right:10px;}
.right{width:200px;} 
}
</style>
</head>
<body>
<!--header start-->
<div id="header">header</div>
<!--end header-->
<!--content start-->
<div id="content">
<div>left</div>
<div>center</div>
<div>right</div>
<div></div>
</div>
<!--end content-->
<!--footer-->
<div id="footer">footer</div>
<!--end footer-->
</body>
</html>

經過上面代碼可知：它是經過@media媒介查詢判斷來執行的CSS樣式，也就是說：若是我要作一個響應式佈局網站，同時兼容手機、平板、PC的話就得寫三個與之對應的CSS樣式，經過@media媒介查詢來完成響應式佈局。

值得注意的是：在手機設備上，咱們要禁止用戶來縮放屏幕。不由止的話，可能在顯示上會形成錯位，以及顯示的不是手機網站的樣式。因此，咱們要經過代碼來禁止用戶在手機端上縮放屏幕，已達到正常的手機網站效果。

禁止代碼以下:

<metaname=「viewport」 content=「width=device-width; initial-scale=1.0」>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。