全国服务热线:400-6566-535 广州热线:020-82105691 客服QQ:858560031
后台演示 猪八戒 阿里巴巴商铺 手机版
网络营销电子商务建站知识编程知识行业资讯SEO知识常见问题网络安全
您当前位置: 首页 >资讯活动 > 建站知识 > 响应式布局设置--@media only screen and

响应式布局设置--@media only screen and

时间:2016-12-17 作者:七想网络

 


@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. 网络营销并不神秘,七想网络带您揭开秘...
  4. 透过优衣库事件 看网络营销?
  5. QQ营销推广技巧?
  6. 中小企业网站如何推广才有效果呢?