手機(jī)網(wǎng)站怎么做?
來(lái)源:領(lǐng)眾品牌 查看次數(shù): 發(fā)表時(shí)間:2014-06-04 18:57:23手機(jī)網(wǎng)站怎么做?如今很多企業(yè)對(duì)移動(dòng)終端手機(jī)等設(shè)備也建設(shè)了網(wǎng)站,今天就說(shuō)說(shuō)手機(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語(yǔ)法,其實(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樣式采用百分符更為合適,隨說(shuō)手機(jī)網(wǎng)站與普通網(wǎng)站建設(shè)方法是差不多的,但手機(jī)種類很大分辨率與大 有不同,這就對(duì)CSS樣式要有所規(guī)范了,盡量少采用圖片式的布局,如下面的代碼:
.concent{ width:100%; height:auto} .concent li{ float:left; width:20%; //采用百分號(hào)來(lái)控制顯示的寬度 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ā)表過(guò)一個(gè)相關(guān)”廈門(mé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"> // 開(kāi)通采用自適應(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的寫(xiě)法規(guī)則
<link rel="stylesheet" type="text/css" href="a.css" media="screen and (min-width: 300px) and (max-width: 400px)"> // 這個(gè)就是說(shuō)當(dāng)屏幕寬度在300-400像素的時(shí)候采用 調(diào)用a.ss文件 // 當(dāng)然如果不這樣調(diào)用的話也可以按下面的來(lái)做 @media screen and (max-width: 400px) { // 直接寫(xiě)在css文件中,在文件中來(lái)判斷 .main{ widht:300px; } }
|
3、結(jié)合Jquery來(lái)顯示固定的DIV
很多時(shí)候光靠CSS來(lái)自適應(yīng)的話,很多都不能達(dá)到好的效果,如果你能懂些Jquery最好了,比如網(wǎng)站上面的導(dǎo)航條,我們 就可以動(dòng)態(tài)的判斷網(wǎng)頁(yè)屏幕寬度多少時(shí)來(lái)顯示隱藏DIV框架。如果你不很清楚的話,建議去”www.w3school.com.cn“網(wǎng)站上學(xué)下,其實(shí)不難。
方法三:手機(jī)APP網(wǎng)站獨(dú)立制作
作者:一名
12年資深網(wǎng)站設(shè)計(jì)師 前端交互開(kāi)發(fā)工程師相關(guān)文章:
-
領(lǐng)眾教您怎么免費(fèi)建設(shè)網(wǎng)站
都說(shuō)網(wǎng)站建設(shè)是個(gè)技術(shù)活,但如果你能看完我們下面說(shuō)的內(nèi)容,也許您就可能自己建個(gè)免費(fèi)的網(wǎng)站哦!不管你是個(gè)人還是公司都可以用以下方法去建免費(fèi)的網(wǎng)站。當(dāng)然如果還會(huì)做設(shè)計(jì)的話那
2014-01-14 -
廈門(mén)手機(jī)網(wǎng)站建設(shè)用費(fèi)要多少錢(qián)?
廈門(mén)手機(jī)網(wǎng)站建設(shè)用費(fèi)要多少錢(qián)?隨著智能手機(jī)用戶量的增加,企業(yè)對(duì)手機(jī)網(wǎng)站的需求也在急劇增加中,移動(dòng)互聯(lián)網(wǎng)中手機(jī)網(wǎng)站建設(shè)現(xiàn)在也是顯得舉足輕重。一、廈門(mén)手機(jī)網(wǎng)站建設(shè)費(fèi)用要多
2014-01-14 -
手機(jī)移動(dòng)網(wǎng)站建設(shè)設(shè)計(jì)者就不能錯(cuò)過(guò)
在現(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開(kāi)發(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è)開(kāi)發(fā)人員,你應(yīng)該使用現(xiàn)成的技術(shù)來(lái)構(gòu)建您的移動(dòng)網(wǎng)站。現(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)站,之前與大家分享過(guò)百度開(kāi)發(fā)者的一些應(yīng)用,其實(shí)這些應(yīng)用對(duì)于企業(yè)來(lái)說(shuō)的話最好的一個(gè)就是Site App了,你想為自己的企業(yè)建立一個(gè)免費(fèi)的
2013-08-26 -
廈門(mén)怎么選擇一家好的網(wǎng)站建設(shè)公司
廈門(mén)網(wǎng)站建設(shè)公司是非常多的,但是真正能服務(wù)好客戶的確沒(méi)有幾家的,怎么選擇一家好的網(wǎng)站建設(shè)公司呢,在幾年也許你一直在看公司門(mén)面,但如今那個(gè)年代早以過(guò)時(shí)了,一家好的公司,他們注
2013-08-14 -
手機(jī)平臺(tái)網(wǎng)站建設(shè)的春天以來(lái)到
隨著國(guó)內(nèi)外對(duì)智能手機(jī)的用戶越來(lái)越多,不管在那里許許多的年青人手上都拿關(guān)手機(jī)在聊天上網(wǎng)玩游戲,安卓智能手機(jī)的誕生讓傳統(tǒng)的PC網(wǎng)站建設(shè)營(yíng)銷不在是唯一了。隨說(shuō)在智能手機(jī)誕生
2013-06-29