Bootstrap响应式Web开发笔记02——移动端页面布局
Bootstrap响应式Web开发笔记01——基础入门
Bootstrap响应式Web开发笔记02——移动端页面布局
Bootstrap响应式Web开发笔记03——Bootstrap栅格系统
Bootstrap响应式Web开发笔记04——常用组件
一、概述
移动端页面的常用布局方法包括流式布局、弹性盒子布局和Rem适配布局，具体介绍如下。
- 流式布局也称为百分比布局，它是一种等比例缩放的布局方式，也是移动Web开发中比较常见的布局方式。在CSS代码中需要使用百分比来设置盒子的宽高，这样在不同屏幕尺寸的情况下盒子会根据页面宽度自由收缩布局。
- 弹性盒子布局是CSS3中的一种新布局模式，可以轻松的创建响应式网站布局。该弹性盒子布局为盒模块增加了灵活性，可以让人们告别浮动（float），完美的实现垂直居中。目前它得到几乎所有主流浏览器的支持。
- Rem适配方案一般采取Less+Rem+媒体查询来实现响应式布局设计。Rem适配方案使用媒体查询可以根据不同的设备按比例设置页面的字体大小，然后在页面中使用rem单位，可以通过修改html里面的文字大小来改变页面中的元素的大小从而进行整体控制。rem是CSS3中新增的一种相对长度单位。当使用rem单位时，节点的字体大小（font-size）决定了rem的尺寸。
小提示：
上述几种布局并不是独立存在的，在实际开发过程中往往是互相结合使用的，多种方式融合在一起实现移动端的屏幕适配方法，称之为混合布局，目前很多工资采取这种布局方式。
二、流式布局
1.百分比换算公式
目标元素宽度/父盒子宽度=百分比数宽度
2.案例：像素宽度页面与流式布局页面
a)像素布局页面
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width user-scalable=no initial-scale=1.0 maximum=scale=1.0"/>
<title>Titletitle>
<link href="../css/normalize.css" type="text/css" rel="stylesheet">
<style>
* {
padding: 0;
box-sizing: border-box;
}
body > * {
width: 980px;
height: auto;
margin: 10px auto;
border: solid 1px black;
padding: 5px;
}
header {
height: 50px;
}
section {
height: 300px;
}
section > * {
height: 100%;
border: solid 1px black;
float: left;
}
aside {
width: 250px;
}
article {
width: 70px;
margin-left: 10px;
}
footer {
height: 30px;
}
style>
head>
<body>
<header>headerheader>
<nav>navnav>
<section>
<aside>asideaside>
<article>articlearticle>
section>
<footer>footerfooter>
body>
html>
b)流式布局页面
替换像素宽度为百分比宽度
body > * {
width: 98%;
height: auto;
margin: 10px auto;
border: solid 1px black;
padding: 5px;
}
aside {
width: 25%;
}
article {
width: 70%;
margin-left: 3%;
}
三、弹性盒子布局
1.弹性盒子布局的常用属性
- display属性用于指定元素的容器的类型。
- flex-flow属性是属性flex-direction和flex-wrap的简写，用于排列弹性子元素。
- justify-content属性能够设置子元素在主轴方向的排列方式。
- align-items属性用于定义子元素在侧轴上的对齐方式。
- order属性用于设置元素出现的排列顺序，数值越小，排列将会越靠前，默认为0.
- flex属性是flex-grow（扩展比率）、flex-shrink（收缩比率）和flex-basls（宽度，像素值）的简写形式，能够设置子元素的伸缩性。
- align-self属性能够覆盖容器中的align-items属性，用于设置单独的子元素如何沿着纵轴排列。
2.display属性
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
3.flex-direction属性
flex-direction 属性指定了弹性子元素在父容器中的位置。
flex-direction的值有：
- row：横向从左到右排列（左对齐），默认的排列方式
- row-reverse：反转横向排列（右对齐，从后往前排，最后一项排列在最前面）
- column：纵向排列。
- column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。
4.flex-wrap属性
flex-wrap属性用于指定弹性盒子的元素换行方式。
- nowrap：默认，弹性容器为单行。该情况下弹性子项可能会溢出容器。
- wrap：弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行
- wrap-reverse：反转wrap排列
5.justify-content属性
所有弹性子元素整体水平方向排列方式
- flex-start：弹性项目向行头紧挨着填充。（默认值）
- flex-end：弹性项目向行尾紧挨着填充。居右
- center：弹性项目居中紧挨着填充。居中
- space-between：弹性项目平均分布在该行上。两端对齐
- space-around：弹性项目平局分布在该行上。两端带空隙的两端对齐。
6.align-items属性
所有弹性子元素整体垂直方向排列方式
- flex-start：弹性盒子元素的纵轴其实位置的边界紧靠在该行的纵轴起始边界。
- flex-end：弹性盒子元素的纵轴其实位置的边界紧靠住该行的纵轴结束边界。
- center：弹性盒子元素在该行的纵轴上居中放置。
- baseline： 如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
- stretch： 如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。
7.align-content属性
align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。 （自动换行后每行在该行内的 对齐方式）
stretch- 默认。各行将会伸展以占用剩余的空间。flex-start- 各行向弹性盒容器的起始位置堆叠。flex-end- 各行向弹性盒容器的结束位置堆叠。center-各行向弹性盒容器的中间位置堆叠。space-between-各行在弹性盒容器中平均分布。space-around- 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。
8.弹性子元素
a)order排序属性
通过设置弹性子元素的order值来实现元素的排序
b)对齐
设置"margin"值为"auto"值，自动获取弹性容器中剩余的空间。所以设置垂直方向margin值为"auto"，可以使弹性子元素在弹性容器的两上轴方向都完全居中。
c)align-self属性
align-self 属性用于设置弹性元素自身在纵轴方向上的对齐方式。
- auto：如果’align-self’的值为’auto’，则其计算值为元素的父元素的’align-items’值，如果其没有父元素，则计算值为’stretch’。
- flex-start：居上
- flex-end：居下
- center：居中
- baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
- stretch：铺满
d)flex属性
flex 属性用于指定弹性子元素如何分配空间。
- auto: 计算值为 1 1 auto
- initial: 计算值为 0 1 auto
- none：计算值为 0 0 auto
- inherit：从父元素继承
- [ flex-grow ]：定义弹性盒子元素的扩展比率。类似权重
- [ flex-shrink ]：定义弹性盒子元素的收缩比率。
- [ flex-basis ]：定义弹性盒子元素的默认基准值。
9.案例：综合使用
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width user-scalable=no initial-scale=1.0 maximum-scale=1.0"/>
<title>Titletitle>
<style>
.box {
height: 60px;
display: flex; /*设置为弹性盒子容器*/
border: 1px solid black;
background-color: #ddd;
flex-flow: row nowrap; /*合并写法*/
/*分开写法*/
/*flex-direction: column; !*排列方向*!*/
/*flex-wrap: nowrap; !*子元素包裹形式，nowrap容器为单行子元素可能溢出容器*!*/
/*水平对齐方式*/
justify-content: space-around;
/*垂直对齐方式*/
align-items: center;
align-content:flex-end;
}
.box > div {
border: 1px solid black;
width: 100px;
background-color: #fff;
padding: 2px;
margin: 2px;
color: #000;
}
.a {
order: 2;/*排序的时候使用*/
flex-grow: 3;/*类似于权重*/
}
.b {
order: 3;
flex-grow: 0;
}
.c {
order: 1;
flex-grow: 1;
align-self: flex-start;/*元素自身对齐方式*/
}
style>
head>
<body>
<div class="box">
<div class="a">Adiv>
<div class="b">Bdiv>
<div class="c">Cdiv>
div>
body>
html>
四、媒体查询
根据使用者屏幕不同尺寸进行不同的布局宽高设置
1.常用的媒体查询属性
- 设备宽高：device-width、device-height。
- 渲染窗口的宽和高：width、height。
- 设备的手持方向：orientation。
- 设备的分辨率：resolution。
2.内联式媒体查询
<style>
@media screen and (min-width:640px){
css属性: css属性值;
}
style>
3.外联式
<link href="style.css" media="screen and (min-width:640px)" ref="stylesheet">
4.响应式网站宽度参考
| 设备划分 | 尺寸区别 | 宽度设置 |
|---|---|---|
| 超小设备（手机） | <576px | 100% |
| 平板 | ≥576px | 540px |
| 桌面显示器 | ≥768px | 720px |
| 大桌面显示器 | ≥992px | 960px |
| 超大桌面显示器 | ≥1200px | 1140px |
5.案例：不同设备宽度匹配不同CSS样式属性
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width user-scalable=no initial-scale=1.0 maximum-scale=1.0"/>
<title>多媒体查询title>
<link rel="stylesheet" type="text/css" href="../css/normalize.css"/>
<style>
.container {
height: 50px;background: #ddd;margin: 0 auto;
}
@media screen and (min-width: 576px) {
.container {width:540px; }
}
@media screen and (min-width: 768px) {
.container {width: 720px;}
}
@media screen and (min-width: 992px) {
.container {width: 960px;}
}
@media screen and (min-width: 1200px) {
.container {width: 1140px;}
}
style>
head>
<body>
<div class="container">布局容器div>
body>
html>
五、Rem布局
1.rem单位
使用Rem适配布局，可以实现根据不同设备的情况，按比例设置页面字体大小。在页面中，元素使用rem尺寸单位，当页面字体大小发生变化时，元素的宽度和高度也会发生变化，从而达到等比缩放的适配。
- rem是CSS3中新增的一种相对长度单位。
- 当使用rem单位时，根结点的字体大小（font-size）决定了rem的尺寸。
注：rem单位类似于em单位，em单位表示父元素字体大小，不同之处在于，rem的基准是相对于根结点的字体大小。
2.rem转像素
font-size:50px;
1rem=1*50=50px
2rem=2*50=50px
六、Sass
1.CSS的主要缺点
- CSS是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。
- CSS需要书写大量看似没有逻辑的代码，代码冗余度是比较高的。
- CSS没有很好的计算能力。
- 不方便维护及扩展，不利于复用。
2.什么是Sass
我们了解到CSS语言在实现页面的样式时，存在着些许不足。为了解决css在实际开发过程中存在的问题，我们可以使用Sass来实现页面的样式，Sass的特点如下。
- Sass是一款成熟、稳定、强大的专业级CSS扩展语言。
- 它是一款强化CSS的辅助工具。
- 在CSS语法的基础上增加了变量（variables）、嵌套（nestedrules）、混合（mixins)、导入（inlineimports）等高级功能，让CSS更加强大与优雅。
- 使用Sass以及Sass的样式库（如Compass）有助于更好的组织管理样式文件，以及更搞笑的开发项目。
七、Less
1.什么是Less
Less（Leaner Style Sheets）是一门CSS扩展语言，也称为CSS预处理器。作为CSS的一种形式的扩展，Less并没有减少CSS的功能，而是在现有的CSS语法上，为CSS加入程序式语言的特性。Less与Sass的区别主要包括以下内容。
1.Less是基于JavaScript，是在客户端处理的。
2.Sass是基于Ruby的，是在服务器端处理的。
3.关于变量在Less和Sass中的唯一区别就是Less用@，Sass用$。
4.关于输出设置，Less没有输出设置，而Sass提供了4种输出选项，分别是nested、compact、compressed和expanded。
5.Sass支持条件语句，可以使用if{}else{}、for{}循环等，而Less不支持。
八、Bootstrap响应式布局
1.案例登录页面
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<title>登录title>
<link rel="stylesheet" href="bootstrap/bootstrap.min.css">
<style>
html, body {
height: 100%;
}
body {
display: flex; /* 设置为弹性盒子 */
align-items: center; /* 居中 */
padding-top: 40px;
padding-bottom: 40px;
border-color: #f5f5f5;
}
.form-signin {
width: 100%;
max-width: 330px;
padding: 15px;
margin: auto;
}
.form-signin .form-control {
position: relative;
box-sizing: border-box;
height: auto;
padding: 10px;
font-size: 16px;
}
.form-signin .form-control:focus {
z-index: 2; /*设置焦点的堆叠值，让光标可以闪烁*/
}
.form-signin input[type="email"] {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
margin-bottom: -1px; /*负值——设置相反方向的边距，能让两个控件重合*/
}
.form-signin input[type="password"] {
border-top-left-radius: 0; /*左上角边框形状*/
border-top-right-radius: 0; /*右上角边框形状*/
margin-bottom: 10px;
}
style>
head>
<body class="text-center">
<form class="form-signin" action="JavaScript:;">
<img src="images/timg.jpg" class="mb-4" width="72" height="72">
<h1 class="h3 mb-3">请登录h1>
<label for="inputEmail" class="sr-only">邮箱地址label>
<input type="email" id="inputEmail" class="form-control" placeholder="邮箱地址" required autofocus/>
<label for="inputPassword" class="sr-only">密码label>
<input type="password" id="inputPassword" class="form-control" placeholder="密码" required/>
<div class="mb-3">
<label>
<input type="checkbox" value="remember-me"/>记住密码
label>
div>
<button class="btn btn-lg btn-primary btn-block" type="submit">登录button>
<p class="mt-5 mb-3 text-muted">©2020-2025p>
form>
<script>
var email = document.querySelector('#inputEmail');
var password = document.querySelector('#inputPassword');
var btn = document.querySelector('button');
btn.addEventListener('click', function () {
if (email.value == '[email protected]' && password.value == '123456') {
document.location.href = 'https://www.baidu.com';
} else {
alert('账号或密码错误');
}
})
script>
body>
html>