响应式布局的应用

响应式布局

弹性布局

为什么使用弹性布局

有的网站设计还在使用固定宽度(如960px),期望给所有终端用户带来较为一致的浏览体验.这种固定宽度设计在笔记本上显示刚好,而在部分高分辨率显示器上却会在两边多出些空白,这样的网页给高分辨率用户的体验是极差的,而弹性布局刚好解决了这个bug.

实现弹性布局的方法

• 浮动+百分比布局

  .box{
      border: 1px solid red;
      width: 100%;
  	padding:10px;
  }
  aside{
      float:left;
      width: 30%;
  	background:red;
  	padding:10px;
  }
  article{
  	width:65%;
  	margin-left:10px;
  	float:left;
  	background:yellow;
  }
  

• Flex布局

  Flex布局是在CSS3中引入的,又称为弹性盒模型.该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间.

  Flex布局对于设计比较复杂的页面非常有用,可以轻松地实现屏幕和浏览器窗口大小发生变化时保持元素的相对位置和大小不变,同时减少了依赖浮动布局实现元素位置的定义以及重置元素的大小

  Flex布局主要有以下几点功能:

  • 在屏幕和浏览器窗口大小发生改变时也可以灵活地调整布局.

  • 控制元素在页面的布局方向

  • 按照不同于文档对象模型(DOM)所指定的排序方式对屏幕上的元素重新排序.

    /*弹性布局语法*/
    .box{
    	display:flex;
    	border:1px solid red;
    	padding:10px;
    }
    

  综合弹性盒模型的好处如下:

  • 可以让盒子里面的元素排在一行
  • 盒子里面元素的高度相同

  弹性盒模型的其他属性:

  • 伸缩性 flex

    /*父容器*/
    .box{
        border: 1px solid red;
        width: 60%;
        height: 400px;
        /*将父容器变成 flex容器*/
        display: flex;
    }
    .div1{
        /*占用父级容器的总宽度*/
        /*width: 40%;*/
        /*占父容器的占比 1*/
        flex: 1;
        height: 300px;
        background-color: yellow;
        float: left;
    }
    .div2{
        /*width: 60%;*/
        /*占父容器的占比 2*/
        flex: 2;
        height: 400px;
        background-color: red;
        float: left;
    }
    /*解决父级边框塌陷问题*/
    .clear:after{
        clear: both;
        content: '';
        display: block;
    }
    

  • 伸缩流方向 flex-direction

    flex-direction属性决定主轴的方向(即项目的排列方向),可以很简单地将多个元素的排列方向从水平方向修改为垂直方向,或者从垂直方向修改为水平方向

    flex-direction:row | row-reverse | column | column-reverse
    .box{
    	display:flex;
    	flex-direction:column;
    	border:1px solid red;
    	padding:10px;
    }
    

    • row:主轴为水平方向,起点为左端,即网页元素排版方式从左到右排列(默认值)
    • row-reverse:主轴为水平方向,起点在右端.与row排列相反,元素从右到左排列.
    • column:主轴为垂直方向,起点在上端,类似于row,不过是从上到下排列.
    • column-reverse:主轴为垂直方向,起点在下端.类似row-reverse,不过是从下到上排列

  • 伸缩换行 flex-wrap

    flex-wrap属性适用于伸缩容器,也就是伸缩项目的父元素,主要是用来定义伸缩容器里是单行还是多行显示.侧轴的方向决定了新行堆放的方向、

    flex-wrap:nowrap | wrap | wrap-reverse
    

    • nowrap:默认值,伸缩容器单行显示,伸缩项目不会换行.
    • wrap:伸缩容器多行显示,伸缩项目会换行
    • wrap-reverse:伸缩容器多行显示,伸缩项目会换行,并且颠倒行顺序

  • 主轴对齐 justify-content

    justify-content属性适用于伸缩容器,也就是伸缩项目的父元素.主要用来定义伸缩项目在主轴上的对齐方式

    justify-content: flex-start | flex-end | center | space-between | space-around
    

    • flex-start:伸缩项目向一行的起始位置靠齐
    • flex-end:伸缩项目向一行的结束位置靠齐
    • center:伸缩项目向一行的中间位置靠齐
    • space-between:伸缩项目会平均分布在行里,第一个伸缩项目在一行中的最开始位置,最后一个伸缩项目在一行的最终点位置
    • space-around:伸缩项目会平均分布在行里,两端保留一半的空间

  • 侧轴对齐align-items

    align-items 属性定义伸缩项目在侧轴上的对齐方式.align-items和justify-content相呼应,可以把它想象成侧轴(垂直于主轴)的justify-content.

    align-items: flex-start | flex-end | center | baseline | stretch
    

    • flex-start:伸缩项目在侧轴起点边的外边距紧靠住该行在侧轴起始边
    • flex-end:伸缩项目在侧轴终点边的外边距紧靠住该行在侧轴终点边
    • center:伸缩项目的外边距盒在该行侧轴上居中放置
    • baseline:伸缩项目根据伸缩项目第一行文字的基线对齐
    • stretch:默认值.伸缩项目拉伸填充整个伸缩容器

媒体查询

媒体查询是向不同设备提供不同样式的一种不错的方式,它为每种类型的用户提供了最佳的体验效果,要使用媒体查询来制作网页,首先需要学习三个属性:媒体类型,媒体特性和关键词.

1.媒体类型

媒体类型(Media Type)在CSS2中是一个常见的属性,可以通过媒体类型对不同的设备指定不同的样式

在CSS2中常遇到的媒体类型是all(全部),screen(屏幕),print(页面打印或打印预览模式),W3C共列出十种媒体类型

值	设备类型
all	所有设备
braille	盲文触觉回馈设备
embossed	盲文打印机
handheld	便携设备
print	打印用纸或打印预览视图
projection	投影设备
screen	电脑显示器
speech	语音或音频合成器
tv	电视机设备
tty	使用固定密度字母栅格的媒介,如电传打印机和终端

企业中最常用的就是all,screen,print三种,不过媒体类型引入方式常用的有两种

• @media方式

  我们可以用@media的方式引入,@media是CSS3中新引入的一个特性,称为媒体查询.

  @medid 媒体类型{
  	选择器{ /*你的样式代码写在这里...*/}
  }
  例:
  @media screen{
      .box{
          background-color: yellow;
      }
      li{
          color: black;
      }
  }
  

• link方法

  link方法引入媒体类型 其实就是在标签引入样式的时候,通过link标签中的media属性来指定不同的媒体类型

  <link rel="stylesheet" herf="style.css" media="媒体类型"/>
  

2.媒体特性

媒体特性(Media Query)是CSS3对媒体类型(Media Type)的增强版,其实可以将Media Query看成"Media Type(判断条件)+CSS(符合条件的样式规则)"

属性	值	min/max	描述
device-width	length	Yes	设置屏幕的输出宽度
device-height	length	Yes	设置屏幕的输出高度
width	length	Yes	渲染界面的宽度
height	length	Yes	渲染界面的高度
orientation	portrait/landscape	No	横屏或竖屏
resolution	分辨率(dpi/dpcm)	Yes	分辨率
color	整数	Yes	每种色彩的字节数
color-index	整数	Yes	色彩表中的色彩数

Media Query能在不同的条件下使用不同的样式,使页面在不同终端设备下达到不同的渲染效果

@media 媒体类型	and (媒体特性){ CSS样式 }
例:
@media screen and (max-width: 639px){
    .box{
        background-color: yellow;
    }
    li{
        color: black;
    }
}

3.关键词

媒体特性有的时候不止一条,当出现多个条件并存的时候,就需要通过关键词连接.

• and 关键词,表示同时满足这两者时生效,到达限定范围
• only关键词,用来指定某种特定的媒体类型,可以用来排除不支持媒体查询的浏览器
• not关键词,用来排除某种指定的媒体类型,也就是排除符合表达式的设备.换句话说,not关键词表示对后面的表达式执行取反操作

4.媒体查询的使用

在使用媒体查询制作网页的时候有些地方需要注意一下:

1.遇到冲突时的机制

2.设置主要断点

​ 简单地理解就是,设置宽度的临界点,在Media Query中,媒体特性min-width和max-width对于的属性值就是响应式设计中的断点值.使用主要断点创建媒体查询的条件,而每个断点会对应调用一个样式文件(或者样式代码)

常见的断点值为320px,480px,640px,768px,1024px等

响应式布局的应用

响应式布局的优缺点

响应式布局的优点:

• 面对不同分辨率设备灵活性强,能够快捷解决多设备显示问题
• 更少维护,开发一个网站,多终端使用

响应式布局的缺点:

• 兼容各种设备,工作量大
• 代码累赘,会出现隐藏无用的元素,加载时间长