网站页面自适应的实现方式

网站页面自适应布局

自适应不同屏幕方式

• 简易场景
  页面居中，元素宽度使用百分比匹配

• 复杂场景
  1.可以编写几套css代码，再利用媒体查询技术，在不同屏幕下显示加载不同代码，代码工作量大，但比较好维护
  2.响应式布局
  1）栅格布局 （ 媒体查询 + 百分比 ）
  2）flex布局

一、媒体查询
媒体查询原理：通过匹配不同屏幕设备的特征,让不同特征下的CSS代码生效。

• 常用匹配特征 media features
  width/height: 浏览器宽高
  max-width： 表示小于最大宽度时生效
  min-width： 表示大于最小宽度时生效
  device-width/device-height: 设备屏幕分辨率宽高
  resolution: 设备分辨率
  orientation：portrait(纵向),高度大于等于宽度时，landscape(横向),高度小于宽度时

• 特征匹配操作符

1. and

@media (min-width: 1200px) and (orientation: landscape) {
 ...
 }
 // 表示当浏览器宽度大于等于1200px且为横向时CSS代码生效

3. 逗号分隔

@media (max-width: 500px), handheld and (orientation: landscape) {
 ...
 }
 表示当浏览器宽度小于等于500px或者手持设备且为横向时生效

• 媒体查询引入

@media导入

@media screen and (max-width: 375px){
    .container{
        background: red;
    }
}

link 引入方式

<link rel="stylesheet" type="text/css" href="styleB.css" media="screen and (min-width: 600px) and (max-width: 800px)">

二、栅格布局
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。栅格布局随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列
手机、平板、桌面
针对不同设备定义不同类

三、flex布局
采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。

任何一个容器元素都能指定成flex容器；块级元素：display:flex，行内元素也能使用flex布局: display:inline-flex;

• 容器的属性

1. flex-direction  决定主轴的方向
   row | row-reverse | column | column-reverse;
   （默认值）主轴为水平方向，起点在左端 | 水平方向，起点在右端 | 主轴为垂直方向，起点在上沿 | 主轴为垂直方向，起点在下沿
2. flex-wrap  是否换行
 nowrap | wrap | wrap-reverse;
 （默认值）不换行 | 第一行在上方 | 第一行在下方
3. flex-flow  是flex-direction属性和flex-wrap属性的简写形式
默认值row nowrap
4. justify-content 主轴上的对齐方式
 flex-start | flex-end | center | space-between | space-around
 （默认值）左对齐 | 右对齐 | 居中 | 两端对齐，项目之间的间隔都相等 | 每个项目两侧的间隔相等
5. align-items 交叉轴上对齐方式
   flex-start | flex-end | center | baseline | stretch
   交叉轴的起点对齐 | 终点对齐 | 中点对齐 | 第一行文字的基线对齐 | 默认值
6. align-content  定义了多根轴线的对齐方式 如果项目只有一根轴线，该属性不起作用
flex-start | flex-end | center | space-between | space-around | stretch
起点对齐 | 终点对齐 | 中点对齐 | 两端对齐 | 每根轴线两侧的间隔都相等 | 默认值

• 项目的属性

1. order 项目的排列顺序。数值越小，排列越靠前，默认为0
2. flex-grow 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
3. flex-shrink 项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
4. flex-basis 在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
5. flex 是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选
6. align-self 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性，默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
 auto | flex-start | flex-end | center | baseline | stretch

未完待续。。。