移动web之四种常用布局

一.流式布局

流式布局，就是百分比布局，也称非固定像素布局。

通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。

div {
    width : 100%
}

二.flex布局

-与传统布局对比

- 操作方便，布局极为简单，移动端应用很广泛
- PC 端浏览器支持情况较差
- IE 11或更低版本，不支持或仅部分支持

建议：PC端使用传统布局；如果是移动端或者不考虑兼容性问题的PC端使用flex弹性布局

1.搭建一个HTML结构

<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>

2.CSS样式
①span 直接给宽度和高度，背景颜色，还有蓝色边框
②给 div 只需要添加 “display：flex” 即可

---

-布局原理

flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。可以通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

1.当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align属性将失效。
2.伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 =flex布局

---

-常见父项属性

-flex-direction：设置主轴的方向
-justify-content：设置主轴上的子元素排列方式
-flex-wrap：设置子元素是否换行
-align-content：设置侧轴上的子元素的排列方（多行）
-align-items：设置侧轴上的子元素排列方式（单行）
-flex-flow：复合属性，相当于同时设置flex-direction 和 flex-wrap

-常见子项属性

-flex 子项目占的份数
-align-self 控制子项自己在侧轴的排列方式
-order属性定义子项的排列顺序（前后顺序）

三.rem布局

-rem基础

rem (root em)是一个相对单位，类似于em，em是父元素字体大小。不同的是rem的基准是相对于html元素的字体大小。
rem的优势：父元素文字大小可能不一致， 但是整个页面只有一个html，可以很好来控制整个页面的元素大小
。

比如，根元素（html）设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。

/* 根html 为 12px */
html {
font-size: 12px;
}
/* 此时 div 的字体大小就是 24px */
div {
font-size: 2rem;
}

-@media

@media 可以针对不同的屏幕尺寸设置不同的样式
@media mediatype and|not|only (media feature) {CSS-Code;}

引入资源语法规范：
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

示例：
<link rel="stylesheet" href="styleA.css" media="screen and (min-width: 400px)">

-Less

Less （Leaner Style Sheets 的缩写）是一门 CSS 预处理语言，它扩展了CSS的动态特性。

@color: pink; //定义变量
//直接使用
body{
color:@color;
}
a:hover{
color:@color;
}

Less嵌套用法

.header {
    width: 200px;
    height: 200px;
    background-color:pink;
    a { //子元素直接写到父元素里面
        color: red;
    }
}
//若遇到伪类选择器
.nav {
    a {
        color: red;
        &:hover {
            color : blue;
        }
    }
    &::before {
        content : '';
    }
}

Less运算

任何数字、颜色或者变量都可以参与运算。就是Less提供加（+）、减（-）、乘（*）、除（/）算术运算。

-注意乘号（*）和除号（/）的写法
-运算符中间左右有个空格隔开 1px + 5
-对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位
-如果两个值之间只有一个值有单位，则运算结果就取该单位

-rem 适配方案1

-最后的公式： 页面元素的rem值 = 页面元素值（px） /（屏幕宽度 / 划分的份数）
-屏幕宽度/划分的份数 就是 html font-size 的大小
-或者： 页面元素的rem值 = 页面元素值（px） / html font-size 字体大小

1.设置常见的屏幕尺寸，修改里面的html文字大小

//我们此次定义的划分的份数为15
@no:15;
@media screen and (min-width:320px) {
    html {
        font-size : (320px / @no);
    }
}
@media screen and (min-width:360px) {
    html {
        font-size : (360px / @no);
    }
}
@media screen and (min-width:375px) {
    html {
        font-size : (375px / @no);
    }
}

2.在首页的样式less文件中导入@import "common";

-rem 适配方案2

简洁高效的rem适配方案flexible.js

1.我们页面需要引入 这个js文件

在 index.html 中 引入 flexible.js 这个文件
<script src=“js/flexible.js”> </script>

2.修改cssrem插件中的默认值 为75px

3.如果屏幕超过了750px 那么我们页面不会超过750px

@media screen and (min-width:750px) {
    html {
        font-size : 75px!important;
    }
}

四.响应式布局

-响应式开发原理

就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。

-响应式布局容器

响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果。
原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。

常见响应式尺寸划分

• 超小屏幕（手机，小于 768px）：设置宽度为 100%
• 小屏幕（平板，大于等于 768px）：设置宽度为 750px
• 中等屏幕（桌面显示器，大于等于 992px）：宽度设置为 970px
• 大屏幕（大桌面显示器，大于等于 1200px）：宽度设置为 1170px

-Bootstrap的使用

1.在里面引入css
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
2.引进3行js

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

-Bootstrap栅格系数

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。

	<768px	≥768px	≥992px	≥1200px
.container最大宽度	自动(100%)	750px	970px	1170px
类前缀	.col-xs-	.col-sm-	.col-md-	.col-lg-

1.按照不同屏幕划分为1~12 等份
2.行（row） 可以去除父容器作用15px的边距
3.xs-extra small：超小； sm-small：小； md-medium：中等； lg-large：大；
4.列（column）大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列
5.每一列默认有左右15像素的 padding
6.可以同时为一列指定多个设备的类名，以便划分不同份数 例如 class=“col-md-4 col-sm-6”

列嵌套:栅格系统内置的栅格系统将内容再次嵌套。简单理解就是一个列内再分成若干份小列。我们可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。

<!-- 列嵌套 -->
<div class="col-sm-4">
    <div class="row">
        <div class="col-sm-6">小列</div>
        <div class="col-sm-6">小列</div>
    </div>
</div>

列偏移:使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。

<!-- 列偏移 -->
<div class=".container">
    <div class="row">
         <div class="col-lg-4">1</div>
         <div class="col-lg-4 col-lg-offset-4">2</div>
    </div>
</div>

列排序:通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。

<!-- 列排序 -->
<div class=".container">
    <div class="row">
        <div class="col-lg-4 col-lg-push-8">左侧</div>
        <div class="col-lg-8 col-lg-pull-4">右侧</div>
    </div>
</div>

响应式工具：为了加快对移动设备友好的页面开发工作，利用媒体查询功能，并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。

类名	超小屏	小屏	中屏	大屏
.hidden-xs	隐藏	可见	可见	可见
.hidden-sm	可见	隐藏	可见	可见
.hidden-md	可见	可见	隐藏	可见
.hidden-lg	可见	可见	可见	隐藏

与之相反的是，visible-xs visible-sm visible-md visible-lg是显示某个页面内容。