【练习】响应式布局_html/css_WEB-ITnose-html教程-PHP中文网

Demo

Main section

Sub-section

首页

web前端

html教程

【练习】响应式布局_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:33 PM

本文参考是参考http://www.netmagazine.com/tutorials/build-basic-responsive-site-css做的练习。

文中作者阐述了对于响应式设计不应该针对不同的终端显示不同的内容，当用户在pc上可以查到的内容，在移动端却怎么也找不到，这是很困惑的一件事情。所以响应式设计要做的是适当的缩放，针对不同的设备显示适当的布局，而不是改变内容。所以响应式布局的是利用流式布局（利用百分比设置各元素宽度）和css3的Media Query来实现的。

下面做一个简单的响应式布局的小练习：

效果可以参考http://www.netmagazine.com/files/tutorials/demos/2013/01/build-a-basic-responsive-site-with-css/demo/demo.html

1.首先确定文档结构，两列布局。

<!doctype html><html><head>    <meta charset="UTF-8">    <title>Responsive</title>    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>    <link rel="stylesheet" type="text/css" href="css/responsive.css"></head><body>    <div id="wrapper">        <header>            <nav id="skipTo">                <ul>                    <li>                        <a href="#main" title="skip to main content">skip to main content</a>                    </li>                </ul>            </nav>            <h1 id="Demo">Demo</h1>            <nav>                <ul>                    <li><a href="#" title="home">Home</a></li>                    <li><a href="#" title="about">About</a></li>                    <li><a href="#" title="work">Work</a></li>                    <li><a href="#" title="contact">Contact</a></li>                </ul>            </nav>            <div id="banner">                <img src="/static/imghw/default1.png"  data-src="images/kaws.jpg"  class="lazy" alt="banner">            </div>        </header>        <section id="main">            <h1 id="Main-section">Main section</h1>            <p>Lorem （省略一些内容）</p>        </section>        <aside>            <h1 id="Sub-section">Sub-section</h1>            <p>Lorem （省略一些内容）</p>        </aside>    </div></body></html>

登录后复制

　　原作者插入respond.min.js确保ie6-8可以运行，因为我没做兼容性的测试，所以没引用这个js，有兴趣的同学可以试试。

加入避免浏览器自动缩放和用户的缩放。（width - viewport的宽度， initial-scale - 初始的缩放比例，minimum-scale - 允许用户缩放到的最小比例，maximum-scale - 允许用户缩放到的最大比例，user-scalable - 用户是否可以手动缩放）

2.加入基本样式。#skipTo的导航是为移动设备设置的，使用户可以跳过导航直接看到主要的内容，所以在基本的样式中将其隐藏。最好设置一个max-width避免在大屏幕上过度放大，并且给image的width设置成100%，这样能很好的适应流式布局。

#wrapper{    width: 96%;    max-width: 920px;    margin: 0 auto;    padding: 2%;}#main{    width: 60%;    margin-right: 5%;    float: left;}aside{    width: 35%;    float: right;}header h1{    height: 70px;    width: 160px;    float: left;    display: block;    background: url(../images/demo.gif) 0 0 no-repeat;    text-indent: -9999px;}header nav{    float: right;    margin-top: 40px;}header nav li{    display: inline;    margin-left: 15px;}#skipTo{    display: none;}#skipTO li{    background: #b1fffc;}#banner{    float: left;    margin-bottom: 15px;    width: 100%;}#banner img{    width: 100%;}

登录后复制

　　3.加入适配移动设备的css。可以用两种方式，一种是内置在css中，在css中加入以下代码

@media screen and (max-width: 480px) {    #skipTo {        display: block;        }        header nav, #main, aside {        float: left;        clear: left;        margin: 0 0 10px;         width: 100%;        }            header nav li {            margin: 0;            background: #efefef;            display: block;            margin-bottom: 3px;            }            header nav a {                display: block;                padding: 10px;                text-align: center;                }            }

登录后复制

　　另一种是外部引用，在html的head中加入

<link rel="stylesheet" type="text/css" media="screen and (max-width:480px)" href="css/mobile.css">

登录后复制

另外也可以针对移动设备提供减小的图片，可以节省移动设备的流量，减少加载时间。

好了，至此整个练习就结束了，动手练习下吧。

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7695

Java教程

1640

CakePHP 教程

1393

Laravel 教程

1287

PHP教程

1229

显示更多

Related knowledge

HTML容易为初学者学习吗？ Apr 07, 2025 am 12:11 AM

HTML适合初学者学习，因为它简单易学且能快速看到成果。1)HTML的学习曲线平缓，易于上手。2)只需掌握基本标签即可开始创建网页。3)灵活性高，可与CSS和JavaScript结合使用。4)丰富的学习资源和现代工具支持学习过程。

HTML，CSS和JavaScript的角色：核心职责 Apr 08, 2025 pm 07:05 PM

HTML定义网页结构，CSS负责样式和布局，JavaScript赋予动态交互。三者在网页开发中各司其职，共同构建丰富多彩的网站。

HTML中起始标签的示例是什么？ Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。

了解HTML，CSS和JavaScript：初学者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。