• 電商網站建設及服務領跑者--TPshop,歡迎您!

    電話熱線: 0755-86140485 電話熱線: 0755-84655448

    手機商城軟件如何自適應不同的訪問終端

    2020-09-17 15:12:20|秩名|閱讀量:
    摘要:現在很多企業都在布局自己的網上商城,電腦端、手機網站、APP、小程序等都是企業網上商城的重要入口,今天小編分享一下:開發手機商城軟件如何自適應不同的訪問終端。

    手機商城軟件自適應不同的訪問終端,我們需要用到響應式布局,通過全局變量 $_SERVER['HTTP_USER_AGENT']來識別是電腦訪問還是手機瀏覽器訪問。


    第一,在網上商城網頁頭部,加入一行viewport元標簽。

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

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

    手機商城軟件如何自適應不同的訪問終端

    第二,在CSS文件尾部增加針對不同屏幕分辨率的規則

    網頁會根據屏幕寬度調整布局,開發網上商城需要適應不同的分辨率,不能使用絕對寬度的布局,也不能使用具有絕對寬度的元素。這一條非常重要。


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


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


    第三,網上商城網頁使用相對大小的字體

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


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


    上面的代碼指定,字體大小是頁面默認大小的100%,即16像素。


    h1 {font-size: 1.5em;}


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


    small {font-size: 0.875em;}


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


    第四,網上商城選擇加載CSS

    “自適應網頁設計”的核心,就是CSS3引入的Media Query模塊,自動探測屏幕寬度,然后加載相應的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文件。


    當然,我們除了用html標簽加載CSS文件,還可以使用現有CSS文件中加載。


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


    代碼如下:


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


    CSS的@media規則:同一個CSS文件中,可以根據不同的屏幕分辨率,選擇應用不同的CSS規則。


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


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


    #sidebar {display:none;}


    }


    <TPshop 是國內知名商城系統及商城網站建設開發商,為企業級商家提供零售商城、B2B2C多用戶商城系統、網上商城開發、三級分銷系統、小程序商城、社區團購系統等多端商城及電子商務行業解決方案>


    摘自:網絡




    返回頂部
    欧美最新精品videossexohd
  • <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <文本链> <文本链> <文本链> <文本链> <文本链> <文本链>