中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

響應(yīng)式網(wǎng)頁設(shè)計的快速教程

2022-05-02    分類: 網(wǎng)站建設(shè)

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

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


(圖為iphone顯示效果)


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


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


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

這是怎么做的呢?

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

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

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

PC段導(dǎo)航:

<#CACHE_INCLUDE_NAVBAR#>

移動端導(dǎo)航:

<#ZC_BLOG_TITLE#>

  • <#CACHE_INCLUDE_FUNCTION28#>

請注意HTML源文件里的一個判斷語句:


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

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

initial-scale - 初始的縮放比例

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

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

user-scalable - 用戶是否可以手動縮放

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

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

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

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

在CSS中加入語句:

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

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

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

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

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

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

參考代碼:

核心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é):

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

來源:盧松松博客

分享題目:響應(yīng)式網(wǎng)頁設(shè)計的快速教程
文章來源:http://m.rwnh.cn/news15/149265.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供關(guān)鍵詞優(yōu)化品牌網(wǎng)站設(shè)計、面包屑導(dǎo)航、網(wǎng)站設(shè)計公司、企業(yè)建站、建站公司

廣告

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

成都網(wǎng)站建設(shè)
平塘县| 郎溪县| 兴业县| 台南县| 登封市| 东乡县| 宾阳县| 大足县| 平远县| 苏尼特左旗| 天气| 云安县| 固安县| 甘泉县| 临漳县| 天门市| 望江县| 上犹县| 含山县| 永年县| 襄城县| 安远县| 莱芜市| 信丰县| 大宁县| 福清市| 玉门市| 固原市| 丰宁| 太原市| 西盟| 罗田县| 扎囊县| 札达县| 临高县| 壶关县| 南澳县| 云林县| 金塔县| 延吉市| 辛集市|