国产在线愉拍视频_亚洲人片在线观看天堂无码_国产一区二区精选_麻豆av免费观看

關(guān)閉X

響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的快速教程適合個(gè)人站

發(fā)布時(shí)間:2014年10月11日    作者:佚名   key:點(diǎn)擊:

自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì) 響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì) 響應(yīng)式 移動(dòng)建站

 

  做 過wap站、做過siteApp、做過第三方,也做過獨(dú)立APP,現(xiàn)在又做了個(gè)自適應(yīng)的模板。所謂“響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)(Responsive Web Design)”也就是自適應(yīng),就是可以自動(dòng)識(shí)別屏幕寬度、并做出相應(yīng)調(diào)整的網(wǎng)頁(yè)設(shè)計(jì)。就是輸入本站域名,手機(jī)、平板、PC端顯示的效果不同的,但是 URL確是相同的。

  響應(yīng)式網(wǎng)站,利于SEO(統(tǒng)一了URL),利于用戶體驗(yàn),也利于用戶分享,如下圖所示:

  

自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì) 響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì) 響應(yīng)式 移動(dòng)建站

 

  (圖為iphone顯示效果)

  

自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì) 響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì) 響應(yīng)式 移動(dòng)建站

 

  (圖為ipad顯示效果,注意導(dǎo)航的變化)

  

自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì) 響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì) 響應(yīng)式 移動(dòng)建站

 

  (圖為安卓手機(jī)微信上顯示效果)

  

自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì) 響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì) 響應(yīng)式 移動(dòng)建站

 

  (PC版的直接就是現(xiàn)在這個(gè)界面了)

  這是怎么做的呢?

  其實(shí)完全是靠張力博主(QQ445671696)的鼎力相助,他用的是本站移植到Wordpress的模板,后面經(jīng)過多次修正與完善,制作了響應(yīng)式的網(wǎng)頁(yè)模板,后自發(fā)的為我制作了一套z-blog的自適應(yīng)模板,可謂青出于藍(lán)而勝于藍(lán)。

  在他的協(xié)助下,我只用了一個(gè)下午時(shí)間,把盧松松博客的全站替換成了自適應(yīng)主題。

  核心內(nèi)容在于:導(dǎo)航欄和CSS的兩個(gè)變化。

  希望學(xué)習(xí)的朋友請(qǐng)自行查看本站源代碼,請(qǐng)注意:

  1,網(wǎng)站導(dǎo)航兩個(gè),一個(gè)PC端,一個(gè)移動(dòng)端,注意加粗部分。

  PC段導(dǎo)航:

  

自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì) 響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì) 響應(yīng)式 移動(dòng)建站
 
<#CACHE_INCLUDE_NAVBAR#>
 

 

  移動(dòng)端導(dǎo)航:

  

自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì) 響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì) 響應(yīng)式 移動(dòng)建站
 

 

  請(qǐng)注意HTML源文件里的一個(gè)判斷語句:

 

  在head里加入這條元標(biāo)簽,那移動(dòng)瀏覽器中頁(yè)面將以原始大小顯示,并不能縮放。不讓瀏覽器縮放目的是保證網(wǎng)頁(yè)能自適應(yīng)屏幕的完整性,避免網(wǎng)頁(yè)混亂。

  width - viewport的寬度 height - viewport的高度

  initial-scale - 初始的縮放比例

  minimum-scale - 允許用戶縮放到的小比例

  maximum-scale - 允許用戶縮放到的大比例

  user-scalable - 用戶是否可以手動(dòng)縮放

  那么問題來了,如何讓瀏覽器判斷設(shè)備尺寸呢?

  有兩種方式,一種是直接在link中判斷設(shè)備的尺寸,然后引用不同的css文件,棄用。原因是博客CSS文件不大代碼也不多,不需要多個(gè)CSS文件,也能減少并發(fā)。

  第二種就是我現(xiàn)在用的這種,請(qǐng)直接查看本站CSS文件,

  核心代碼來了,開始研究響應(yīng)式web設(shè)計(jì)朋友,CSS3 Media Queries是入門。

  在CSS中加入語句:

  @media screen and (max-width: 600px) { /*當(dāng)屏幕尺寸小于600px時(shí),應(yīng)用下面的CSS樣式*/

  大家可以看到我博客里有多個(gè)判斷,1024px,768px,650px,500px,400px,350px。

  這意味著寬度在1024px以下的屏幕,我博客會(huì)呈現(xiàn)六種不同的效果。但為了保證網(wǎng)頁(yè)的連續(xù)性與完整性,同時(shí)也是圖省事,下面六個(gè)CSS幾乎相同。

  唯一不同的是加入了display:none,不顯示某些內(nèi)容。所以通過CSS觀察發(fā)現(xiàn),屏幕越小,顯示的內(nèi)容就越來越少。

  這也是文章開頭為什么pad和移動(dòng)端顯示的界面不同的原因之一。

  要注意的是由于網(wǎng)頁(yè)會(huì)根據(jù)屏幕寬度調(diào)整布局,所以不能使用絕對(duì)寬度的布局,也不能使用具有絕對(duì)寬度的元素。這一條非常重要,否則會(huì)出現(xiàn)橫向滾動(dòng)條。

  參考代碼:

  核心CSS文件,適用于任何程序http://lusongsong.com/zb_users/theme/LuSongSong/style/LuSongSong-Index.css

  代碼文件,鼠標(biāo)右鍵查看本站源代碼(注意導(dǎo)航代碼的變化),此代碼僅供zblog用戶參考。

  圖省事的、試用WP系統(tǒng)的朋友可直接下載張力博客提供的WordPress主題:http://zhangliseo.com/wp-didiao

  使用asp版盧松松主題的朋友,可以直接把本站的CSS拿去用。

  總結(jié):

  只要制作兩個(gè)導(dǎo)航,能看懂CSS文件就可以搞定,照貓畫虎,人人都能做出響應(yīng)式的網(wǎng)頁(yè)設(shè)計(jì),看似很難,實(shí)際上很簡(jiǎn)單。

  來源:盧松松博客(微信號(hào)/QQ號(hào):13340454)

除非注明,文章均為安靠信息技術(shù)原創(chuàng),轉(zhuǎn)載請(qǐng)注明本文地址:m.wiseohd.com/Tecarticle/website_1857.html

上一篇:新婚慶系統(tǒng)V2.2亮點(diǎn)功能預(yù)約用戶意向追蹤
下一篇:網(wǎng)站制作公司與草根站長(zhǎng)的新的“掘金”領(lǐng)域

安靠首頁(yè) | 服務(wù)項(xiàng)目 | 解決方案 | 常見問題 | 溧陽(yáng)網(wǎng)站建設(shè) | 優(yōu)惠政策 | 友情鏈接 | 申請(qǐng)友鏈 | 網(wǎng)站地圖 最新新聞

安靠信息技術(shù)是一家集互聯(lián)網(wǎng)及移動(dòng)APP應(yīng)用開發(fā)、網(wǎng)站建設(shè)運(yùn)營(yíng)、電子商務(wù)、企業(yè)服務(wù)器技術(shù)文件共享安全vpn域應(yīng)用、

弱電監(jiān)控安裝綜合布線、企業(yè)管理軟件OA、ERP、CRM財(cái)務(wù)軟件等IT服務(wù)于一體的高科技服務(wù)型網(wǎng)絡(luò)公司。
Copyright 2013 m.wiseohd.com 常州溧陽(yáng)安靠信息技術(shù)