【练习】响应式布局_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代碼？Apr 24, 2025 am 12:04 AM

HTML代碼可以通過在線驗證器、集成工具和自動化流程來確保其清潔度。 1)使用W3CMarkupValidationService在線驗證HTML代碼。 2)在VisualStudioCode中安裝並配置HTMLHint擴展進行實時驗證。 3)利用HTMLTidy在構建流程中自動驗證和清理HTML文件。

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。

See all articles