杭州派迪科技為高端客戶提供品牌官網(wǎng)咨詢策劃，品牌官網(wǎng)設(shè)計，品牌官網(wǎng)建設(shè)開發(fā)服務(wù)，以國際化視野和標(biāo)準(zhǔn)為基礎(chǔ)，為各行業(yè)領(lǐng)軍品牌提供高端企業(yè)網(wǎng)站定制、策劃、設(shè)計、互動與制作
查看詳情響應(yīng)式布局和自適應(yīng)布局詳解
響應(yīng)式布局等于流動網(wǎng)格布局，而自適應(yīng)布局等于使用固定分割點來進行布局。
自適應(yīng)布局給了你更多設(shè)計的空間，因為你只用考慮幾種不同的狀態(tài)。而在響應(yīng)式布局中你卻得考慮上百種不同的狀態(tài)。雖然絕大部分狀態(tài)差異較小，但仍然也算做差異。它使得把握設(shè)計最終效果變得更難，同樣讓響應(yīng)式布局更加的難以測試和預(yù)測。但同時說難，這也算是響應(yīng)式布局美的所在。在考慮到表層級別不確定因素的過程中，你也會因此更好的掌握一些基礎(chǔ)知識。當(dāng)然，要做到精確到像素級別的去預(yù)測設(shè)943*684像素視區(qū)里的樣子是很難的，但是你至少可以很輕松的確定它是能夠正常工作的，因為頁面的基本特性和布局結(jié)構(gòu)都是根據(jù)語義結(jié)構(gòu)來部署的。
響應(yīng)式布局概念
Responsive design，意在實現(xiàn)不同屏幕分辨率的終端上瀏覽網(wǎng)頁的不同展示方式。通過響應(yīng)式設(shè)計能使網(wǎng)站在手機和平板電腦上有更好的瀏覽閱讀體驗。
經(jīng)過不停地學(xué)習(xí)和實踐，如今總結(jié)響應(yīng)式設(shè)計的方法和注意點。其實很簡單。
響應(yīng)式設(shè)計的步驟
1. 設(shè)置 Meta 標(biāo)簽
大多數(shù)移動瀏覽器將HTML頁面放大為寬的視圖（viewport）以符合屏幕分辨率。你可以使用視圖的meta標(biāo)簽來進行重置。下面的視圖標(biāo)簽告訴瀏覽器，使用設(shè)備的寬度作為視圖寬度并禁止初始的縮放。在<head>標(biāo)簽里加入這個meta標(biāo)簽?！?/p>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
[1]（user-scalable = no 屬性能夠解決 iPad 切換橫屏之后觸摸才能回到具體尺寸的問題。 ）
3. 通過媒介查詢來設(shè)置樣式 Media Queries
Media Queries 是響應(yīng)式設(shè)計的核心。
它根據(jù)條件告訴瀏覽器如何為指定視圖寬度渲染頁面。假如一個終端的分辨率小于 980px，那么可以這樣寫：
//code from http://caibaojian.com/356.html
@media screen and (max-width: 980px) {
#head { … }
#content { … }
#footer { … }
}
這里的樣式就會覆蓋上面已經(jīng)定義好的樣式。
4. 設(shè)置多種試圖寬度
假如我們要設(shè)定兼容 iPad 和 iphone 的視圖，那么可以這樣設(shè)置：
/** iPad **/
@media only screen and (min-width: 768px) and (max-width: 1024px) {}
/** iPhone **/
@media only screen and (min-width: 320px) and (max-width: 767px) {}
恩，差不多就這樣的一個原理。
一些注意的
1. 寬度需要使用百分比
例如這樣：
#head { width: 100% }
#content { width: 50%; }
2. 處理圖片縮放的方法
簡單的解決方法可以使用百分比，但這樣不友好，會放大或者縮小圖片。那么可以嘗試給圖片指定的最大寬度為百分比。假如圖片超過了，就縮小。假如圖片小了，就原尺寸輸出。
img { width: auto; max-width: 100%; }
用
::before和::after偽元素 +content 屬性來動態(tài)顯示一些內(nèi)容或者做其它很酷的事情，在 css3 中，任何元素都可以使用 content 屬性了，這個方法就是結(jié)合 css3 的 attr 屬性和 HTML 自定義屬性的功能： HTML 結(jié)構(gòu)：
<img src="image.jpg" data-src-600px="image-600px.jpg" data-src-800px="image-800px.jpg" alt="">CSS 控制：
@media (min-device-width:600px) { img[data-src-600px] { content: attr(data-src-600px, url); } } @media (min-device-width:800px) { img[data-src-800px] { content: attr(data-src-800px, url); } }
3. 其他屬性
例如 pre ，iframe，video 等，都需要和img一樣控制好寬度。對于table，建議不要增加 padding 屬性，低分辨率下使用內(nèi)容居中：
table th, table td { padding: 0 0; text-align: center; }
以上內(nèi)容和代碼來自：掌心，感謝，歡迎查看我之前做過的響應(yīng)式設(shè)計：查看演示
更多資源
Morten Hjerde和他的同事們對2005至2008年市場中的400余種移動設(shè)備進行了統(tǒng)計(查看報告)，下圖展示了大致的統(tǒng)計結(jié)果：
打造布局結(jié)構(gòu)
我們可以監(jiān)測頁面布局隨著不同的瀏覽環(huán)境而產(chǎn)生的變化，如果它們變的過窄過短或是過寬過長，則通過一個子級樣式表來繼承主樣式表的設(shè)定，并專門針對某些布局結(jié)構(gòu)進行樣式覆寫。我們來看下代碼示例：
/* Default styles that will carry to the child style sheet */ html,body{ background... font... color... } h1,h2,h3{} p, blockquote, pre, code, ol, ul{} /* Structural elements */ #wrapper{ width: 80%; margin: 0 auto; background: #fff; padding: 20px; } #content{ width: 54%; float: left; margin-right: 3%; } #sidebar-left{ width: 20%; float: left; margin-right: 3%; } #sidebar-right{ width: 20%; float: left; }
下面的代碼可以放在子級樣式表Mobile.css中，專門針對移動設(shè)備進行樣式覆寫：
#wrapper{ width: 90%; } #content{ width: 100%; } #sidebar-left{ width: 100%; clear: both; /* Additional styling for our new layout */ border-top: 1px solid #ccc; margin-top: 20px; } #sidebar-right{ width: 100%; clear: both; /* Additional styling for our new layout */ border-top: 1px solid #ccc; margin-top: 20px; }
大致的視覺效果如下圖所示：
圖中上半部分是大屏幕設(shè)備所顯示的完整頁面，下面的則是該頁面在小屏幕設(shè)備的呈現(xiàn)方式。頁面HTML代碼如下：
Media Queries
Ethan的文章中的“Meet the media query”部分有更多的范例及解釋。更有效率的做法是，將多個media queries整合在一個樣式表文件中
/* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } /* Smartphones (landscape) ----------- */ @media only screen and (min-width : 321px) { /* Styles */ } /* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px) { /* Styles */ }
相關(guān)專題
-
品牌官網(wǎng)設(shè)計 -
大策略營銷門戶網(wǎng)站
杭州派迪科技有自己的營銷型網(wǎng)站CMS系統(tǒng)，適合白帽SEO網(wǎng)站。特別對大策略的營銷型門戶網(wǎng)站制作有一定的經(jīng)驗，曾經(jīng)為上海天擎外貿(mào)行業(yè)網(wǎng)站、浙江兆龍營銷型門戶、先臨三維門戶營銷網(wǎng)站提供全程的技術(shù)支持及SEO優(yōu)化指導(dǎo)
查看詳情 -
集團/上市公司網(wǎng)站
杭州派迪科技為杭州本地集團公司提供網(wǎng)頁設(shè)計、制作、開發(fā)服務(wù)，為集團公司網(wǎng)站建設(shè)提供了響應(yīng)式、營銷型、品牌型、門戶型網(wǎng)站建設(shè)需求，歡迎廣大集團公司客戶咨詢
查看詳情 -
外貿(mào)網(wǎng)站建設(shè)
杭州派迪科技為高端客戶提供外貿(mào)網(wǎng)站咨詢策劃，外貿(mào)官網(wǎng)設(shè)計，外貿(mào)官網(wǎng)建設(shè)開發(fā)服務(wù)，以谷歌搜索引起算法為基礎(chǔ)，為各行業(yè)外貿(mào)公司提供高端企業(yè)外貿(mào)網(wǎng)站定制、策劃、設(shè)計、互動與制作
查看詳情 -
企業(yè)網(wǎng)站建設(shè)
高端專業(yè)、令人印象深刻的用戶界面、易于訪問——企業(yè)網(wǎng)站必須反映一切，因為派迪科技在這里提供幫助，憑借精湛的技術(shù)、豐富的經(jīng)驗、與客戶的持續(xù)溝通以及對每一個細(xì)節(jié)的關(guān)注，我們確保在快速的周期時間內(nèi)提供優(yōu)質(zhì)的服務(wù)。
查看詳情 -
半定制網(wǎng)站
杭州派迪科技模板網(wǎng)站建設(shè)專題_各行業(yè)方案專題欄目提供各行業(yè)產(chǎn)品適合的網(wǎng)站建設(shè)方案,幫助企業(yè)了解派迪科技建站效果等信息,您可以通過本站了解各行業(yè)網(wǎng)站建設(shè)方案,如需要獲取本行業(yè)定制網(wǎng)站建設(shè)方案,可以聯(lián)系在線客服或撥打電話咨詢
查看詳情
熱門文章
-
筆記本瀏覽網(wǎng)頁效果，和臺式機比例一樣嗎2024-10-20
-
響應(yīng)式網(wǎng)站設(shè)計的重要性主要體現(xiàn)在哪些方面
2024-01-21
-
-
如何充分利用您的業(yè)務(wù)內(nèi)容
2012-03-19
-
增加網(wǎng)站流量的最有效方法
2012-03-18
-
2022年流行的商業(yè)網(wǎng)站設(shè)計趨勢
2012-03-17
標(biāo)簽云
案例欣賞
Youtube
網(wǎng)站訪問速度
用戶
獨特設(shè)計
建站目標(biāo)
API的運用
網(wǎng)站獲客
2022年網(wǎng)頁設(shè)計趨勢
導(dǎo)航欄
隱私政策如何寫
網(wǎng)站建設(shè)字體
網(wǎng)站建設(shè)設(shè)計師
設(shè)計氛圍
商業(yè)網(wǎng)站建設(shè)
重要性
客戶不知道自己做什么
通配符SSL
網(wǎng)頁設(shè)計
網(wǎng)站做文件分離到云存儲
杭州外貿(mào)網(wǎng)站建設(shè)
案例分享
便利店小程序
網(wǎng)站設(shè)計解決方案
營銷網(wǎng)站如何轉(zhuǎn)化客戶
獲取報價
seo對網(wǎng)站的重要性
網(wǎng)站美觀
極簡主義網(wǎng)站
醫(yī)保公告
跨境物流網(wǎng)站
網(wǎng)站制作步驟
設(shè)計攻略
洗發(fā)水網(wǎng)站
企業(yè)官網(wǎng)建設(shè)
視覺設(shè)計
紡織品外貿(mào)網(wǎng)站開發(fā)建設(shè)
紡織企業(yè)網(wǎng)站
軟件公司網(wǎng)站
企業(yè)網(wǎng)站建設(shè)
數(shù)據(jù)分析
網(wǎng)站尺寸
網(wǎng)站黑鏈
購物網(wǎng)站
網(wǎng)站判斷
聚合頁
滲透安全
ZOHO
網(wǎng)頁設(shè)計師
網(wǎng)站3D效果
體驗從溝通開始，讓我們聆聽您的需求！
開始您的數(shù)字化品牌體驗！ 0571-85815193 期待您的來電！
[ 網(wǎng)站建設(shè)×品牌官網(wǎng)設(shè)計×大策略營銷門戶×微信小程序開發(fā)×微信公眾號開發(fā)]
網(wǎng)站事業(yè)部產(chǎn)品經(jīng)理
免費獲取項目策劃
項目開發(fā)部產(chǎn)品經(jīng)理
免費獲取項目策劃
