响应式网站制作

响应式网站制作

flex 弹性布局

为什么使用flex布局？

首先，看看其他布局的一些缺点：

float浮动布局

1. 浮动带来的高度塌陷问题，需要清除浮动。
2. 浮动不支持居中对齐
3. 浮动不支持垂直对齐

position定位布局

1. 脱离文档流会导致底部内容的宽度和高度不能同步
2. 定位总数需要一些实际的值进行计算

table表格布局

1. 结构复杂，当单元格里面再嵌套表格会使得代码很臃肿
2. 不利于seo优化
3. 垂直对齐表现优异

<style>
  .box{
    display: table;
    width: 300px;
    height: 300px;
    background-color: red;
    
  }
  .box span{
    display: table-cell;
    text-align: center;
    vertical-align: middle;
  }
  </style>
<div class="box">

  <span>
  你好你后<br>
  你好你后<br>
  你好你后
  </span>

</div>

• flex弹性布局的优点？

1. 不需要清除浮动
2. 不会脱离文档流
3. 水平垂直居中表现优异
4. 单行多行垂直居中毫无压力
5. 两端对齐、均分对齐等等适用于各种对齐

• flex兼容性如何？

IE10+，IE10部分支持

• 当使用了flex布局，那么它的直接子元素的float就失效。

注意，设为 Flex 布局以后，直接子元素的float、clear和vertical-align属性将失效。

• flex布局支持嵌套写

  <ul class="box" style="display: flex;">
    <li>首页</li>
    <li>关于</li>
    <li>产品</li>
    <li style="display: flex;">
      <p>联系1</p>
      <p>联系2</p>
    </li>
  </ul>

flex容器的属性

所谓容器的属性，其实就是这些属性和display: flex是作用同一个元素上的属性。

flex-direction 方向

flex-direction属性决定主轴的方向（即项目的排列方向）。

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

• row：默认值，主轴为水平方向，起点在左端。
• row-reverse：主轴为水平方向，起点在右端。
• column: 主轴为垂直方向，起点在上沿，相当于整个轴顺时针旋转90度。
• column-reverse：主轴为垂直方向，起点在下沿，相当于整个轴逆时针旋转90度。

flex-wrap 换行

默认情况下，项目都排在一条线（又称"轴线"）上

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

• nowrap：不换行（默认）
• wrap：换行
• wrap-reverse：反转换行

flex-flow 换行

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap

.box {
  flex-flow: <flex-direction> || <flex-wrap>;
}

从右向左，换行

ul{
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  flex-flow: row-reverse wrap;/*从右向左 换行*/
}

justify-content 属性

justify-content属性定义了项目在主轴上的对齐方式。

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

• flex-start：左（顶）对齐 （ 默认 ）
• flex-end：右（底）对齐
• center：居中对齐
• space-between：两端对齐
• space-around：均分对齐
• space-evenly：等间对齐

align-items 属性

align-items 属性定义项目在交叉轴上如何对齐。

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

• flex-start：顶（左）对齐
• flex-end：底（右）对齐
• center：居中对齐
• baseline：基线对齐
• stretch：拉伸对齐 (默认值，如果你没有给项目高度，高度会自动100%)

align-content 属性

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

• flex-start：与交叉轴的起点对齐。
• flex-end：与交叉轴的终点对齐。
• center：与交叉轴的中点对齐。
• space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
• space-around：每根轴线两侧的间隔都相等。
• stretch（默认值）：轴线占满整个交叉轴。

多轴，一般是由换行引起的flex-wrap: wrap;。

flex项目的属性

order 排序

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

.item {
  order: <integer>;
}

示例

<ul class="box">
  <li style="order:3">首页1</li>
  <li style="order:2">关于2</li>
  <li style="order:1">产品3</li>
</ul>

flex-grow 属性

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。

如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

flex-shrink 属性

flex-shrink 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小，0代表不缩放。

.item {
  flex-shrink: <number>; /* default 1 */
}

flex-basis 属性

flex 属性

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

align-self 属性

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

多列布局

CSS3 创建多列

• column-count 属性指定了需要分割的列数。
• column-gap CSS3 多列中列与列间的间隙。
• column-rule-style CSS3 列边框

  <style>
  .newspaper{
    background-color: #ccc;
    column-width: 200px;
    column-count: 4;
    column-gap: 20px;
    /*
    column-rule-style: solid;
    column-rule-width: 10px;
    column-rule-color: red;
    */
    column-rule: solid 2px red;
  }
  .newspaper h2{
    column-span: all;
  }
  </style>

  <div class="newspaper">
      <h2>英国维斯米斯特教堂碑文</h2>
    “当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。”
  </div>

响应式网站

什么是响应式网站？

一个网站如果能同时适配多个终端（手机、平板、便携式笔记本、PC液晶电脑等）

响应式网站怎么制作？

以下技术有助于提高响应式开发效率

• viewport：设置视口缩放比例
• media query：可以使用媒体查询，相当于css的if语句
• rem/em/vw/vh/%：可以使用相对的单位
• calc：可以使用css的计算属性
• flex/多列：可以是用弹性布局
• max-width/min-width：可以约定宽和高的最小值或者最大值
• webfont/svg：使用图标字体可以很灵活的换色、改变大小、还是矢量的。
• grid: 可以设计一套栅格系统，提交排版效率
• 响应式内容：图片响应式、表格响应式、媒体响应式（视频、embed、iframe）

viewport：视口

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

• width：视口宽度，device-width表示设备宽度
• height：视口高度，device-width表示设备宽度
• initial-scale：初始缩放比例，1为不缩放，小于1缩小，大于放大。
• minimum-scale：最小缩放比例，1为不缩放，小于1缩小，大于放大。
• maximum-scale：最大缩放比例，1为不缩放，小于1缩小，大于放大。
• user-scalable：是否允许用户进行缩放，yes运行（默认），no不允许。

简单粗暴的方式做响应式开发

让设计师设计稿以460px为画布宽度，强调字体可能会被等比例到320px，所有要设计的大一些。

浏览器会自动将设计稿中的460px同步到比如你的手机是360px。

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=460, initial-scale=1.0">
</head>

响应式网站制作要求视口如下

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

rem/em/vw/vh/% 单位

vw：窗口可视宽度，注意和width:100%区分开
vh：窗口可视高度，注意和height:100%区分开
%: 百分比单位，margin和padding设置%时，是根据宽度来计算的，line-height中的%是根据字体大小来计算的。
em：它是根据继承过来的font-size来计算的。
rem：它是根据html中的font-size来计算的。

浏览器一般默认字体大小是16px

• 响应式一般设置rem单位如下

html{
  font-size: 62.5%;
}

button{
  font-size: 1.8rem;/* 18px */
}

• 为什么推荐使用rem作为响应式制作单位？

因为rem的尺寸是参考html根元素的font-size，整个项目全部采用rem单位的话，我们可以做到统一调整页面所有元素的尺寸，也就是全局放大或缩小。

也可以使用flexible.js这个插件实现rem自适应

calc：函数支持 ±*/运算，使用标准的数学运算优先级规则

.main{
  background-color: green;
  height: calc(100vh - 60px);
}

media query：媒体查询

@media 设备类型 and 设备特性 {
  样式代码
}

设备类型

以下为常用设备类型

• print：打印时样式
• screen：彩色电脑屏幕（手机、平板、笔记本、液晶显示器）
• tv：电视机

设备特性

• device-width,device-height：设备宽高
• width,height：渲染窗口的宽和高
• orientation：设备的手持方向
• resolution: 设备的分辨率

示例

/* 设备宽度大于或者等于360px */
@media screen and ( min-width: 360px ){
  .box{
    background-color: gray;
  }
  h1{
    font-size: 20px;
  }
}

/* 设备宽度小于或者等于360px */
@media screen and ( max-width: 360px ){
}

/* 设备宽度在360px ~ 1000px之间 */
@media screen and ( min-width: 360px ) and ( max-width: 1000px ){

}

栅格系统

什么栅格系统？

将网页按照等分（12列表、24列）切割

栅格系统知识：

• 容器：container
  1. 手机：宽自适应，左右留白15px
  2. 平板：750px 居中
  3. 中等：宽度 970px 居中
  4. 大型：宽度 1170px 居中
• 列数：12列 或者 24列
• 槽宽：30px
• 终端范围：四个终端【手机（0_{768）、平板（768}992）、中等（992_{1200）、大型（1200}）】