手機自適應網頁代碼需要注意的幾個問題
來源: | 作者:szhuhang | 發布時間: 657天前 | 1028 次瀏覽 | 分享到:
    現在手機網站基本上成為了企業的標配,隨著4G的到來,手機流量的費用越來月底,很多企業都轉為了手機上來辦公,所以一個手機站點成為了很多企業必須要解決的事情,互航科技這幾天就專門采用了H5的元素來編寫代碼,可以是應用各大尺寸屏幕,今天就給大家講講自適應網站需要注意的幾個問題,
第一,寬度上的自動調節,起首,網頁代碼的頭部,加入一行viewport元標簽。viewport網頁默許的寬度和高度,上面這行代碼的意義是網頁寬度默認等于屏幕寬度(width=device-width原始縮放比例(initial-scale=1為1.0即網頁初始大小占屏幕面積的100%,關于viewport屬性,真正在構兵挪動web開辟是才遇到一把的pc布局都是流動的960px1000px這類。如下圖就是采用自適應寬度的編寫方式,

第二,字體的設置方面,字體也不能操縱絕對巨細(px而只能操縱相對巨細(embodi{
font:normal100%Helvetica,下面的代碼指定,字體巨細是頁面默認巨細的100%即16像素。h1{font-size:1.5em; }而后,h1巨細是默認巨細的1.5倍,即24像素(24/16=1.5small{font-size:0.875em;}small元素的巨細是默認巨細的0.875倍。
第三,圖片代碼的編寫,除了布局和文本,"自適應網頁設想"還必須實現圖片的自動縮放。
這只要一行CSS代碼:img{max-width:100%;}這行代碼對于大多數嵌入網頁的視頻也有效,所以可以或許寫成:img,object{max-width:100%;}
老版本的IE不支持max-width所以只好寫成:img{width:100%;}別的,window平臺縮放圖片時,可以或許出現圖像失真景象。這時候,可以或許嘗試利用IE專有飭令:img{-ms-interpolation-mode:bicubic;}或,EthanMarcottimgSizer.jaddLoadEvfunction{varimg=document.getElementByIdx_x"content".getElementsByTagName_r"img";imgSizer.colimg;};
不外,有條件的話,最好還是遵照不合巨細的屏幕,加載不合分辨率的圖片。有很多體式格局可以或許做到這一條,服務器端和用戶端都可以實現。
第四,不要設置絕對寬度,由于網頁會遵照屏幕寬度調整結構,所以不能操縱絕對寬度的結構,也不能操縱具有絕對寬度的元素。這一條非常重要。




{ganrao}