响应式开发

布局

  1. 固定宽度布局

  2. 流式布局 为网页色设置一个相对宽度 通常以百分比为长度单位

  3. 栅格化布局 人为划分均等长度 如bootstrap

  4. 响应式布局 通过检查设备信息 决定网页布局方式

响应式开发

image.png

原理 媒体查询

屏幕尺寸不一样 展示 给用户 网页内容也不一样

通过媒体查询可以检查屏幕尺寸 并设置不同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

  1. all 所有
  2. print 打印机
  3. screen 电脑 平板 智能手机
  4. 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>

当判断最小的值 并且从小到大进行判断(当满足条件的条件的时候)

  1. 向上兼容 如果设置了宽度更小的样式 默认这些样式也会传递到宽度更大的条件范围内
  2. 向下覆盖 宽度更大的样式会将前面宽度更小的样式覆盖

建议书写:

  1. 如果是判断最小值 应该从小到大写
  2. 如果是判断最大值 应该从大到小写
//代码取例  如果是`判断最小值`  `应该从小到大写`
//< 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>
©️2020 CSDN 皮肤主题: 1024 设计师:上身试试 返回首页