我不僅能玩轉OA還能玩轉APP,你信不信?
2022-08-12 分類： 網站建設
響應式Web設計如何簡單實現，網站設計公司創新互聯與大家細細暢聊一番。如今的屏幕分辨率，小至320px(iPhone)，大到2560px甚至更高(大顯示器)，變化范圍極大。除了使用傳統的臺式機，用戶會越來越多的通過手機、上網本、iPad一類的平板設備來瀏覽頁面。這種情況下，固定寬度的設計方案將會顯得越發不合理。頁面需要有更好的適應性，其布局結構要做到根據不同的設備及屏幕分辨率進行響應調整。接下來，我們將了解一下怎樣通過HTML5和CSS3 Media Queries(媒介查詢)相關技術來實現跨設備跨瀏覽器的響應式Web設計方案。
范例效果預覽
首先，我們來看看本篇范例的最終效果演示。打開該頁面，拖拽瀏覽器邊框，將窗口慢慢縮小，同時觀察頁面結構及元素布局是怎樣基于寬度變化而自動響應調整的。
更多范例
使用media query的方式設計了一些WordPress模板，比如Tisa、Elemin、Suco、iTheme2、Funki、Minblr和Wumblr等。
概述
我們將范例頁面的父級容器寬度設置為固定的980px，對于桌面瀏覽環境，該寬度適用于任何寬于1024像素的分辨率。我們通過media query來監測那些寬度小于980px的設備分辨率，并將頁面的寬度設置由"固定"方式改為"液態"，布局元素的寬度隨著瀏覽器窗口的尺寸變化進行調整。當可視部分的寬度進一步減小到650px以下時，主要內容部分的容器寬度會增大至全屏，而側邊欄將被置于主內容部分的下方，整個頁面變為單欄布局。
HTML代碼
我們將把注意力集中在頁面的主要布局方面，并使用HTML5標簽來更加語義化的實現這些結構，包括頁頭、主要內容部分、側邊欄和頁腳：
Demo
Site Description
Home
blog post
widget
footer
HTML5.js
IE是永恒的話題;對于我們使用的HTML5標簽，IE9之前的版本無法提供支持。目前的好 article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;} 主要結構的CSS 忽略細節，我們仍是將注意力集中在大問題上。正如在前文"概述"中提到的，默認情況下頁面容器的固定寬度為980像素，頁頭部分(header)的固定高度為160像素;主要內容部分(content)的寬度為600像素，左浮動;側邊欄(sidebar)右浮動，寬度為280像素。 #pagewrap {width: 980px;margin: 0 auto;}#header {height: 160px;}#content {width: 600px;float: left;} #sidebar {width: 280px;float: right;}#footer {clear: both;} 截至目前的效果演示 目前我們只是初步完成了頁面結構的HTML和默認結構樣式，當然，并不包括那些與話題無關的細節實現問題。正如可以在目前的演示中看到的，由于還沒有做任何media query方面的工作，頁面還不能隨著瀏覽器尺寸的變化而改變布局。 CSS3 Media Query 終于開始說正事兒了。首先我們需要在頁面中調用css3-mediaqueries.js文件，來幫助IE8或是之前的版本支持CSS3 media queries： 接下來，我們要創建CSS樣式表，并在頁面中調用： 當瀏覽器可視部分寬度大于650px小于980px時(液態布局) 將pagewrap的寬度設置為95% 將content的寬度設置為60% 將sidebar的寬度設置為30% @media screen and (max-width: 980px) {#pagewrap {width: 95%;}#content {width: 60%;padding: 3% 4%;} #sidebar {width: 30%;}#sidebar .widget {padding: 8% 7%;margin-bottom: 10px;} 當瀏覽器可視部分寬度小于650px時(單欄布局) 將header的高度設置為auto 將searchform絕對定位在top 5px的位置 將main-nav、site-logo、site-description的定位設置為static 將content的寬度設置為auto(主要內容部分的寬度將擴展至滿屏)，并取消float設置 將sidebar的寬度設置為99.99%，并取消float設置 @media screen and (max-width: 650px) {#header {height: auto;} #searchform {position: absolute;top: 5px;right: 0;}#main-nav {position: static;} #site-logo {margin: 15px 100px 5px 0;position: static;} #site-description {margin: 0 0 15px;position: static;} #content {width: auto;float: none;margin: 20px 0;} #sidebar {width: 99.99%;float: none;margin: 0;}} 當瀏覽器可視部分寬度小于480px時 480px也就是iPhone橫屏時的寬度。當可視部分的寬度小于該數值時，我們需要做以下調整： 禁用html節點的字號自動調整。默認情況下，iPhone會將過小的字號放大，我們可以通過-webkit-text-size-adjust屬性進行調整。 將main-nav中的字號設置為90% @media screen and (max-width: 480px) { html {-webkit-text-size-adjust: none;} #main-nav a {font-size: 90%;padding: 10px 8px; } } 彈性圖片 我們需要為圖片設置max-width:99.99%和height:auto，來實現其彈性化。對于IE，仍然需要一點額外的工作： img {max-width: 99.99%;height: auto;width: auto\9; /* ie8 */} 彈性內嵌視頻 同樣的，對于視頻，我們也需要做max-width： 99.99%的設置;但是Safari對embed的該屬性支持不是很給力，所以我們以width： 99.99%來代替： .video embed, .video object, .video iframe {width: 99.99%;height: auto;} iPhone中的初始化縮放 默認情況下，iPhone中的Safari瀏覽器會對頁面進行自動縮放，以適應屏幕尺寸。我們可以使用以下的meta設置，將設備的默認寬度作為頁面在Safari的可視部分寬度，并禁止初始化縮放。 最終效果演示 該范例的最終演示正像我們在本文開始時看到的那樣;另外記得，在條件允許的情況下，使用各種典型移動設備(iPhone、iPad、Android、Blackberry等)來檢驗頁面的移動版本。 要點總結 Media Query JavaScript 對于那些尚不支持media query的瀏覽器，我們要在頁面中調用css3-mediaqueries.js CSS Media Queries 實現自適應頁面設計的關鍵之一，就是使用CSS根據分辨率寬度的變化來調整頁面布局結構。 @media screen and (max-width: 560px) { #content {width: auto;float: none;} #sidebar {width: 99.99%;float: none;}} 彈性圖片 通過max-width:99.99%和height:auto實現圖片的彈性化。 img {max-width: 99.99%;height: auto;width: auto\9; /* ie8 */} 彈性內嵌元素(視頻) 通過width:99.99%和height:auto實現內嵌元素的彈性化。 .video embed, .video object, .video iframe {width: 99.99%;height: auto;} 字號自動調整的問題 通過-webkit-text-size-adjust:none禁用iPhone中Safari的字號自動調整 html {-webkit-text-size-adjust: none;} 響應式Web網站設計知識分享非常給力，值得每一個人關注!
當前名稱：我不僅能玩轉OA還能玩轉APP,你信不信?
成都網站建設公司_創新互聯，為您提供小程序開發、定制網站、云服務器、網站制作、服務器托管、Google
聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：
創新互聯
網頁URL：http://m.2m8n56k.cn/news22/189072.html
猜你還喜歡下面的內容
- 專業網站設計公司需要具備的三要素 2022-08-12
- 找人做網站時要了解什么事項 2022-08-12
- 網站建設之服務器端編程語言php使用占比獨占鰲頭 2022-08-12
- 網站seo優化關鍵詞選擇技巧 2022-08-12
- 公司建設網站關于兼容方面的問題盤點 2022-08-12
- 媒體想知道怎么運營自己的廣告？讀這篇就夠了 2022-08-12
- 關于網站優化的SEO策略 2022-08-12
- 定制高端網站建設公司哪家好? 2022-08-12
- 分析小程序為傳統企業所帶來的可能性 2022-08-12
- 聽成都網站SEO優化公司為您解答如，同質化時代，您的互聯網應該怎么才能脫穎而出？ 2022-08-12
- 網站域名和空間，大家知道怎么選擇嗎 2022-08-12
- 怎樣建網站能讓客戶有好感 2022-08-12
- 附近的小程序功能升級及小程序新能力 2022-08-12
- 網站關鍵詞排名下降了怎么辦? 2022-08-12
- 做網頁要在品質與質量方面下功夫 2022-08-12
- 淺談通用頁面的創建步驟 2022-08-12
- 互聯網界那些年爆紅過的產品…… 2022-08-12
- 如何分析競爭對手網站優化數據，以此提升自己網站優化效果! 2022-08-12
- 營銷網站效果好不好,這兩點起決定因素! 2022-08-12