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

首页

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/imghwm/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

HTML与CSS和JavaScript：比较Web技术Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是构建现代网页的核心技术：1.HTML定义网页结构，2.CSS负责网页外观，3.JavaScript提供网页动态和交互性，它们共同作用，打造出用户体验良好的网站。

HTML作为标记语言：其功能和目的Apr 22, 2025 am 12:02 AM

HTML的功能是定义网页的结构和内容，其目的在于提供一种标准化的方式来展示信息。1）HTML通过标签和属性组织网页的各个部分，如标题和段落。2）它支持内容与表现分离，提升维护效率。3）HTML具有可扩展性，允许自定义标签增强SEO。

HTML，CSS和JavaScript的未来：网络开发趋势Apr 19, 2025 am 12:02 AM

HTML的未来趋势是语义化和Web组件，CSS的未来趋势是CSS-in-JS和CSSHoudini，JavaScript的未来趋势是WebAssembly和Serverless。1.HTML的语义化提高可访问性和SEO效果，Web组件提升开发效率但需注意浏览器兼容性。2.CSS-in-JS增强样式管理灵活性但可能增大文件体积，CSSHoudini允许直接操作CSS渲染。3.WebAssembly优化浏览器应用性能但学习曲线陡，Serverless简化开发但需优化冷启动问题。

HTML：结构，CSS：样式，JavaScript：行为Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web开发中的作用分别是：1.HTML定义网页结构，2.CSS控制网页样式，3.JavaScript添加动态行为。它们共同构建了现代网站的框架、美观和交互性。

HTML的未来：网络设计的发展和趋势Apr 17, 2025 am 12:12 AM

HTML的未来充满了无限可能。1)新功能和标准将包括更多的语义化标签和WebComponents的普及。2)网页设计趋势将继续向响应式和无障碍设计发展。3)性能优化将通过响应式图片加载和延迟加载技术提升用户体验。

HTML与CSS vs. JavaScript：比较概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在网页开发中的角色分别是：HTML负责内容结构，CSS负责样式，JavaScript负责动态行为。1.HTML通过标签定义网页结构和内容，确保语义化。2.CSS通过选择器和属性控制网页样式，使其美观易读。3.JavaScript通过脚本控制网页行为，实现动态和交互功能。

HTML：是编程语言还是其他？Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增强WebevebDevelopment。

HTML：建立网页的结构Apr 14, 2025 am 12:14 AM

HTML是构建网页结构的基石。1.HTML定义内容结构和语义，使用、、等标签。2.提供语义化标记，如、、等，提升SEO效果。3.通过标签实现用户交互，需注意表单验证。4.使用、等高级元素结合JavaScript实现动态效果。5.常见错误包括标签未闭合和属性值未加引号，需使用验证工具。6.优化策略包括减少HTTP请求、压缩HTML、使用语义化标签等。

See all articles