响应式布局
2016-11-09 本文已影响19人
WangYatao
媒体查询的书写模式
@media 媒体类型 and （媒体特性）{
你的css样式
}
媒体类型：screen（屏幕）
print （打印机）
handheld（手持设备）
all （通用）
设置@media媒体查询之前，首先要设置viewport
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
width=device-width:宽度等于当前设备宽度
initial-scale：初始缩放比例（默认1.0）
minimum-scale：允许用户缩放的最小比例（默认1.0）
maximum-scale：允许用户缩放到的最大比例（默认1.0）
user-scalable：用户是否能手动进行缩放（默认为no）
最大宽度640px最小宽度100px
<style>
@media only screen and (min-width: 100px) and (max-width: 640px) {
.css{
background：blue；
.......等等；
}
}
</style>
width：浏览器可视宽度
height：浏览器可视高度
device-width：设备屏幕宽度
device-height：设备屏幕高度
orientation：检测设备是横屏landscape还是竖屏portrait
案例：http://59.110.5.236:9999/index.html
