領(lǐng)眾品牌官網(wǎng)
為廈門網(wǎng)站建設(shè)公司企業(yè)提供高品質(zhì)網(wǎng)站建設(shè)
熱線:0592-5596197

網(wǎng)站建設(shè)

當(dāng)前位置:首頁 > 營銷運(yùn)營 > 網(wǎng)站建設(shè)

手機(jī)網(wǎng)站怎么做?

來源:領(lǐng)眾品牌    查看次數(shù):    發(fā)表時(shí)間:2014-06-04 18:57:23

 手機(jī)網(wǎng)站怎么做?如今很多企業(yè)對(duì)移動(dòng)終端手機(jī)等設(shè)備也建設(shè)了網(wǎng)站,今天就說說手機(jī)網(wǎng)站怎么做吧,其實(shí)做的有很多共有以下幾個(gè)方法,這些 方法哪種更適合我們呢?

方法一:手機(jī)WAP網(wǎng)站

采用wap是最傳統(tǒng)的方法之一,一直是很多手機(jī)網(wǎng)站建設(shè)的首選方法,手機(jī)wap網(wǎng)站怎么去做呢?與pc電腦端網(wǎng)站的制作有什么不一樣呢?

 

1、采用WML語法,其實(shí)這與XML是差不多,在制作手機(jī)網(wǎng)站的時(shí)候我們需要在代碼頂部聲明下:

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.1//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>這是一個(gè)手機(jī)wap網(wǎng)站</title>

</head>

<body>

手機(jī)網(wǎng)站怎么做?

</body>

</html>

 

2、手機(jī)網(wǎng)站的CSS樣式采用百分符更為合適,隨說手機(jī)網(wǎng)站與普通網(wǎng)站建設(shè)方法是差不多的,但手機(jī)種類很大分辨率與大 有不同,這就對(duì)CSS樣式要有所規(guī)范了,盡量少采用圖片式的布局,如下面的代碼:

.concent{ width:100%; height:auto}

.concent li{

float:left;

width:20%;  //采用百分號(hào)來控制顯示的寬度

margin-top:5px;

margin-bottom:5px;

margin-left:5px;  

margin-right:5px

}

 

方法二:采用自適應(yīng)同步跨平臺(tái)

這種方是現(xiàn)在大部分手機(jī)網(wǎng)站制作的趨勢(shì)所在,之前我們網(wǎng)站上有發(fā)表過一個(gè)相關(guān)”廈門做網(wǎng)站建設(shè)自適應(yīng)跨平臺(tái)解決方案一站通用“可以了解下,這種自適應(yīng)式電腦、手機(jī)等設(shè)備網(wǎng)站怎么去做呢?

1、主要是在代碼頭設(shè)置:<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

<html xmlns="http://www.w3.org/1999/xhtml">

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

// 開通采用自適應(yīng)模式

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

// initial-scale - 初始的縮放比例

// minimum-scale - 允許縮放的最小比例

// maximum-scale - 允許縮放的最大比例

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

 

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>這是一個(gè)手機(jī)wap網(wǎng)站</title>

</head>

<body>

歡迎進(jìn)入手

</body>

</html>

2、響應(yīng)式布局CSS(CSS3) @media screen,自適應(yīng)的網(wǎng)站更加注重CSS的寫法規(guī)則

<link rel="stylesheet" type="text/css" href="a.css"  media="screen and (min-width: 300px) and (max-width: 400px)">

// 這個(gè)就是說當(dāng)屏幕寬度在300-400像素的時(shí)候采用 調(diào)用a.ss文件

// 當(dāng)然如果不這樣調(diào)用的話也可以按下面的來做

@media screen and (max-width: 400px) { // 直接寫在css文件中,在文件中來判斷

  .main{

    widht:300px;

  }

}

 

3、結(jié)合Jquery來顯示固定的DIV

很多時(shí)候光靠CSS來自適應(yīng)的話,很多都不能達(dá)到好的效果,如果你能懂些Jquery最好了,比如網(wǎng)站上面的導(dǎo)航條,我們 就可以動(dòng)態(tài)的判斷網(wǎng)頁屏幕寬度多少時(shí)來顯示隱藏DIV框架。如果你不很清楚的話,建議去”www.w3school.com.cn“網(wǎng)站上學(xué)下,其實(shí)不難。

 

 

方法三:手機(jī)APP網(wǎng)站獨(dú)立制作

為什么我說手機(jī)APP網(wǎng)站獨(dú)立制作呢?這是因?yàn)槭謾C(jī)APP無法被搜索引擎收錄。如果不是大型的平臺(tái)型網(wǎng)站或互態(tài)型很強(qiáng)的網(wǎng)站,不建議采用這方法, 不緊不好宣傳也不好被人發(fā)現(xiàn)找到。
 
 
手機(jī)網(wǎng)站以上三種都可以,但我還是建議采用第二種,更加人性化,對(duì)于手機(jī)網(wǎng)站怎么做?如果你還有什么不清楚的話在線聯(lián)系我吧!
 
 
 

 

作者:一名

12年資深網(wǎng)站設(shè)計(jì)師 前端交互開發(fā)工程師

相關(guān)文章:

  • 領(lǐng)眾教您怎么免費(fèi)建設(shè)網(wǎng)站

    都說網(wǎng)站建設(shè)是個(gè)技術(shù)活,但如果你能看完我們下面說的內(nèi)容,也許您就可能自己建個(gè)免費(fèi)的網(wǎng)站哦!不管你是個(gè)人還是公司都可以用以下方法去建免費(fèi)的網(wǎng)站。當(dāng)然如果還會(huì)做設(shè)計(jì)的話那

    2014-01-14
  • 廈門手機(jī)網(wǎng)站建設(shè)用費(fèi)要多少錢?

    廈門手機(jī)網(wǎng)站建設(shè)用費(fèi)要多少錢?隨著智能手機(jī)用戶量的增加,企業(yè)對(duì)手機(jī)網(wǎng)站的需求也在急劇增加中,移動(dòng)互聯(lián)網(wǎng)中手機(jī)網(wǎng)站建設(shè)現(xiàn)在也是顯得舉足輕重。一、廈門手機(jī)網(wǎng)站建設(shè)費(fèi)用要多

    2014-01-14
  • 手機(jī)移動(dòng)網(wǎng)站建設(shè)設(shè)計(jì)者就不能錯(cuò)過

    在現(xiàn)在世界上的智能手機(jī)使用互聯(lián)網(wǎng)的人數(shù)已增加在很大程度上,尤其是最近幾年。小工具怪胎人的這種行為已經(jīng)導(dǎo)致增加移動(dòng)網(wǎng)站的發(fā)展。有移動(dòng)網(wǎng)站,每一個(gè)移動(dòng)Web開發(fā)人員應(yīng)該采

    2013-12-17
  • 一個(gè)完美的移動(dòng)網(wǎng)站建設(shè)四個(gè)關(guān)鍵因素

    在不斷涌現(xiàn)的技術(shù)世界,如果你不保持更新,那么你將被拋出退出市場(chǎng)。為了應(yīng)付與競(jìng)爭(zhēng)對(duì)手,作為一個(gè)開發(fā)人員,你應(yīng)該使用現(xiàn)成的技術(shù)來構(gòu)建您的移動(dòng)網(wǎng)站?,F(xiàn)在你知道了移動(dòng)網(wǎng)站的關(guān)鍵

    2013-12-17
  • 利用百度Site App一分鐘免費(fèi)為您建設(shè)手機(jī)網(wǎng)站

    利用百度Site App一分鐘免費(fèi)為您建設(shè)手機(jī)網(wǎng)站,之前與大家分享過百度開發(fā)者的一些應(yīng)用,其實(shí)這些應(yīng)用對(duì)于企業(yè)來說的話最好的一個(gè)就是Site App了,你想為自己的企業(yè)建立一個(gè)免費(fèi)的

    2013-08-26
  • 廈門怎么選擇一家好的網(wǎng)站建設(shè)公司

    廈門網(wǎng)站建設(shè)公司是非常多的,但是真正能服務(wù)好客戶的確沒有幾家的,怎么選擇一家好的網(wǎng)站建設(shè)公司呢,在幾年也許你一直在看公司門面,但如今那個(gè)年代早以過時(shí)了,一家好的公司,他們注

    2013-08-14
  • 手機(jī)平臺(tái)網(wǎng)站建設(shè)的春天以來到

    隨著國內(nèi)外對(duì)智能手機(jī)的用戶越來越多,不管在那里許許多的年青人手上都拿關(guān)手機(jī)在聊天上網(wǎng)玩游戲,安卓智能手機(jī)的誕生讓傳統(tǒng)的PC網(wǎng)站建設(shè)營銷不在是唯一了。隨說在智能手機(jī)誕生

    2013-06-29