响应式布局【Slikeの后花园】

响应式布局

发表于 2019-08-28 | 更新于 2021-07-28

BootStrap

响应式布局

前言

有的网站还在使用固定宽度，期望给所有终端用户带来一致的浏览体验。固定宽度设计在笔记本上刚好，在部分高分辨率显示器上却或多出些空白。用户体验极差。使用弹性布局可以解决现状问题。

弹性布局

Flex布局
- Flex布局是在CSS3中引入的，称为弹性盒模型。该模型决定一个盒子在其他盒子中的分布方式如何处理可用的空间。
- Flex布局设计比较复杂的页面很有用，轻松实现屏幕和浏览器窗口发生变化时保持元素的相对位置和大小不变，减少依赖浮动布局实现元素位置的定义以及重置元素大小
- Flex布局在定义伸缩项目大小时伸缩容器会预留些可用空间，能调节伸缩项目的相对大小和位置。
  
  特点：
```
1.在屏幕和浏览器窗口大小发生改变时也可以灵活地调整布局。
2.控制元素在页面的布局方向。
3.不同于文档对象模型所制定的排序方式对屏幕上的元素重新排序。
```
  语法：
```
display:flex;
```
伸缩性flex

伸缩布局决定的特性是让伸缩项目可伸缩，也就是让伸缩项目的宽度或高度自动填充伸缩容器额外的空间。使用flex:1;让伸缩项目的子盒子更改伸缩比例

伸缩流方向flex-direction

flex-direction属性决定主轴的方向(即项目的排列方向)，可简单的将多个元素的排列方向从水平方向改为垂直方向或相反。使用Flex布局的元素，称为Flex容器，它的所有子元素自动成为容器成员成为Flex项目。容器默认存在两根轴：水平主轴和垂直交叉轴，又称侧轴。

语法：flex-direction:row|row-reverse|column|column-reverse

        row:主轴为水平方向，起点在左侧。即网页元素排版方式从左到右排列。
        row-reverse:主轴为水平方向，起点在右端。即网页元素排版方式从右到左排列。
        column:主轴为垂直方向，起点在上端。即网页元素排版方式从上到下排列。
        column-reverse:主轴为垂直方向，起点在下端。即网页元素排版方式从下到上排列。

伸缩换行flex-wrap

flex-wrap属性适用于伸缩容器，也就是伸缩项目的父元素，主要用来定义伸缩容器里是单行还是多行显示。

语法：

flex-wrap：nowrap|wrap|hwrap-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相呼应。

语法：

 align-items：flex-start|flex-end|center|baseline|stretch
 flex-start:伸缩项目在侧轴起点变得外边距紧靠主该行在侧轴起始边。
flex-end:伸缩项目在侧轴起点变得外边距紧靠主该行在侧轴终点边。
center:伸缩项目的外边距盒子在该行侧轴上居中。
baseline:伸缩项目根据伸缩项目第一行文字的基线对齐。
stretch:默认值伸缩项目拉伸填充整个伸缩容器。

响应式布局的实现方式及应用

弹性布局，可以让网页适应不同浏览器大小。但小屏幕设备上的网页并非全是把大屏网页压缩往下排列就可以的。小屏网页必然会对一些网页内容有舍弃。网页元素的样式也会有变化。

媒体查询

媒体查询时想不同设备提供不同样式的一种方式，为每种类型的用户提供了最佳的体验效果。要使用媒体查询来制作网页，需要三个属性：媒体类型、媒体特性和关键词。

1.媒体类型

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

引入媒体类型
1.@media方式引入。@media 媒体类型{选择器{代码样式}}
2.like方法引入。<like ref="stylesheet" href="style.css" media="媒体类型"/>

2.媒体特性 - 媒体类型的增强版

device-width - 设置屏幕的输出宽度
device-height - 设置屏幕的输出高度
width - 渲染界面的宽度
height - 渲染界面的高度
orientation - 横屏或竖屏
resolution - 分辨率
color - 每种色彩的字节数
color-index - 色彩表中的色彩数

引入媒体特性
@media 媒体类型 and (媒体特性){CSS样式}

3.关键词 - 媒体特性有时不只一条，时需要关键词连接

响应式布局的优缺点

优点：
    1. 面对不同分辨率设备灵活性强，能够快捷解决多设备显示使用问题。
    2.更少维护，开发一个网站，多终端使用。
缺点：
    1.兼容各种设备，工作量大
    2.代码累赘，出现隐藏无用的元素，加载时间长

本文作者: Slike-V

本文链接: http://Slike-v.github.io/2019/08/28/响应式布局/