布局
-
固定宽度布局
-
流式布局 为网页色设置一个相对宽度 通常以百分比为长度单位
-
栅格化布局 人为划分均等长度 如bootstrap
-
响应式布局 通过检查设备信息 决定网页布局方式
响应式开发
原理 媒体查询
屏幕尺寸不一样
展示 给用户 网页内容也不一样
通过媒体查询可以检查屏幕尺寸 并设置不同css样式 实现响应式布局
缺点
速度可能会变慢 由于响应式页面是同时下载多套CSS样式代码
实现方式
@media mediatype and | not | only (media feature){
Css-Code
}
/* 不同媒体使用不同 stylesheets */
<link rel="stylesheet" media="mediatype and | not | only (media feature)" href="xxx.css"/>
mediatype:
- all 所有
- print 打印机
- screen 电脑 平板 智能手机
- speech 屏幕阅读器
media feature:
例如
<style>
/*屏幕宽度小于768px*/
@media screen and (max-width:768px){
}
</style>
<style>
/*屏幕宽度768~992*/
@media screen and (min-width:768px) and (max-width:992px){
}
</style>
当判断最小的值 并且从小到大进行判断(当满足条件的条件的时候)
向上兼容
如果设置了宽度更小的样式 默认这些样式也会传递到宽度更大的条件范围内向下覆盖
宽度更大的样式会将前面宽度更小的样式覆盖
建议书写:
- 如果是
判断最小值
应该从小到大写
- 如果是
判断最大值
应该从大到小写
//代码取例 如果是`判断最小值` `应该从小到大写`
//< 768
body{
}
//768-992
@media screen and (min-width:768px){
}
//992-1200
@media screen and (min-width:992px){
}
//>1200
@media screen and (mix-width:1200px)
}
//支持最小值 不支持最大值
Bootstrap栅格系统
列偏移
offset偏移(原理 margin-left)
举例 col-xs-offset-2
偏移的距离是以栅格为单位
但是这种偏移是直接影响后面的元素
有可能造成后面的元素换行显示
列排序
push(往后 右推)/pull (往前 左拉) (原理 定位)
举例 col-xs-push-2
不会影响其他元素 但是有可能和其他元素重叠
嵌套列
<div class="row">
<div class="col-sm-9">
<!--设置container样式 row下面宽度就会和container所设置高度一致-->
<!--<div class="container">-->
<div class="row">
<div class="col-xs-8 col-sm-6">
</div>
<div class="col-xs-4 col-sm-6">
</div>
</div>
<!--</div>-->
</div>
</div>