Responsive設計 不同裝置的解析度設定

2021-07-23 21:39:43 字數 1015 閱讀 5352

1.1024px顯屏

@media screen and (max-width : 1024px)

2.800px顯屏

@media screen and (max-width : 800px)

3.640px顯屏

@media screen and (max-width : 640px)

4.ipad橫板顯屏

@media screen and (max-device-width: 1024px) and (orientation: landscape)

5.ipad豎板顯屏

@media screen and (max-device-width: 768px) and (orientation: portrait)

6.iphone 和 smartphones

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

現在有關於這方面的運用也是相當的成熟,twitter的bootstrap第二版本中就加上了這方面的運用。大家可以對比一下:

@media (max-width: 480px)              

@media (max-width: 768px)              

@media (min-width: 768px) and (max-width: 980px)      

@media (min-width: 1200px)

複雜的示例在這裡也無法學習,我們來看乙個簡單的示例,在寬屏下是3列布局,當螢幕在小於480時是單列顯示。看一下右側css編輯器中的**,思考一下效果實現的原理。

同乙個TextView,不同顏色,不同字型大小設定

開發中經常會遇到同乙個textview需要顯示不同顏色,不同字型大小的文字。通過spannablestringbuilder 可以很容易的實現這兩個功能。以下是乙個自定義的spannableutils public class spannableutils spannablestringbuilde...

Head First設計模式筆記(設配器模式)

設配器模式 將乙個類的介面,轉換成客戶期望的另乙個介面,設配器讓原來介面不相容的類可以合作無間 火雞介面 public inte ce turkey具體的火雞 public class wildturkey implements turkey override public void fly 鴨子介...

不同設計模式的區別

簡單工廠 工廠方法 抽象工廠 builder模式的區別 no1 核心定義 1 簡單工廠模式 乙個工廠方法建立不同型別的物件 2 工廠方法模式 乙個具體的工廠類負責建立乙個具體物件型別 4 builder模式 物件的構建與表示分離,它更注重物件的建立過程 no2 工廠方法模式與簡單工廠的區別主要有兩點...