响应式布局@media only screen and 解释以及demo

摘自：https://blog.csdn.net/qq_34960569/article/details/51775737

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

两种方式
No.1

意思是当屏幕的宽度大于600小于800时，应用styleB.css
No.2

@media screen and (max-width: 600px) {
/当屏幕尺寸小于600px时，应用下面的CSS样式/
.class { background: #ccc; }
}

 

如果想要在手机端自适应，你还需要写上下面这句话。

 

例如：

    
    



响应式效果

在谷歌浏览器中用开发者工具拉动屏幕会发现出现不同效果！