亚洲欧美成人综合一区_国产精品一区二区无码_亚洲风情偷拍区_成?人免费无码视频在线看

在線客服與您一對一交流
當(dāng)前位置: 主頁 > 行業(yè)新聞 > IT技術(shù) >

響應(yīng)式布局設(shè)置--@media only screen and

@media only screen and 
only(限定某種設(shè)備)
screen 是媒體類型里的一種
and 被稱為關(guān)鍵字,其他關(guān)鍵字還包括 not(排除某種設(shè)備)

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

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

/* 常用設(shè)備 */
設(shè)備 屏幕尺寸
顯示器 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)">
意思是當(dāng)屏幕的寬度大于600小于800時,應(yīng)用styleB.css
b@media screen and (max-width: 600px) { /*當(dāng)屏幕尺寸小于600px時,應(yīng)用下面的CSS樣式*/
  .class {
    background: #ccc;
  }
}

device-aspect-ratio

device-aspect-ratio可以用來適配特定屏幕長寬比的設(shè)備,這也是一個很有用的屬性,比如,我們的頁面想要對長寬比為4:3的普通屏幕定義一種樣式,然后對于16:9和16:10的寬屏,定義另一種樣式,比如自適應(yīng)寬度和固定寬度:
@media only screen and (device-aspect-ratio:4/3)
-webkit-min-device-pixel-ratio的常見值對比(是設(shè)備上物理像素和設(shè)備獨立像素,設(shè)備像素比率)

		

		
設(shè)備 分辨率 設(shè)備像素比率
Android LDPI 320×240 0.75
Iphone 3 & Android MDPI 320×480 1
Android HDPI 480×800 1.5
Iphone 4 960×640 2.0

		

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

  • 所有非 Retina 的 Mac
  • 所有非 Retina 的 iOS 設(shè)備
  • Acer Iconia A500
  • Samsung Galaxy Tab 10.1
  • Samsung Galaxy S
  • 其他設(shè)備

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

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

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

 


相關(guān)文章:

  • 帝國CMS是什么程序 帝國CMS是一套開源的靜態(tài)頁面程序,憑借超高的擴展性,很多知名的新聞?wù)军c、行業(yè)站點都是應(yīng)用的帝國CMS后端。因為帝國CMS和dedecms一樣都是生成靜態(tài)頁面的,所以非常利于...

  • 域名解析DNS分為顯性URL和隱形URL,顯性URL和隱形URL有什么區(qū)別?隱形URL和顯性URL哪個更有利于SEO?顯性URL相當(dāng)于域名了302重定向,隱形URL使用iframe框架技術(shù)隱藏真實目標(biāo)地址,顯性URL更有利于...

  • 在常見的CMS系統(tǒng)中,我對dedecms算是比較熟悉的,自己網(wǎng)站用的也是這個系統(tǒng)。系統(tǒng)功能強大使用靈活,相信這也是它受到大多數(shù)中小站長青睞的原因。 再好的系統(tǒng)也有照顧不周的地方,很多站...

  • 這篇文章主要為大家詳細(xì)介紹了dedecms后臺增加php導(dǎo)出excel功能實現(xiàn)辦法,具有一定的參考價值,感興趣的小伙伴們可以參考一下,有需要的朋友可以收藏方便以后借鑒。 不少朋友希望織夢的后臺...

  • 第一次使用的插件是 pdfobject.js 百度網(wǎng)盤下載地址:http://pan.baidu.com/s/1kUPhYdT 加載 script src=/style/js/pdfobject.js /script script type=text/javascript window.onload = function (){ var success = new PDFObject({ url: pdf文件地...

  • 網(wǎng)上有一種方法是copy+unlink來移動文件,但是遇到大文件時會消耗大量時間,對性能不怎么友好,可以使用rename()來移動文件,速度非???關(guān)于rename()函數(shù) bool rename ( string $oldname , string $newname...

  • 基于我們公司可選的幾種推廣方式: 一、關(guān)鍵詞優(yōu)化排名推廣(推薦) 指定關(guān)鍵詞推廣,按天付費,推廣我們業(yè)務(wù)中最重要的一些關(guān)鍵詞,達(dá)到百度首頁才收費,大概一個關(guān)鍵詞10元/天左右。...

  • 插件介紹 wordpress程序網(wǎng)站在發(fā)布文章時可以給每一片文章添加與之相關(guān)的TAG標(biāo)簽,對于TAG標(biāo)簽可以生成很多頁面,增加搜索引擎對內(nèi)容的抓取量。 WP Auto Keywords插件就是一款能自動給文章添加...

  • 5.7 生成列表頁 改動 include/arc.listview.class.php 1.先設(shè)置 關(guān)閉副欄目(在系統(tǒng)----系統(tǒng)基本參數(shù)性能選項里) 2.一般網(wǎng)站不需要 欄目交叉 交叉 所以 找到94行注釋掉: //獲得交叉欄目ID /*if($this-Type...

  • 使用preg_replace將刪除所有空白(包括制表符等) $string = user na me $string = preg_replace(/\s+/, , $string); echo $string; // username preg_replace(/\s/u, ,$string) u (PCRE8) 此修正符打開一個與perl不兼容的附加功能. 模式...

  • 公司:西安蟠龍網(wǎng)絡(luò)科技有限公司
  • 聯(lián)系人:張經(jīng)理
  • 手機/微信:
  • Q Q: 點擊這里給我發(fā)消息
  • 地址:西安市雁塔區(qū)唐延南路11號逸翠園i都會