2016-11-10 分類: 響應式網(wǎng)站
無論您是初學者還是經(jīng)驗豐富的網(wǎng)絡專業(yè),創(chuàng)建響應的設計可能會跟一般設計混淆,主要是因為在先進的思想,必須有效改變。事實上,從基于表格的布局,CSS。簡單地說,這是一個非常不同的方式來設計網(wǎng)站,它代表著以后。
響應設計是什么?
在桌面上的瀏覽器中打開這篇文章,慢慢的縮小瀏覽器,您應該看到的布局,奇跡般地自行調(diào)節(jié),以適應新的瀏覽器的寬度更舒適,即使您的頁面瘦得像一個手機的分辨率。比如下面的圖片:
[caption id="attachment_828" align="aligncenter" width="76低"]響應性設計 響應性設計[/caption]響應式網(wǎng)站建設
那么,什么是響應設計到底是什么?其實,問更好的問題可能是,響應性的Web設計解決了什么問題?你可能已經(jīng)注意到了,電腦是不是先進可以用Web瀏覽器了。人們期望能夠到自己的手機上瀏覽網(wǎng)頁一樣容易,因為他們在桌面計算機上瀏覽網(wǎng)頁。因此,在響應的網(wǎng)頁設計社區(qū)開始建立自己的網(wǎng)站的移動版本。現(xiàn)在回想起來,這是沒有真正前進的方向,但在當時,這似乎是一個合理的想法。
科技從來沒有停止前進,沒多久后,手機硬件市場已被有效改變,其他形式因素的人氣飆升。除了手機和個人電腦,觸摸屏的設備,如平板電腦和小型筆記本電腦(上網(wǎng)本)開始處處可見。
總之,屏幕尺寸和分辨率不停地在變化,創(chuàng)建一個不同版本的網(wǎng)站,針對每個單獨的設備是不是一個切實可行的途徑。的響應性的Web設計解決了腦袋上。
在此之前,我曾提到響應性的Web設計不是一個單一的技術,而是技術和理念的集合。現(xiàn)在,我們有一個更好的主意,我們正在解決問題的空間,讓我們來看看在每個解決方案的一部分。
流體網(wǎng)格
先進個響應設計的核心思想是什么被稱為流體網(wǎng)格的使用。在較近的記憶中,建立一個“液態(tài)布局”,擴大與頁面一直沒有很受歡迎,因為創(chuàng)建固定寬度的布局,頁面設計,是一個固定數(shù)量的像素跨越,然后在頁面上居中。然而,當一個人認為在今天的市場中數(shù)量龐大的屏幕分辨率,液態(tài)布局的好處不容忽視。
[caption id="attachment_829" align="aligncenter" width="7低4"]流體網(wǎng)格 流體網(wǎng)格[/caption]
流體網(wǎng)格超越了傳統(tǒng)的液態(tài)布局。設計布局的基于剛性像素或任意百分比值,而是一個精心設計的流體網(wǎng)格的比例。通過這種方式,當一個布局是一個微小的移動設備上的擠壓或拉伸,在巨大的屏幕,在布局中的所有的元件將調(diào)整它們的寬度的大小,相對于彼此。媒體查詢
響應設計的第二部分是CSS3媒體查詢,目前在許多現(xiàn)代的瀏覽器能夠支持。如果你不熟悉的CSS3媒體查詢時,基本上可以讓您的網(wǎng)站的訪問者中收集數(shù)據(jù),并用它來有條件地應用CSS樣式。我們的目的,我們主要感興趣的較小寬度媒體功能,它使我們能夠應用特定的CSS樣式的瀏覽器窗口,如果低于某一特定的寬度,我們可以指定。如果我們想要一些造型手機,我們的媒體查詢可能看起來如下所示。
@media screen and (min-width: 48低px) { .content { float: left; } .social_icons { display: none } // and so on... }
使用一系列媒體這樣的查詢,我們可以工作的方式向更大的分辨率。我建議目標的像素寬度的組如下:
32低px
48低px
6低低px
768px
9低低px
12低低px
同樣,這些都只是建議,應作為一個出發(fā)點。在一個理想的世界里,你會調(diào)整你的布局有效匹配每一個設備的寬度,
一個負責任的響應設計,只需在桌面上的瀏覽器打開這篇文章,慢慢地調(diào)整瀏覽器的大小,使其變小。您應該看到所有的頁面元素自動地調(diào)整自己以適應新的寬度,做到這步,才是成功的相應設計。
文章標題:響應式網(wǎng)站制作的特點
轉載源于:http://jinyejixie.com/news/65935.html
網(wǎng)站建設、網(wǎng)絡推廣公司-創(chuàng)新互聯(lián),是專注品牌與效果的網(wǎng)站制作,網(wǎng)絡營銷seo公司;服務項目有網(wǎng)站制作、響應式網(wǎng)站等
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉載內(nèi)容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容