<noframes id="pfp5n">

<form id="pfp5n"></form>
<noframes id="pfp5n">
<noframes id="pfp5n"><form id="pfp5n"></form>
<address id="pfp5n"><form id="pfp5n"><nobr id="pfp5n"></nobr></form></address>
<form id="pfp5n"></form>

    <listing id="pfp5n"></listing>

    <listing id="pfp5n"></listing>
          您當前的位置:首頁 > 建站常識 > HTML整合

          自適應移動設備頁面的設計

          2016-08-01
            現在移動設備越來越多,使用手機上網的人也越來越多,移動設備也成為訪問互聯網的常見終端設置。以前我們在編寫管理系統的時候,客戶端只需要考慮PC機桌面設備,現在則必須要考慮到移動終端設備了。
            移動終端設備的屏幕分辨率很多都不一樣,手機就分很多種大小的,然后還有一些平板電腦,如ipad,ipad迷你,等等,大小很難統一, 瀏覽器也各式各樣,這使得做移動設備的客戶端界面有了一定的困難,總不不能每種尺寸的都做上一遍。
            于是很多電商公司做了3G版,觸摸屏版,普通版,電腦版等等。每種版本按大體的規則做了一遍。
            手機的屏幕比較小,寬度通常是600像素以下。老式一些的手機用普通版,屏幕寬度300px以下,多以文字連接為主。手機帶觸摸屏的,屏幕要稍微大一些,操作界面又多以圖片觸摸為主。還有一些ipad等的屏幕就更大了,可以做更多內容的展示。
            電商網站主要靠這些終端設備來完成銷售,為了讓用戶使用各種設置都有良好的體驗,促進訂購,電商公司不惜分開做多個版本。
            我們做企業管理軟件的,頁面展示的信息不是那么多時,可以將所有移動設備的終端頁面做成標準的版本,就一套系統,然后根據屏幕的大小自適應,以后維護也就這一套。
            自適應頁面的設計從開始就有很多需要注意的:
            1.頁面中關乎布局的元素都不設置絕對的寬和高,都按百分比來設置。
            2.字體也使用相對大小的字體
            如:
            body{font: normal 100%;} 字體大小事頁面默認大小的100%,即16像素。
            h2 {font-size:1.5em} h2標題的文字大小事默認字體大小的1.1倍。
            3.用div+css+浮動 來布局  各個盒子的位置用浮動的,不是固定不變的。
            如:
            .content{float:right;75%;}
            .sidebar{float:left;width:20%;}
            用百分比 + 浮動,當屏幕太窄,放不下兩個盒子的時候,后面的元素會自動移動到前面元素的下方,不會使得頁面產生橫向的滾動條。
            4.盡量不要使用絕對定位,即position:absolute的定位。
            5.根據瀏覽器的版本做一些css的處理
            6.根據屏幕的寬度加載相應的css文件
            如:
            <link rel="stylesheet" type="text/css"  media="screen and (max-device-width: 400px)"  href="tinyScreen.css" />
            屏幕寬度小于400像素,就加載tinyScree.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文件
            @import url("tinyScreen.css") screen and (max-device-width: 400px);
            在現有CSS文件中加載。
            7.css文件中,根據分辨率設置不同的css風格
            @media screen and (max-device-width: 400px) {
            .column  {float: none;width:auto;}
            .sidebar {display:none;}
            }
            屏幕寬度小于400像素,則column塊取消浮動(float:none)、寬度自動調節(width:auto),sidebar塊不顯示(display:none)。
            @media screen and(min-width:400px){
            .content {width:65%;}
            .sidebar {width:30%;}
            }
            屏幕大于400像素,content占65%,sidebar占30%。
            8.圖片自動縮放,自適應大小
            如:img{max-width:100%;}
            9.設置meta標簽
            如:<meta name="viewport" content="width=device-width, initial-scale=1.0">
            viewport meta標簽告訴瀏覽器視口寬度等于設備屏幕寬度,且不進行初始縮放。
            當然程序員理想的狀態是做成一套,但往往事與愿違,我們至少需要做成PC機桌面設備一套,手機版觸摸屏的一套,ipad3G版一套。在這三種的系統中再做一些各自小范圍的自適應。

          一切精彩源自七七網絡!我們傾力打造時尚潮流第一線!

          ? 2012-2024七七世界網站建設     20707.net 1125w.com 版權所有     豫ICP備14018694號-1

          人成久久影院,和小姪女保持性关系故事,亚洲综合色欲色欲综合网站
          <noframes id="pfp5n">

          <form id="pfp5n"></form>
          <noframes id="pfp5n">
          <noframes id="pfp5n"><form id="pfp5n"></form>
          <address id="pfp5n"><form id="pfp5n"><nobr id="pfp5n"></nobr></form></address>
          <form id="pfp5n"></form>

            <listing id="pfp5n"></listing>

            <listing id="pfp5n"></listing>