一鍵擁有10個城市分站
關鍵詞免費占領百度首頁
200
HTML5教程丨3個步驟讓你的網站變成響應式網站
時間: 2016-12-05 14:25:30 點擊數: 41402 來源: 耐思智慧
一個網站長得好看能吃嗎？還真能！一個“秀色可餐”的網站不僅能增加人們的食欲，還能讓你的營業額蹭蹭往上漲！但是，一個長得好看卻只能活在電腦端的網站，真的不能吃！2016年，已經有超過80%的網民有在移動端購物的經歷，如果你的網站不能在移動端“顏值在線”，就別怪客戶都被別家攬走了！
解決的辦法只有一個，就是把自家網站做成響應式的。要么也可以另外開發移動站。要把網站變成響應式網站，給大家說三個簡單的步驟。
1.布局
在建響應式布局的時候，最好先建一個非響應式的布局，測試沒問題后，再把布局改成響應式的，添加響應式代碼和媒體查詢。
在HTML頁面的<head>和</head>標簽之間復制以下代碼：
媒體查詢的意思是根據不同設備設置不同的布局樣式。媒體查詢取決于網站布局，我們可以這樣定義：第一個，適合平板電腦橫向顯示，最大寬度為1060PX，#primary 占在其父容器寬度的67%，#senondary 占30%，再加上3%的左外邊距。 第二個，適合豎向平板電腦和更小的屏幕尺寸。
編碼完成后，可以測試下布局是怎么響應的。
2.媒體
響應式布局是響應式網站的“骨架”，媒體元素（視頻、圖像）是響應式網站的“皮肉”。
下面這段CSS代碼能讓你的網站圖像不超過顯示終端尺寸。
用CSS3 來為匹配 min-device-width 條件的媒體指定替換圖像：
圖像能這樣設置，怎樣實現響應式的視頻呢？
HTML：
CSS：
3.字體
CSS3 規范引入了一個新的單位叫 rem，和 em 類相似，但相對于 HTML 元素來說， rem 更易于使用。
rem 是相對于 HTML 元素的，不要忘了重置 HTML 的字體大小：
完成后，您可以定義響應式的字體大小，如下所示：
完成這三步后，你就能擁有一個響應式的網站了。不過這個教程對大部分用戶來說，還是有點復雜了。如果不會程序，是不是就不能做響應式網站了呢？并不是。目前一些自助建站工具已經非常強大，以建站寶盒為代表的H5模板建站，非常適合不懂編程的小白。拖拽操作，能打字就能建站，網站做出來高端大氣，尤其適合要做營銷型響應式網站的企業。
零基礎建響應式網站：http://m.alapot.com/design/?s=yuqiuping
上一篇：簡單設計自適應網頁 下一篇：怎么將一個網站修改成html5 標準的網站？
舉報不良網站
高新企業證書編號：GR201644000568