HTML5 移动设计
发布于 10 年前 作者 leogiese 3105 次浏览 最后一次编辑是 8 年前 来自 分享

原文 http://forjs.org/book/lkaK8WuNme/section/e1eo8tzivIe HTML5 移动设计 ==============

推荐：《精通Node.js开发》 《Angular.js视频详解》

桌面网站设计多是固定布局或流布局，而移动网站中我们应该使用流体布局，它可以适应不同设备大小。

搭建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>
    &copy; 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时调用。

2 回复

学习啦

谢谢鼓励啊

回到顶部