全國服務熱線:400-6566-535 廣州熱線:020-82105691 客服QQ:858560031
后臺演示 模板匯 豬八戒 阿里巴巴商鋪 手機版
網絡營銷電子商務建站知識編程知識行業資訊SEO知識常見問題網絡安全
您當前位置: 股票融资余额高意味着什么 >資訊活動 > 建站知識 > 響應式布局設置[email protected] only screen and

股票融资余额高意味着什么:響應式布局設置[email protected] only screen and

時間:2016-12-17 作者:七想網絡

股票融资余额高意味着什么 www.744692.live  


@media only screen and 

only(限定某種設備)

screen 是媒體類型里的一種

and 被稱為關鍵字,其他關鍵字還包括 not(排除某種設備)

/* 常用類型 */
類型 解釋
all 所有設備
braille 盲文
embossed 盲文打印
handheld 手持設備
print 文檔打印或打印預覽模式
projection 項目演示,比如幻燈
screen 彩色電腦屏幕
speech 演講
tty 固定字母間距的網格的媒體,比如電傳打字機
tv 電視

screen一般用的比較多,下面是我自己的嘗試,列出常用的設備的尺寸,然后給頁面分了幾個尺寸的版本。

/* 常用設備 */
設備 屏幕尺寸
顯示器 1280 x 800
ipad 1024 x 768
Android 800 x 480
iPhone 640 x 960

兩種方式

a<link rel="stylesheet" type="text/css" href="styleB.css"  media="screen and (min-width: 600px) and (max-width: 800px)">

意思是當屏幕的寬度大于600小于800時,應用styleB.css

b@media screen and (max-width: 600px) { /*當屏幕尺寸小于600px時,應用下面的CSS樣式*/

  .class {    background: #ccc; }}


device-aspect-ratio

device-aspect-ratio可以用來適配特定屏幕長寬比的設備,這也是一個很有用的屬性,比如,我們的頁面想要對長寬比為4:3的普通屏幕定義一種樣式,然后對于16:9和16:10的寬屏,定義另一種樣式,比如自適應寬度和固定寬度:

@media only screen and (device-aspect-ratio:4/3)
-webkit-min-device-pixel-ratio的常見值對比是設備上物理像素和設備獨立像素,設備像素比率
設備分辨率設備像素比率
Android LDPI320×2400.75
Iphone 3 & Android MDPI320×4801
Android HDPI480×8001.5
Iphone 4960×6402.0

     -webkit-min-device-pixel-ratio: 1.0

  • 所有非 Retina 的 Mac

  • 所有非 Retina 的 iOS 設備

  • Acer Iconia A500

  • Samsung Galaxy Tab 10.1

  • Samsung Galaxy S

  • 其他設備

  • -webkit-min-device-pixel-ratio為1.3

  1. Google Nexus 7

  • -webkit-min-device-pixel-ratio為1.5

  1. Google Nexus S 

  2. Samsung Galaxy S II 

  3. HTC Desire

  4. HTC Desire HD

  5. HTC Incredible S 

  6. HTC Velocity

  7. HTC Sensation 

  • -webkit-min-device-pixel-ratio為2.0

  1. iPhone 4

  2. iPhone 4S

  3. iPhone 5

  4. iPad (3rd generation)

  5. iPad 4

  6. 所有Retina displays 的MAC

  7. Google Galaxy Nexus

  8. Google Nexus 4

  9. Google Nexus 10

  10. Samsung Galaxy S III

  11. Samsung Galaxy Note II

  12. Sony Xperia S

  13. HTC One X

-webkit-min-device-pixel-ratio: 3.0

   1.HTC Butterfly
   2.Sony Xperia S


(min-resolution:144dpi)
<resolution>(分辨率)

  • 使用于:位圖媒體類型,接受max/min前綴:

resolution”媒體特性描述輸出設備的分辨率,例如,像素密度。若查詢設備的非方形像素,在“min-resolution”查詢中指定的值必須與最稀疏尺寸進行比較,在“max-resolution”查詢中必須與最密集尺寸進行比較。對于“resolution”(沒有“min-”或“max-”前綴)查詢從不查詢設備的非方形像素。

對于印刷機,相當于分辨率(任意顏色的繪制點的分辨率)。

舉例說明:該媒體查詢表示樣式表適用于分辨率大于每英寸144點的設備:@media print and (min-resolution: 144dpi) { … }


 

準備開展業務? 立即創建網站 成為代理商
最新案例
最新簽約
  1. 廣州耀中生物科技發展有限公司
  2.  廣州思盈電子科技有限公司
  3. 深圳普??萍加邢薰?nbsp;
  4. 黛麗香莎品牌官網
  5. 佛山市多典服飾有限公司
  6. 香港Hb男士內衣官方
網絡營銷
  1. 企業網站如何做好網站優化與推廣工作?
  2. 中小企業怎樣做網絡營銷 廣州七想網絡...
  3. 網絡營銷并不神秘,七想網絡帶您揭開秘...
  4. 透過優衣庫事件 看網絡營銷?
  5. QQ營銷推廣技巧?
  6. 中小企業網站如何推廣才有效果呢?
{ganrao}