內(nèi)容摘要：隨著現(xiàn)代社會的不斷發(fā)展，人們的需求不斷變化，不斷的創(chuàng)新才能更好的滿足人們的需求。從智能設(shè)備的出現(xiàn)，到如今不過短短十年，設(shè)備尺寸的多樣化，傳統(tǒng)的網(wǎng)頁設(shè)計已不能滿足現(xiàn)如今多樣化的設(shè)備通用需求。如果僅為滿足這多樣化的設(shè)備需求，網(wǎng)站便會投入更多的人力資源，顯然這是不切合實際的。為避免浪費這些不必要的資源，于是響應(yīng)式設(shè)計的網(wǎng)站便順勢而生，出現(xiàn)在了人們的眼前，成為近幾年網(wǎng)頁設(shè)計的一大趨勢，越來越多的網(wǎng)站選擇了響應(yīng)式。

對于近些年大熱的響應(yīng)式，我將利用HTML5和CSS3來寫出一個響應(yīng)式web頁面，借鑒Bootstrap框架的網(wǎng)格系統(tǒng)實現(xiàn)web頁面對不同顯示設(shè)備的適配，使用JavaScript的庫jQuery完成相關(guān)交互，能夠在手機，平板電腦及PC設(shè)備上運行。

本文主要介紹什么是響應(yīng)式，網(wǎng)頁開發(fā)內(nèi)容介紹以及在不同終端下的運行結(jié)果展示。

關(guān)鍵詞：響應(yīng)式 媒體查詢 不同終端 用戶體驗 HTML5

目次

摘要

Abstract

引言--1

1.-響應(yīng)式網(wǎng)頁設(shè)計-2

1.1-響應(yīng)式的設(shè)計原理-3

1.1.1-Viewport-3

1.1.2-媒體查詢 (@media)-4

1.2-響應(yīng)式的設(shè)計模式-6

1.2.1-基于顯示設(shè)備的大小-6

1.2.2-內(nèi)容顯示方式優(yōu)先-6

2.-網(wǎng)頁開發(fā)內(nèi)容介紹-8

2.1-開發(fā)準備-8

2.1.1-網(wǎng)頁開發(fā)基本要素-8

2.1.2-網(wǎng)頁開發(fā)工具-8

2.1.3-網(wǎng)頁開發(fā)使用的庫-8

2.2-網(wǎng)頁布局-8

2.2.1-頁面公用組件分析-9

2.2.2-首頁布局分析-12

2.2.3-內(nèi)頁布局分析-13

3.-運行結(jié)果展示-14

3.1-PC端運行結(jié)果-14

3.2-平板端運行結(jié)果-15

3.3-移動端運行結(jié)果-16

4.-結(jié)語-17

參考文獻--18

致謝--20

總結(jié)

以上是生活随笔為你收集整理的基于php响应式网站毕业论文,基于html5与css3的响应式web页面设计与实现.docx的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。