自適應6大調整

2021-08-05 20:36:34 字數 2205 閱讀 5139

自適應網頁設計**需要做的6大調整

1、 允許或禁止調整頁面大小

ios和android瀏覽器都基於webkit核心,這兩種瀏覽器以及其他的很多瀏覽器都支援viewport meta元素覆蓋預設的畫布縮放設定,只需在html的標籤中插入乙個標籤,標籤中可以設定具體的寬度(如畫素值)或者縮放比例2.0(裝置實際尺寸的兩倍),下面是將乙個頁面放大到裝置實際尺寸兩倍顯示的meta標籤示例:

如果不允許調整頁面大小,那麼把user-scalable=yes改為user-scalable=no,如:

2、將網頁修改為百分比布局

自適應網頁是絕對不可以使用固定尺寸來指定布局範圍的,而是用百分比布局。

當某個瀏覽視窗處於**查詢固定的範圍之外,網頁就需要水平滾動才能完整瀏覽,而通過百分比布局可以頁面元素根據視窗大小在乙個又乙個**查詢之間靈活修正樣式,具體來講,就是css**不會指定具體畫素寬度:width:*** px,而是會指定乙個百分比寬度:width:xx%,或者直接就是width:auto。

這裡大家可以根據乙個簡易的公式將固定畫素寬度轉換成對應的百分比寬度:目標元素寬度 ÷ 上下文元素寬度 = 百分比寬度

例如:轉換為百分比的header區塊的css為:

#header

3、用em替換px

同樣,目標元素寬度 ÷ 上下文元素寬度 = 百分比寬度這個公式也適用於將文字的畫素單位轉換為相對單位,值得注意的是,現代瀏覽器的預設文字都是16畫素,因此一開始給body標籤應用下列任何一條規則所產生的效果都一樣:

font-size: 100%;

font-size:16px;

font-size: 1em;

例如某****標題相應的樣式:

#logo

修改後的樣式如下:

#logo

4、流動布局(fluid grid)的使用

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

.main

.leftbar

這麼做的好處是,如果寬度太小,放不下兩個元素,後面的元素會自動滾動到前面元素的下方,不會在水平方向溢位,避免了水平滾動條的出現,大大提公升了使用者的閱讀體驗。另外,絕對定位(position:absolute)的使用,也要非常小心。

5、media query技術的使用

在自適應設計的技術中,css3支援css2.1定義的**型別,同時新增了很多涉及**型別的功能屬性,包括max-width(最大寬度),device-width(裝置寬度,orientation(螢幕定向:橫屏或豎屏),因此可以通過media query載入相應的css檔案.       例如,下面**定義了如果頁面通過螢幕呈現,並且螢幕寬度不超過480px,則載入shetland.css

同樣可以建立多個樣式表,以適應不同裝置或者不同解析度的寬度範圍,當然更有效的做法是將多個media query整合在乙個樣式表檔案中:

@media only screen and (min-devece-width: 320px) and (max-device-width: 480px)  

@media screen and (min-width: 600px)

}上面的**中定義的樣式類只有在瀏覽器螢幕寬度超過600px時才會有效。

因此,使用min-width和max-width可以同時判斷螢幕尺寸與瀏覽器實際寬度,如果希望通過media query作用於某種特定裝置,但忽略在其上執行的瀏覽器是否由於沒有最大化尺寸與裝置螢幕尺寸不一致,則可以使用max-device-width和max-device-width屬性來判斷裝置本身螢幕尺寸。

6、 設計響應式

有很多同比縮放的技術,其中有不少是簡單易行的,比較流行的方法是使用css的max-width屬性:

img

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

img

此外,windows平台縮放時,可能出現影象失真現象。這時,可以嘗試使用ie的專有命令:

img

或者,ethan marcotte的imgsizer.js。

addloadevent(function() );

如果有條件的話,最好能根據螢幕的不同大小,載入不同解析度的。

當當網組織架構大調整

據了解,新業務群組織架構調整後結構如下 1 數字業務 含電子書 聽書 網路品 按需印刷 總 文創 含文具 藝術品 工藝品 樣工藝品 向陳立均匯報。2 數字業務電子書開發團隊向李海濤匯報。3 農村電商商 自有品牌百貨 含優品等 向徐莎莉匯報。4 自出版 實體書店向張巍匯報。5 影業和小品牌調整由武文濤...

Oracle授權流程大調整 COLS部門或被關閉

有訊息人士透露,受到雲銷售模式的影響,oracle正在著手關閉其compliance and optimisation license services cols 部門。一位熟悉oracle授權流程的訊息靈通人士對 the reg 表示,cols正在停業整頓,因為該公司優先考慮用新入職的員工進行雲銷...

微信 支付寶宣布重大調整

techweb 10月6日訊息,據上海市場監管微信 訊息,近日,微信 支付寶接連宣布,與銀聯雲閃付深化互聯互通,阿里巴巴旗下應用也陸續接入微信支付。相關話題引發關注。騰訊 微信支付已與銀聯雲閃付app正式實現線下條碼的互認互掃 9月30日,微信發布宣告稱,騰訊微信支付正與銀聯雲閃付在支付 服務兩個層...