響應(yīng)式網(wǎng)站設(shè)計(jì)的3個(gè)基本原理，你必須掌握，幾年前，這是比較容易設(shè)計(jì)和建立網(wǎng)站。網(wǎng)站比較簡(jiǎn)單，并在屏幕尺寸變化不大觀看在臺(tái)式機(jī)和筆記本電腦。今天接管觀眾的瀏覽時(shí)間的移動(dòng)設(shè)備，智能手機(jī)屏幕，平板手機(jī)，平板電腦，你如何正確地確保您的網(wǎng)站上顯示整個(gè)設(shè)備類型和屏幕尺寸？

成都網(wǎng)站制作該解決方案最初是他探索的方式，使網(wǎng)站設(shè)計(jì)響應(yīng)，即讓他們根據(jù)屏幕大小而改變。一個(gè)自適應(yīng)網(wǎng)站設(shè)計(jì)是使巧用CSS來(lái)保證網(wǎng)頁(yè)在寬屏幕尺寸范圍渲染以及 - 而不訴諸URL重定向或動(dòng)態(tài)提供不同的HTML和CSS代碼，這取決于用戶代理。它不是一個(gè)真正的技術(shù)或標(biāo)準(zhǔn)，而是一組設(shè)計(jì)原則有助于實(shí)現(xiàn)的結(jié)果。

在過(guò)去的幾年里，許多響應(yīng)模板，CSS框架和WordPress主題如雨后春筍般涌現(xiàn)。這是，例如，有可能創(chuàng)造一個(gè)WordPress的響應(yīng)網(wǎng)站，而無(wú)需編寫一行代碼。

但是，一個(gè)真正的網(wǎng)頁(yè)設(shè)計(jì)師并不滿足于僅僅使用模板。她會(huì)作出努力來(lái)理解響應(yīng)網(wǎng)頁(yè)設(shè)計(jì)的元素，為了有效地使用它們。
所以今天，我們要看看你需要掌握三個(gè)基本技巧，你是一個(gè)有效的響應(yīng)設(shè)計(jì)師。
1.媒體查詢
媒體查詢讓您可以為不同的媒體類型，如屏幕，平面，電視，手持設(shè)備等。根據(jù)媒體類型設(shè)計(jì)不同的布局，可以配置風(fēng)格，字體和頁(yè)面的其他元素。
在CSS3介紹，媒體查詢讓設(shè)計(jì)師定制內(nèi)容的呈現(xiàn)，以適應(yīng)輸出設(shè)備類型的特定范圍。它們由一個(gè)媒體類型聲明和一個(gè)或多個(gè)媒體功能計(jì)算結(jié)果為真或假的表達(dá)式。
媒體類型的范圍包括手持，屏幕，電視，打印和投影。媒體功能包括，但不限于設(shè)備的高度，寬度，縱橫比，分辨率，顏色指數(shù)以及高度，在瀏覽器窗口的寬度。
讓我們一個(gè)基本的例子;想象一下你希望你的文字大小縮小在較小的設(shè)備，如手機(jī)。該查詢看起來(lái)是這樣的：

現(xiàn)在，你的段落的字體大小將被設(shè)置為1EM，除非瀏覽器寬度小于400像素，在這種情況下，它會(huì)收縮到0.8em。
根據(jù)我的經(jīng)驗(yàn)，設(shè)計(jì)一個(gè)響應(yīng)式網(wǎng)站布局的方法是先創(chuàng)建一個(gè)默認(rèn)的主樣式表的主要結(jié)構(gòu)元素。然后你就可以在媒體查詢添加到自定義基于布局或其他設(shè)備元素的元素。如果它比規(guī)則屈指可數(shù)，這可能是把它們搬出來(lái)獨(dú)立的子板 - 你可以選擇稍后加載。下面是如何將工作：

此片的代碼檢查裝置是否處于與設(shè)備橫向模式手持寬度小于720像素，如果是這樣，它加載tablet_layout.css樣式表。
注意，該特征的寬度，高度，大/最小寬度，最小/大高度都是指在瀏覽器窗口的寬度和高度。該裝置的寬度和高度由設(shè)備寬度，設(shè)備高度，最小/ MAX-設(shè)備寬度，最小/ MAX-設(shè)備高度控制。如果您想查找更多的例子使用媒體查詢MDN具有良好的一輪上漲。

2.流體網(wǎng)格
“流體格”是用來(lái)描述在各種元件，而不是具有固定像素值的相對(duì)比例編碼的布局的術(shù)語(yǔ)。
傳統(tǒng)的CSS布局使用固定寬度網(wǎng)格的元素的位置。固定寬度的方式不再現(xiàn)在我們有設(shè)備屏幕從3英寸到幾英尺今天的工作原理。在流體格的設(shè)計(jì)，都是編碼在其相對(duì)比例在基座元件的角度，即，而不是指定的高度和每個(gè)元素的寬度;它被賦予一個(gè)百分比或相對(duì)大小。
想象一下，你有四列。為了使這種液體，而不是指定每個(gè)200像素寬，你必須指定它們0.2083％（即作為九百六十零分之二百）。至少，這是原則。創(chuàng)建一個(gè)全新的流體電網(wǎng)需要很在意。這是一個(gè)罕見(jiàn)的情況下，我寧愿建議使用自定義的工具之一。微型流體電網(wǎng)，變網(wǎng)格系統(tǒng)與流體基線網(wǎng)格是從頭開(kāi)始編寫自己的流體網(wǎng)格一些偉大的替代品。

3.靈活I(lǐng)MAGES
圖像被視為靈活，當(dāng)圖像中本地的大小呈現(xiàn)，只要HTML容器支持它，但是當(dāng)瀏覽器窗口縮小，圖像縮放以適應(yīng)它。
即使設(shè)計(jì)的其余部分是流暢性和響應(yīng)，它不會(huì)渲染好了，如果所有的組件不擴(kuò)展。這可能很麻煩圖像和視頻。一個(gè)700像素寬的圖像會(huì)很好看在桌面上，但在一個(gè)320像素的平板電腦觀看時(shí)得到剁掉。大多數(shù)現(xiàn)代設(shè)計(jì)響應(yīng)使用的CSS大寬度屬性，以使圖像的規(guī)模。 （此方法首先由理查德•巴特勒提出）。

最后的想法
響應(yīng)式網(wǎng)站設(shè)計(jì)是我們行業(yè)的未來(lái)，但有這么多不同的技術(shù)飛來(lái)飛去，它往往很難跟上。掌握這些3個(gè)簡(jiǎn)單的技巧，你將90％的方式，是一個(gè)負(fù)責(zé)任的設(shè)計(jì)師。

網(wǎng)頁(yè)名稱：響應(yīng)式網(wǎng)站設(shè)計(jì)的3個(gè)基本原理
鏈接URL：http://m.newbst.com/news/19920.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營(yíng)銷seo公司；服務(wù)項(xiàng)目有網(wǎng)站設(shè)計(jì)、響應(yīng)式網(wǎng)站等

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)