亚洲色图综合,国产成人久久久精品二区三区蜜臀,日韩久久中文,久久人人爽人人爽av片

首頁(yè)>公司動(dòng)態(tài)>手機(jī)商城軟件如何自適應(yīng)不同的訪問(wèn)終端
熱點(diǎn)新聞

手機(jī)商城軟件如何自適應(yīng)不同的訪問(wèn)終端

作者:TPshop搜豹商城   發(fā)布時(shí)間:2020-09-17 15:11   閱讀:1463

現(xiàn)在很多企業(yè)都在布局自己的網(wǎng)上商城,電腦端、手機(jī)網(wǎng)站、APP、小程序等都是企業(yè)網(wǎng)上商城的重要入口,今天小編分享一下:開發(fā)手機(jī)商城軟件如何自適應(yīng)不同的訪問(wèn)終端。


手機(jī)商城軟件自適應(yīng)不同的訪問(wèn)終端,我們需要用到響應(yīng)式布局,通過(guò)全局變量 $_SERVER['HTTP_USER_AGENT']來(lái)識(shí)別是電腦訪問(wèn)還是手機(jī)瀏覽器訪問(wèn)。

手機(jī)商城軟件如何自適應(yīng)不同的訪問(wèn)終端

第一,在網(wǎng)上商城網(wǎng)頁(yè)頭部,加入一行viewport元標(biāo)簽。

<meta name=”viewport” content=”width=device-width, initial-scale=1″ />


viewport是網(wǎng)頁(yè)默認(rèn)的寬度和高度,我們將網(wǎng)頁(yè)寬度默認(rèn)等于屏幕寬度(width=device-width),原始縮放比例(initial-scale=1)為1.0,即網(wǎng)頁(yè)初始大小占屏幕面積的100%。


第二,在CSS文件尾部增加針對(duì)不同屏幕分辨率的規(guī)則

網(wǎng)頁(yè)會(huì)根據(jù)屏幕寬度調(diào)整布局,開發(fā)網(wǎng)上商城需要適應(yīng)不同的分辨率,不能使用絕對(duì)寬度的布局,也不能使用具有絕對(duì)寬度的元素。這一條非常重要。


具體說(shuō),CSS代碼不能指定像素寬度:width:xxx px;


只能指定百分比寬度:width: xx%;或者width:auto;


第三,網(wǎng)上商城網(wǎng)頁(yè)使用相對(duì)大小的字體

字體不能使用絕對(duì)大?。╬x),而只能使用相對(duì)大?。╡m)。


body {font: normal 100% Helvetica, Arial, sans-serif;}


上面的代碼指定,字體大小是頁(yè)面默認(rèn)大小的100%,即16像素。


h1 {font-size: 1.5em;}


然后,h1的大小是默認(rèn)大小的1.5倍,即24像素(24/16=1.5)。


small {font-size: 0.875em;}


small元素的大小是默認(rèn)大小的0.875倍,即14像素(14/16=0.875)。


第四,網(wǎng)上商城選擇加載CSS

“自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)”的核心,就是CSS3引入的Media Query模塊,自動(dòng)探測(cè)屏幕寬度,然后加載相應(yīng)的CSS文件。


<link rel=”stylesheet” type=”text/css”


 media=”screen and (max-device-width: 400px)”


 href=”tinyScreen.css” />


即,如果屏幕寬度小于400像素(max-device-width: 400px),就加載tinyScreen.css文件。


<link rel=”stylesheet” type=”text/css”


 media=”screen and (min-width: 400px) and (max-device-width: 600px)”


 href=”smallScreen.css” />


如果屏幕寬度在400像素到600像素之間,則加載smallScreen.css文件。


當(dāng)然,我們除了用html標(biāo)簽加載CSS文件,還可以使用現(xiàn)有CSS文件中加載。


如果屏幕寬度小于400像素,則column塊取消浮動(dòng)(float:none)、寬度自動(dòng)調(diào)節(jié)(width:auto),sidebar塊不顯示(display:none)。


代碼如下:


@import url(“tinyScreen.css”) screen and (max-device-width: 400px);


CSS的@media規(guī)則:同一個(gè)CSS文件中,可以根據(jù)不同的屏幕分辨率,選擇應(yīng)用不同的CSS規(guī)則。


@media screen and (max-device-width: 400px)


{.column {float: none;width:auto;}


#sidebar {display:none;}


}


<TPshop()是國(guó)內(nèi)知名商城系統(tǒng)及商城網(wǎng)站建設(shè)開發(fā)商,為企業(yè)級(jí)商家提供零售商城、B2B2C多用戶商城系統(tǒng)、網(wǎng)上商城開發(fā)、三級(jí)分銷系統(tǒng)、小程序商城、社區(qū)團(tuán)購(gòu)系統(tǒng)等多端商城及電子商務(wù)行業(yè)解決方案>


摘自:網(wǎng)絡(luò)


上一篇:網(wǎng)上商城系統(tǒng)如何實(shí)現(xiàn)API接口 下一篇:電子商務(wù)平臺(tái)建設(shè)弊端有哪些?
All Rights Reserved 深圳搜豹網(wǎng)絡(luò)有限公司版權(quán)所有.粵ICP備15065422號(hào) 深圳市龍崗區(qū)坂田街道楊美社區(qū)六維商務(wù)中心C座三層C312
tel code back_top