整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
超文本標(biāo)記語(yǔ)言移動(dòng)站(HTML MOVEL STATION)是指根據(jù)你使用的移動(dòng)終端，適合你的網(wǎng)站類(lèi)型。你可以把它理解為你電腦網(wǎng)站的移動(dòng)版本。
你為什么想成為一個(gè)移動(dòng)電話站？
客戶(hù)經(jīng)常會(huì)問(wèn)，他們的手機(jī)可以訪問(wèn)哪些計(jì)算機(jī)網(wǎng)站，為什么他們需要成為手機(jī)網(wǎng)站？智能手機(jī)訪問(wèn)該網(wǎng)站的電腦版沒(méi)有問(wèn)題，但目前仍有大量用戶(hù)使用非智能手機(jī)。雖然火狐、chrome等瀏覽器也能達(dá)到訪問(wèn)的效果，但呈現(xiàn)的網(wǎng)頁(yè)非常凌亂，不能給用戶(hù)帶來(lái)好的體驗(yàn)。智能手機(jī)也很難通過(guò)瀏覽器縮放功能獲得良好的瀏覽體驗(yàn)，智能手機(jī)訪問(wèn)計(jì)算機(jī)網(wǎng)頁(yè)的速度遠(yuǎn)低于訪問(wèn)移動(dòng)網(wǎng)頁(yè)的速度。在手機(jī)互聯(lián)網(wǎng)流量昂貴的環(huán)境中，手機(jī)版本為用戶(hù)節(jié)省了流量。
HTML5移動(dòng)站建設(shè)的優(yōu)勢(shì):
1、手機(jī)網(wǎng)站擁有良好的移動(dòng)體驗(yàn)
當(dāng)用戶(hù)使用移動(dòng)瀏覽器訪問(wèn)您的網(wǎng)站時(shí)，他不會(huì)出現(xiàn)在您的電腦網(wǎng)站上，但會(huì)自動(dòng)檢測(cè)到使用該設(shè)備后顯示的html移動(dòng)臺(tái)。該網(wǎng)站更加符合移動(dòng)終端的操作習(xí)慣，使用起來(lái)更加流暢。
2、手機(jī)網(wǎng)站的推廣成本低
推廣一個(gè)html移動(dòng)電話站只需要很少的成本。用戶(hù)只要連接到互聯(lián)網(wǎng)，就可以掃描代碼或輸入網(wǎng)址來(lái)直接訪問(wèn)體驗(yàn)。與應(yīng)用程序相比，應(yīng)用程序也需要復(fù)雜的操作，如下載應(yīng)用程序，用戶(hù)更愿意擁有html的初始試用體驗(yàn)。
3、手機(jī)網(wǎng)站建設(shè)速度很快。
超文本標(biāo)記語(yǔ)言已經(jīng)存在多年，其發(fā)展技術(shù)已經(jīng)成熟，這也為超文本標(biāo)記語(yǔ)言手機(jī)站的發(fā)展速度提供了一定的保證。如果開(kāi)發(fā)一個(gè)應(yīng)用需要至少2個(gè)月的時(shí)間，那么html手機(jī)站需要的時(shí)間不到一半。
4、手機(jī)網(wǎng)站建設(shè)成本低
由于成熟的html網(wǎng)站建設(shè)技術(shù)，這種類(lèi)型的網(wǎng)站建設(shè)成本通常比今年才開(kāi)始的APP開(kāi)發(fā)成本更便宜、更實(shí)惠。
文筆者從實(shí)際工作經(jīng)驗(yàn)出發(fā)，結(jié)合參考相關(guān)文章，對(duì)移動(dòng)端產(chǎn)品（APP、小程序、H5）從13個(gè)方面進(jìn)行了比較分析，與大家分享。
移動(dòng)端產(chǎn)品包括小程序（本文特指微信小程序）、APP（安卓、IOS）、H5頁(yè)面。其中：
基于工作實(shí)際體驗(yàn)以及參考相關(guān)文章（文末有備注參考文章地址），下面將分別從運(yùn)行環(huán)境、系統(tǒng)權(quán)限、推廣方式（拉新）、運(yùn)營(yíng)手段、支付能力、登錄方式、用戶(hù)體驗(yàn)、抗風(fēng)險(xiǎn)能力（防止被封禁）、訪問(wèn)入口、開(kāi)發(fā)成本、迭代周期、外部限制、適用情形這13個(gè)方面來(lái)比較總結(jié)移動(dòng)端產(chǎn)品之間的不同特點(diǎn)。
（1）APP
Android：
轉(zhuǎn)發(fā)推廣海報(bào)（嵌套二維碼）到微信好友、朋友圈、QQ空間、QQ好友->二維碼掃碼->打開(kāi)網(wǎng)頁(yè)到應(yīng)用市場(chǎng)下載；或者生成推廣鏈接發(fā)送給好友或朋友圈分享 ->用戶(hù)點(diǎn)擊推廣鏈接打開(kāi)瀏覽器到應(yīng)用市場(chǎng)下載 。
IOS：
（2）小程序：
（3）H5
（1）APP
（2）小程序：微信內(nèi)推送服務(wù)通知；
（3）H5：郵件、給用戶(hù)發(fā)送短信。
（1）APP：
（2）小程序：
（3）H5：和APP類(lèi)似，是在網(wǎng)頁(yè)內(nèi)進(jìn)行登錄的。
（1）APP
（2）小程序：多上線幾個(gè)小程序；
（3）H5：多準(zhǔn)備幾個(gè)域名。
（1）APP
（2）小程序
（3）H5
（1）APP：需要分別上架安卓應(yīng)用市場(chǎng)和蘋(píng)果APP store，同時(shí)需要提交許多審核資料，流程繁瑣，審核時(shí)間也很長(zhǎng)。
附二者應(yīng)用市場(chǎng)審核區(qū)別：
附IOS上線APP方式： IOS上線需要擁有蘋(píng)果公司的開(kāi)發(fā)者帳號(hào)，分成兩類(lèi)：
其中，個(gè)人開(kāi)發(fā)者帳號(hào)開(kāi)發(fā)的APP，需經(jīng)蘋(píng)果商店，才能下載安裝；而企業(yè)開(kāi)發(fā)者帳號(hào)開(kāi)發(fā)的APP，只能自建發(fā)布網(wǎng)站，用戶(hù)到網(wǎng)站上下載。
（2）小程序：小程序上線需要提交微信審核，第一次審核（小程序?qū)徍斯俜浇o的時(shí)間期限為7個(gè)工作日以?xún)?nèi)給出審核結(jié)果）會(huì)慢些。
（3）H5：隨時(shí)上線，線上可以實(shí)時(shí)看到修改情況，因此比較靈活迭代，不受審核的限制。
（1）APP：依賴(lài)安卓和IOS系統(tǒng)提供的能力，不過(guò)這些操作系統(tǒng)大多穩(wěn)定，外部限制較少。
（2）小程序：
（3）H5：限制最小，基本上只要生成個(gè)可以用的鏈接，就可以在各種平臺(tái)上查看了。
（1）APP：
（2）小程序
（3）H5
如文章有欠妥之處，歡迎各位方家批評(píng)指正。
http://www.woshipm.com/pd/1315132.html
本文由 @初出茅廬 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。
題圖來(lái)自Unsplash，基于CC0協(xié)議。
解移動(dòng)端頁(yè)面與PC端頁(yè)面開(kāi)發(fā)的區(qū)別，學(xué)習(xí)移動(dòng)端頁(yè)面的開(kāi)發(fā)流程。
視口
視口是移動(dòng)設(shè)備上用來(lái)顯示網(wǎng)頁(yè)的區(qū)域，一般會(huì)比移動(dòng)設(shè)備可視區(qū)域大，寬度可能是980px或者1024px，目的是為了顯示下整個(gè)為PC端設(shè)計(jì)的網(wǎng)頁(yè)，這樣帶來(lái)的后果是移動(dòng)端會(huì)出現(xiàn)橫向滾動(dòng)條，為了避免這種情況，移動(dòng)端會(huì)將視口縮放到移動(dòng)端窗口的大小。這樣會(huì)讓網(wǎng)頁(yè)不容易觀看，可以用 meta 標(biāo)簽，name=“viewport ” 來(lái)設(shè)置視口的大小，將視口的大小設(shè)置為和移動(dòng)設(shè)備可視區(qū)一樣的大小。
設(shè)置方法如下( 快捷方式：meta:vp + tab )：
<head> ...... <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> ...... </head>
pc端與移動(dòng)端渲染網(wǎng)頁(yè)過(guò)程：
視網(wǎng)膜屏幕指的是屏幕的物理像素密度更高的屏幕，物理像素可以理解為屏幕上的一個(gè)發(fā)光點(diǎn)，無(wú)數(shù)發(fā)光的點(diǎn)組成的屏幕，視網(wǎng)膜屏幕比一般屏幕的物理像素點(diǎn)更小，常見(jiàn)有2倍的視網(wǎng)膜屏幕和3倍的視網(wǎng)膜屏幕，2倍的視網(wǎng)膜屏幕，它的物理像素點(diǎn)大小是一般屏幕的1/4,3倍的視網(wǎng)膜屏幕，它的物理像素點(diǎn)大小是一般屏幕的1/9。
圖像在視網(wǎng)膜屏幕上顯示的大小和在一般屏幕上顯示的大小一樣，但是由于視網(wǎng)膜屏幕的物理像素點(diǎn)比一般的屏幕小，圖像在上面好像是被放大了，圖像會(huì)變得模糊，為了解決這個(gè)問(wèn)題，可以使用比原來(lái)大一倍的圖像，然后用css樣式強(qiáng)制把圖像的尺寸設(shè)為原來(lái)圖像尺寸的大小，就可以解決模糊的問(wèn)題。
清晰度解決過(guò)程示意圖：
背景圖強(qiáng)制改變大小，可以使用background新屬性
background新屬性
background-size:
length：用長(zhǎng)度值指定背景圖像大小。不允許負(fù)值。
percentage：用百分比指定背景圖像大小。不允許負(fù)值。
auto：背景圖像的真實(shí)大小。
cover：將背景圖像等比縮放到完全覆蓋容器，背景圖像有可能超出容器。
contain：將背景圖像等比縮放到寬度或高度與容器的寬度或高度相等，背景圖像始終被包含在容器內(nèi)。
PC及移動(dòng)端頁(yè)面適配方法
設(shè)備屏幕有多種不同的分辨率，頁(yè)面適配方案有如下幾種：
1、全適配：響應(yīng)式布局+流體布局
2、移動(dòng)端適配：
流體布局+少量響應(yīng)式
基于rem的布局
流體布局
流體布局，就是使用百分比來(lái)設(shè)置元素的寬度，元素的高度按實(shí)際高度寫(xiě)固定值，流體布局中，元素的邊線無(wú)法用百分比，可以使用樣式中的計(jì)算函數(shù) calc() 來(lái)設(shè)置寬度，或者使用 box-sizing 屬性將盒子設(shè)置為從邊線計(jì)算盒子尺寸。
calc()
可以通過(guò)計(jì)算的方式給元素加尺寸，比如： width：calc(25% - 4px);
box-sizing
1、content-box 默認(rèn)的盒子尺寸計(jì)算方式
2、border-box 置盒子的尺寸計(jì)算方式為從邊框開(kāi)始，盒子的尺寸，邊框和內(nèi)填充算在盒子尺寸內(nèi)
響應(yīng)式布局
響應(yīng)式布局就是使用媒體查詢(xún)的方式，通過(guò)查詢(xún)?yōu)g覽器寬度，不同的寬度應(yīng)用不同的樣式塊，每個(gè)樣式塊對(duì)應(yīng)的是該寬度下的布局方式，從而實(shí)現(xiàn)響應(yīng)式布局。響應(yīng)式布局的頁(yè)面可以適配多種終端屏幕（pc、平板、手機(jī)）。
相應(yīng)布局的偽代碼如下：
@media (max-width:960px){
.left_con{width:58%;}
.right_con{width:38%;}
}
@media (max-width:768px){
.left_con{width:100%;}
.right_con{width:100%;}
}
基于rem的布局
首先了解em單位，em單位是參照元素自身的文字大小來(lái)設(shè)置尺寸，rem指的是參照根節(jié)點(diǎn)的文字大小，根節(jié)點(diǎn)指的是html標(biāo)簽，設(shè)置html標(biāo)簽的文字大小，其他的元素相關(guān)尺寸設(shè)置用rem，這樣，所有元素都有了統(tǒng)一的參照標(biāo)準(zhǔn)，改變html文字的大小，就會(huì)改變所有元素用rem設(shè)置的尺寸大小。
cssrem安裝
cssrem插件可以動(dòng)態(tài)地將px尺寸換算成rem尺寸
下載本項(xiàng)目，比如：git clone https://github.com/flashlizi/cssrem 進(jìn)入packages目錄：Sublime Text -> Preferences -> Browse Packages… 復(fù)制下載的cssrem目錄到剛才的packges目錄里。 重啟Sublime Text。
配置參數(shù) 參數(shù)配置文件：Sublime Text -> Preferences -> Package Settings -> cssrem px_to_rem - px轉(zhuǎn)rem的單位比例，默認(rèn)為40。 max_rem_fraction_length - px轉(zhuǎn)rem的小數(shù)部分的最大長(zhǎng)度。默認(rèn)為6。 available_file_types - 啟用此插件的文件類(lèi)型。默認(rèn)為：[".css", “.less”, “.sass”]。
1、結(jié)合流體布局和響應(yīng)式布局制作天天生鮮移動(dòng)端首頁(yè)頁(yè)面
2、使用基于rem的布局方式制作天天生鮮移動(dòng)端首頁(yè)頁(yè)面
天天生鮮首頁(yè)效果圖如下：
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
