<form id="v1hh9"><nobr id="v1hh9"></nobr></form>

            <form id="v1hh9"></form>
            您當前的位置:首頁 > 建站常識 > 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

            久久蜜芽,欧美永久免费看A片在线看,免费看片汅的app软件

                <form id="v1hh9"><nobr id="v1hh9"></nobr></form>

                      <form id="v1hh9"></form>