响应式布局的学习1.0
响应式网站设计是一种网络页面设计布局,其理念是:集中创建页面的图片排版大小,可以智能地根据用户行为以及使用的设备环境进行相对应的布局。
1.viewport
viewport 是用户网页的可视区域。
首先只要你是响应式布局,你就先把这句话加上去。
//width=device-width : 网页宽度等于设备宽度
//initial-scale=1.0 : 初始缩放比例为1.0 。网页初始页面的大小占整个面积的100%
//maximum-scale=1.0 : 最大缩放比例为1.0 ,
//user-scalable : 用户是否可以手动缩放
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
2.媒体查询(移动优先)
媒体查询可以让我们根据设备显示器的特性(如视口宽度、屏幕比例、设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。
使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。
//直接在style标签内部
<style>
body{
//设置背景颜色为紫色
background-color:#C9F;
}
//当设备最大宽度为960px时背景颜色变为白色
//注意这之间的空格不可少
//我开始写的时候就遇到我写完了,然后咋回事怎么不变色呀,感觉没错呀....em..然后发现是因为960之前少了一个空格
@media screen and (max-width: 960px){
body{
background-color:#FFF;
}
}
//注意先写大范围后写小范围。----》960写在500前面(大范围会覆盖小范围)
@media screen and (max-width: 500px){
body{
background-color:#000;
}
}
</style>