一幅长文细学HTML5和CSS3（四）——移动端布局
【摘要】 CSS3移动端布局
4 移动端开发
4.1 移动端基础
4.1.1 调试
4.1.2 视口
布局视口：一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。
视觉视口：用户正在看到的网站的区域。
理想视口：为了使网站在移动端有最理想的浏览和阅读宽度而设定，需要手动添加meta视口标签通知浏览器操作。
4.1.3 meta视口标签
<meta name="viewport" content="width=device-width, initial-scale=1.0",user-scalable = no,maximum-scale = 1.0,minimum-scale=1.0>
| 属性 | 解释说明 |
|---|---|
| width | 宽度设置的是viewport宽度，可以设置device-width特殊值 |
| initial-scale | 初始缩放比，大于0的数字 |
| maximum-scale | 最大缩放比 |
| minimum-scale | 最小缩放比 |
| user-scalable | 用于是否可缩放 |
4.1.4 物理像素和物理像素比
物理像素点指的是屏幕显示的最小颗粒数，是真实存在的。是厂商设置好的。
开发时1px未必是1物理像素。PC端页面是一一对应，而移动端不尽相同。
1px能显示的物理像素点的个数，成为物理像素比或屏幕像素比。
4.1.5 多倍图
- 对于一张50px×50px的图片，手机端网页开发图片可能会变成100px×100px。故我们需要倍图技术。
- 通常使用二倍图。在公司中看实际开发需求。
- 背景图片注意缩放问题。
4.1.6 背景缩放
<style>
div {
width: 500px;
height: 500px;
border: 2px solid red;
background: url(./0.jpg);
/* 使用background-size来控制背景图片大小 */
/* background-size: 100%; */
/* cover要求完全覆盖父标签 */
/* background-size: cover; */
/* contain 可以等比例拉伸，直至图片任何一边触碰父标签即停 */
background-size: contain;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div></div>
</body>
4.1.7 移动端开发选择
单独制作移动端页面（主流）：通常情况下，网址域名前加上m可以打开移动端。通过判断设备是否为移动端来确定打开PC端界面还是移动端界面。
响应式页面兼容移动端：通过判断屏幕宽度来判断样式。
4.1.8 移动端技术解决方案
HTML5标签可以放心使用不用担心兼容性问题
CSS初始化可以使用Normalize.css: Make browsers render all elements more consistently. (necolas.github.io)来初始化
CSS3提供了==怪异盒模型==，即通过box-sizing:border-box设置后的盒子不会因为边距边框问题撑大缩水
4.1.9 特殊样式
<style>
/* 在移动端点击会高亮，设置透明则不会高亮 */
div a{
-webkit-tap-highlight-color: transparent;
}
/* 在移动端浏览器默认的外观，在ios上需要去除这个属性才能给按钮和输入框自定义样式 */
div button{
-webkit-appearance: none;
}
/* 禁用长按页面时弹出菜单 */
div a,button{
-webkit-touch-callout: none;
}
</style>
</head>
<body>
<div>
<a href="">测试链接</a>
<button>测试按钮</button>
</div>
</body>
4.2 移动端布局
单独制作移动端页面：流式布局（百分比布局）、弹性布局（==十分推荐==）、less+rem+媒体查询布局、混合布局
响应式页面兼容移动端：媒体查询、bootstarp
4.2.1 流式布局
核心思想：通过盒子的宽度设置成百分比来根据屏幕的宽度自动进行伸缩，不受固定像素的限制，内容向两侧填充。
<style>
section{
width: 100%;
/*可以通过下面两个属性来设置缩放的最大值和最小值*/
max-width: 980px;
min-width: 400px;
margin:0 auto;
}
section div{
float: left;
width: 50%;
height: 400px;
}
section div:nth-child(1){
background: skyblue;
}
section div:nth-child(2){
background: pink;
}
</style>
</head>
<body>
<section>
<div></div>
<div></div>
</section>
</body>
4.2.2 flex布局
传统布局：兼容性好、布局繁琐、有局限性
弹性布局：操作方便，布局极为简单，PC浏览器支持较差
核心思想：任何一个容器都可以指定为flex布局。父元素指定为flex布局后子元素的浮动特性将会失效。其中==父元素称为Flex容器==，==子元素称为Flex项目==。
<style>
div{
display: flex;
width: 80%;
height: 300px;
background-color: pink;
justify-content: space-around;
}
div span{
width: 150px;
height: 100px;
background-color: skyblue;
margin-right: 5px;
}
</style>
</head>
<body>
<div>
<span></span>
<span></span>
<span></span>
</div>
</body>
4.2.3 flex布局父项常见属性
设置主轴的方向
主轴：即网页二维坐标x轴，水平向右
侧轴：即网页二维坐标y轴，水平向下
格式：flex-direction:row | row-reverse | column | column-reverse
<style>
div{
display: flex;
width: 80%;
height: 300px;
background-color: pink;
/* 1.设置主轴的方向：子元素在主轴上排列 */
/* 默认从左到右 */
/* flex-direction: row; */
/* 从右到左 */
/* flex-direction: row-reverse; */
/* 从上到下 */
/* flex-direction: column; */
/* 从下道上 */
flex-direction: column-reverse;
}
div span{
width: 150px;
height: 50px;
background-color: skyblue;
margin: 5px;
}
</style>
</head>
<body>
<div>
<span></span>
<span></span>
<span></span>
</div>
</body>
设置主轴上的子元素排列方式
格式：justify-content:flex-start | flex-end | center | space-around | space_between
<style>
div{
display: flex;
width: 80%;
height: 300px;
background-color: pink;
/* 2.设置主轴上子元素的排列方式 */
/* 默认值，从头部开始排列 */
justify-content: flex-start;
/* 从尾部开始排列 */
justify-content: flex-end;
/* 在主轴居中对齐 */
justify-content: center;
/* 平分剩余空间 */
justify-content: space-around;
/* 两边贴边，其他平分剩余空间 */
justify-content: space-between;
}
div span{
width: 150px;
height: 50px;
background-color: skyblue;
margin: 5px;
}
</style>
</head>
<body>
<div>
<span></span>
<span></span>
<span></span>
</div>
</body>
设置元素是否换行
说明：默认元素是不换行的，如果装不下，盒子越多，则盒子大小会被压缩
格式：flex-wrap:nowrap | wrap
<style>
div{
display: flex;
width: 80%;
height: 300px;
background-color: pink;
flex-wrap: wrap;
}
div span{
width: 150px;
height: 50px;
background-color: skyblue;
margin: 5px;
}
</style>
</head>
<body>
<div>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</body>
设置侧轴上的子元素排列方式（单行）
格式：align-items:flex-start | flex-end | center | stretch
<style>
div{
display: flex;
width: 80%;
height: 300px;
background-color: pink;
justify-content: center;
/* 3.设置侧轴上的子元素排列方式 */
/* 从上到下 */
align-items: flex-start;
/* 从下到上 */
align-items: flex-end;
/* 挤在一起居中 */
align-items: center;
/* 拉伸，不给高度或宽度，使其和父盒子一样高或一样宽 */
align-items: stretch;
}
div span{
width: 150px;
height: 50px;
background-color: skyblue;
margin: 5px;
}
</style>
</head>
<body>
<div>
<span></span>
<span></span>
<span></span>
</div>
</body>
设置侧轴上的子元素排列方式（多行）
说明：设置子项在侧轴上的排列方式，并且只能用于子项出现换行的情况，在单行下没有效果。
格式：align-content:flex-start | flex-end | center | stretch | space-around | space-between
<style>
div{
display: flex;
width: 80%;
height: 300px;
background-color: pink;
/* 4.align-content设置侧轴子元素排列 */
flex-wrap: wrap;
/* align-content: flex-start; */
/* align-content: flex-end; */
/* align-content: space-between; */
/* align-content: space-around; */
/* align-content: center; */
/* align-content: stretch; */
}
div span{
width: 150px;
height: 50px;
background-color: skyblue;
margin: 5px;
}
</style>
</head>
<body>
<div>
<span></span>
<span></span>
<span></span>
<span></span><span></span><span></span>
</div>
</body>
flex-flow
说明：flex-flow属性是flex-direction和flex-wrap属性的复合属性
格式：flex-flow:direction wrap;
4.2.4 flex布局子项常见属性
分配剩余空间
说明：定义子项目分配剩余空间
格式：flex:<number>
<style>
section{
width: 60%;
height: 150px;
background-color: pink;
margin: 0 auto;
display: flex;
}
section div:nth-child(1){
width: 100px;
height: 150px;
background-color: red;
}
section div:nth-child(2){
width: 100px;
height: 150px;
background-color: skyblue;
flex: 1;
}
section div:nth-child(3){
width: 100px;
height: 150px;
background-color: blue;
}
</style>
</head>
<body>
<section>
<div></div>
<div></div>
<div></div>
</section>
</body>
控制子项自己在侧轴上的排列方式
说明：align-self属性允许单个项目拥有与其他项目不一样的对齐方式，使用时可覆盖align-items属性。默认为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
<style>
section{
width: 60%;
height: 150px;
background-color: pink;
margin: 0 auto;
display: flex;
align-items: center;
}
section div{
width: 50px;
height: 50px;
background-color: skyblue;
margin: 10px;
}
section div:nth-child(1){
align-self: flex-start;
}
</style>
</head>
<body>
<section>
<div></div>
<div></div>
<div></div>
</section>
</body>
定义项目的排列顺序
说明：数值越小排列越靠前，默认为0
<style>
section{
width: 60%;
height: 150px;
background-color: pink;
margin: 0 auto;
display: flex;
align-items: center;
}
section div{
width: 50px;
height: 50px;
background-color: skyblue;
margin: 10px;
}
section div:nth-child(1){
align-self: flex-start;
order: 1;
}
</style>
</head>
<body>
<section>
<div></div>
<div></div>
<div></div>
</section>
</body>
4.2.5 rem适配布局
rem适配布局：通过rem单位和媒体查询来完成布局。
rem单位：em是父元素字体大小，而rem是html根元素字体大小。
媒体查询：CSS3新语法，可以使用@media来针对不同的设备定义不同的样式
媒体查询语法：@media mediatype [and | only | not] (media feature){CSS-Code;}
-
媒体类型：
值 解释说明 all 用于所有设备 print 用于打印机和打印预览 scree 用于电脑屏幕、平板电脑、智能手机等 -
关键字：将媒体类型或多个媒体特性连接到一起作为媒体查询的条件
值 解释说明 and 可以将多个媒体特性链接到一起，相当于且，可省略 not 排除某个媒体类型，相当于非，可省略 only 指定某个特定的媒体类型，可省略 -
媒体特性：每种媒体类型都具有不同的特性，我们可以根据不同媒体特性设置不同的展示风格。常见的有三个：
值 解释说明 width 定义输出设备中页面可见的区域宽度 min-width 定义输出设备中页面最小可见区域宽度 min-width 定义输出设备中页面最大可见区域宽度
程序清单4_2_5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@media screen and (min-width:320px){
html{
font-size:50px;
}
}
@media screen and (min-width:640px){
html{
font-size: 100px;
}
}
.top{
height: 1rem;
font-size: .5rem;
background-color: green;
color:#fff;
text-align: center;
line-height: 1rem;
}
</style>
</head>
<body>
<div class="top">购物车</div>
</body>
</html>
4.2.6 引入资源
原理：当样式比较繁多时，我们可以针对不同的媒体使用不同的样式表。原理就是直接在link中判断设备的尺寸，然后引用不同的css文件。
语法：在link标签中加入media属性，值的语法为媒体查询语法。
<link rel="stylesheet" href="style320.css" media = "screen and (min-width:320px)">
<link rel="stylesheet" href="style640.css" media = "screen and (min-width:640px)">
</head>
<body>
<div>1</div>
<div>2</div>
</body>
4.2.7 响应式布局
原理：使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。
| 设备划分 | 尺寸空间 | 通常划分 |
|---|---|---|
| 手机 | <768px | 设置宽度100% |
| 平板 | >=768px ~ <992px | 设置宽度为750px |
| 桌面显示器 | >=992px ~ <1200px | 设置宽度为970px |
| 大桌面显示器 | >= 1200px | 设置宽度为1170px |
响应式布局容器：响应式布局需要一个父级作为布局容器，来配合子级元素来实现变化效果。
<style>
.container {
height: 150px;
background-color: pink;
margin: 0 auto;
}
/* 手机屏幕 小于768 */
@media screen and (max-width:767px) {
.container {
width: 100%;
}
}
@media screen and (min-width:768px) {
.container {
width: 750px;
}
}
@media screen and (min-width:992px) {
.container {
width: 970px;
}
}
@media screen and (min-width:1200px) {
.container {
width: 1170px;
}
}
</style>
</head>
<body>
<div class="container"></div>
</body>
4.3 Bootstrap前端框架
4.3.1 基础概念
官网
中文官网：Bootstrap中文网 (bootcss.com)
官网：Bootstrap · The most popular HTML, CSS, and JS library in the world. (getbootstrap.com)
使用
- 创建项目结构
- 创建html骨架结构
- 引入相关样式文件
- 书写内容
4.3.2 布局容器
响应式布局类：.container类
流式布局类：.container-fluid类
4.3.3 栅格系统
原理：将布局容器划分为12个等宽的列。栅格系统用于通过对一系列的行和列的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。
注意：
- 行必须放在container布局容器中
- 平均划分需要给列添加==类前缀==
- 列大于12，多余的列所在的元素将被作为一个整体另起一行排列
- 每一列默认有左右15像素的padding
- 可以同时为一列指定多个设备的类名，以便划分不同份数。如"col-md-4 col-sm-6"
<style>
.row div{
border: 2px solid red;
}
</style>
</head>
<body>
<div class="container">
<!-- 通过类标签来表示其占12列的份数 大屏幕：col-lg-份数 -->
<!-- 大屏幕：col-lg-份数 屏幕：col-md-份数 平板：col-sm-份数 手机：col-xs-份数 -->
<!-- lg = large md = medium sm = small xs = extra small -->
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-4">1</div>
<div class="col-lg-3 col-md-4 col-sm-4">2</div>
<div class="col-lg-3 col-md-4 col-sm-4">3</div>
<div class="col-lg-3 col-md-4 col-sm-4">4</div>
</div>
<!-- 如果孩子的份数相加等于12, 则孩子能占满整个container的宽度 -->
<div class="row">
<div class="col-lg-6">1</div>
<div class="col-lg-2">2</div>
<div class="col-lg-2">3</div>
<div class="col-lg-2">4</div>
</div>
<!-- 占不满 -->
<div class="row">
<div class="col-lg-6">1</div>
<div class="col-lg-2">2</div>
<div class="col-lg-2">3</div>
<div class="col-lg-1">4</div>
</div>
</div>
</body>
4.3.4 列嵌套
原理：栅格系统内置的栅格系统将内容再次嵌套。
<style>
.row>div{
height: 50px;
border:1px solid red;
background-color: pink;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-4">
<!-- 列嵌套最好加一个row，这样可以取消父元素的padding值，而且高度自动和父级一样高 -->
<div class="row">
<div class="col-lg-6">a</div>
<div class="col-lg-6">b</div>
</div>
</div>
<div class="col-lg-4">2</div>
<div class="col-lg-4">3</div>
</div>
</div>
</body>
4.3.5 列偏移
<style>
.row>div{
height: 50px;
border:1px solid red;
background-color: pink;
}
</style>
</head>
<body>
<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>
</body>
4.3.6 列排序
<style>
.row>div{
height: 50px;
border:1px solid red;
background-color: pink;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<!-- 使用.col-md-push-*和.col-md-pull-*类就可以很容易改变列的顺序 -->
<!-- 推过八个单位 -->
<div class="col-lg-4 col-lg-push-8">左侧</div>
<!-- 拉过八个单位 -->
<div class="col-lg-4 col-lg-offset-4 col-lg-pull-8">右侧</div>
</div>
</div>
</body>
4.3.6 响应式工具
注：与之相反的是visible-，用于显示某个页面内容。
<style>
.row>div{
height: 50px;
border:1px solid red;
background-color: pink;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class = "col-xs-3"></div>
<div class = "col-xs-3"></div>
<div class = "col-xs-3 hidden-md">消失的模块</div>
<div class = "col-xs-3"></div>
</div>
</div>
</body>
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）