公司安排做一个html的app下载页面，需要检测客户端，走不同的css布局，于是从网上搜点资料，简单汇总下，方便日后查阅。
1) 响应式布局设置--@media only screen and
only--限定某种设备
screen--媒体设备的一种
/* 常用类型 */
类型 解释
all 所有设备
braille 盲文
embossed 盲文打印
handheld 手持设备
print 文档打印或打印预览模式
projection 项目演示，比如幻灯
screen 彩色电脑屏幕
speech 演讲
tty 固定字母间距的网格的媒体，比如电传打字机
tv 电视
/* 常用设备 */
设备 屏幕尺寸
显示器 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;
}
}
Code:
/* 检测小屏幕- */ @media only screen and (max-width: 760px) { #some-element { display: none; } }