HTML5 移動設計基礎
作者：佚名
yellow桌面網站設計多是固定布局或流布局，而移動網站中我們應該使用流體布局，它可以適應不同設備大小。
桌面網站設計多是固定布局或流布局，而移動網站中我們應該使用流體布局，它可以適應不同設備大小。
搭建html框架
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8"/>
- <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0"/>
- <title>移動設計</title>
- <link rel="stylesheet" href="css.css"/>
- </head>
- <body>
- <header>
- <h1>移動設計開發</h1>
- </header>
- <div>
- <ul>
- <li>我的名字是利奧</li>
- <li>我的網站： http://forjs.org</li>
- <li>我的QQ 1405491181</li>
- <li>我的微信號 forjs_org</li>
- </ul>
- </div>
- <footer>
- © 2014 <a href="http://forjs.org">forjs.org</a>
- </footer>
- </body>
- </html>
基本CSS
- html,body,ul,li,h1{
- margin:0;
- padding:0;
- }
- body{
- padding:5px;
- }
- ul{
- list-style: none;
- }
- li{
- border-radius: 5px;
- background-color: #eee;
- padding:10px 5px 10px 5px;
- margin:5px 0;
- }
基本效果
縱向效果
橫向效果
加入 css 媒體查詢支持
- @media screen and (min-width: 800px){
- body{
- padding:0 200px;
- }
- }
當設備屏幕大于800px時調用。
責任編輯：閆佳明
來源：
forjs.org
