做完了PC站,你就離移動站優化不遠了

2021-09-19 15:10:33 字數 3044 閱讀 8789

隨著高階手機(andriod,iphone,ipod,winphone等)的盛行,移動互聯應用開發也越來越受到人們的重視,用html5開發移動應用是最好的選擇。然而,每一款手機有不同的解析度,不同螢幕大小,如何使我們開發出來的應用或頁面大小能適合各種高階手機使用呢?看了這篇文章可以幫你做到這一點。咱們來點直接的吧 : )

首先,在網頁**的頭部,加入一行viewport元標籤。所有主流瀏覽器都支援這個設定,包括ie9。對於那些老式瀏覽器(主要是ie6、7、8),需要使用css3-mediaqueries.js

ps:真的很慶幸我是做移動的!ie神馬的,簡直糟糕的不要不要的!

分別解析下每個屬性的含義。

width

控制 viewport 的大小,可以指定的乙個值或者特殊的值,如 device-width 為裝置的寬度(單位為縮放為 100% 時的 css 的畫素)。

height

和 width 相對應,指定高度。

target-densitydpi

乙個螢幕畫素密度是由螢幕解析度決定的,通常定義為每英吋點的數量(dpi)。android支援三種螢幕畫素密度:低畫素密度(low-dpi),中畫素密度(medium-dpi),高畫素密度(high-dpi)。乙個低畫素密度的螢幕每英吋上的畫素點更少,而乙個高畫素密度的螢幕每英吋上的畫素點更多。android browser和webview預設螢幕為中畫素密度

initial-scale

初始縮放。即頁面初始縮放程度。這是乙個浮點值,是頁面大小的乙個乘數。例如,如果你設定初始縮放為「1.0」,那麼,web頁面在展現的時候就會以target density解析度的1:1來展現。如果你設定為「2.0」,那麼這個頁面就會放大為2倍。

maximum-scale

最大縮放。即允許的最大縮放程度。這也是乙個浮點值,用以指出頁面大小與螢幕大小相比的最大乘數。例如,如果你將這個值設定為「2.0」,那麼這個頁面與target size相比,最多能放大2倍。

user-scalable

使用者調整縮放。即使用者是否能改變頁面縮放程度。如果設定為yes則是允許使用者對其進行改變,反之為no。預設值是yes。如果你將其設定為no,那麼minimum-scale 和 maximum-scale都將被忽略,因為根本不可能縮放。

所有的縮放值都必須在0.01–10的範圍之內。

最常用的方式為:

當然,你還可以這麼用。

由於網頁會根據螢幕寬度調整布局,所以不能使用絕對寬度的布局,也不能使用具有絕對寬度的元素。這一條非常重要!這一條非常重要!這一條非常重要!嗯!

具體說來就是css**不能使用絕對寬度單位,如width: *** px;。取而代之的是使用相對寬度單位,如:使用百分比寬度width: xx%;或者width:auto;

字型也不能使用絕對大小(px),而只能使用相對大小(em)。

body
上面的**指定,字型大小是頁面預設大小的100%,即16畫素。

h1
然後,h1的大小是預設大小的1.5倍,即24畫素(24/16=1.5)。

small
small元素的大小是預設大小的0.875倍,即14畫素(14/16=0.875)。

「流動布局」的含義是,各個區塊的位置都是浮動的,不是固定不變的。

.main 

.leftbar

float的好處是,如果寬度太小,放不下兩個元素,後面的元素會自動滾動到前面元素的下方,不會在水平方向overflow(溢位),避免了水平滾動條的出現。

另外,絕對定位position: absolute的使用,也要非常小心。

「自適應網頁設計」的核心,就是css3引入的media query模組。它的意思就是,自動探測螢幕寬度,然後載入相應的css檔案。

上面的**意思是,如果螢幕寬度小於400畫素max-device-width: 400px就載入tinyscreen.css檔案。

如果螢幕寬度在400畫素到600畫素之間,則載入smallscreen.css檔案。

除了用html標籤載入css檔案,還可以在現有css檔案中載入。

同乙個css檔案中,也可以根據不同的螢幕解析度,選擇應用不同的css規則。

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

#sidebar

}

上面的**意思是,如果螢幕寬度小於400畫素,則column塊取消浮動float:none、寬度自動調節width:auto,sidebar塊不顯示display:none

img
img, object
老版本的ie不支援max-width,所以只好寫成:

img
img
或者,ethan marcotte的imgsizer.js

addloadevent(function() );
最好還是做適配解析度的。有很多方法可以做到同樣效果,伺服器端和客戶端都可以實現。

今天終於把網路協作學習系統做完了

歷時兩個月的不間斷工作,經過若干次的挑燈夜戰,今天終於把該系統做完了。心裡很平靜,沒有了以前做完乙個工作的興奮,也許在這上面花的精力太多了,完成是必然的緣故。回憶一下這兩個月的奮鬥史,一切從無到有,很多東西都是在需要的時候才去查資料,然後嘗試,經過很多次的失敗,然後測試通過。其間的感受只有經歷過的人...

專案做完了,總結一下(下)

昨天下午總結了一下專案值得注意的地方,記錄在 專案做完了,總結一下 上 時間倉促,也沒有總結完全。等有時間,還要細細總結。今天,我主要總結一下專案成功的可能因素,比較膚淺。雖然專案受很多不利的因素的困擾,但最終還是交付給使用者使用,不管怎麼樣,這中間還是有很多值得思考的方面。1 專案經理 這個專案經...

程式設計師接私活怎樣防止做完了不給錢?

首先跟大家說明一點,我們做 it 類的外包開發,是非標品開發,所以很有可能在開發過程中會有這樣那樣的需求修改,而這種需求修改很容易造成扯皮,進而影響到費用支付,甚至出現做完了專案收不到錢的情況。那麼,怎麼保證自己的薪酬安全呢?我們在開工前,一定要做好一些證據方面的準備 也就是 討薪 的理論依據 這其...