移动端常见布局
一、流式布局（百分比布局）
屏幕多宽随之就有多宽
1.案例：京东移动端首页
1.方案：采取单独制作移动页面方案
2.技术：布局采取 流式布局
3. 设置视口标签以及引入初始化样式
<meta name="viewport" content="width=device-width, user-scalable=no,
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/index.css">
4.常用初始化样式
body {
margin: 0 auto;
min-width: 320px;
max-width: 640px;
background: #fff;
font-size: 14px;
font-family: -apple-system, Helvetica, sans-serif;
line-height: 1.5;
color: #666;
}
5.二倍精灵图做法
在firework里面把精灵图等比例缩放为原来的一半
之后根据大小 测量坐标
注意代码里面background-size也要写： 精灵图原来宽度的一半
二、移动WEB开发之flex布局
1.传统布局与flex布局
1. 如果是PC端页面布局，我们还是传统布局。
2. 如果是移动端或者不考虑兼容性问题的PC端页面布局，还是使用flex弹性布局
布局原理：
2 flex布局父项常见属性
- flex-direction：设置主轴的方向
- justify-content：设置主轴上的子元素排列方式
- flex-wrap：设置子元素是否换行
- align-content：设置侧轴上的子元素的排列方式（多行）
- align-items：设置侧轴上的子元素排列方式（单行）
- flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap
2.1 flex-direction 设置主轴的方向
注意： 主轴和侧轴是会变化的，就看 flex-direction 设置谁为主轴，剩下的就是侧轴。而子元素是跟着主轴来排列的
row:x
column:y
2.2 justify-content 设置主轴上的子元素排列方式
2.3 flex-wrap 设置子元素是否换行
默认情况下，项目都排在一条线（又称”轴线”）上
nowrap 默认值，不换行
wrap 换行
wrap-reverse行序反向
2.4 align-items 设置侧轴上的子元素排列方式（单行 ）
2.5 align-content 设置侧轴上的子元素的排列方式（多行）
区别：
2.6 flex-flow
flex-flow属性是flex-direction和flex-wrap 的复合属性
flex-flow：row wrap；
3.flex布局子项常见属性
父项控制里面的子项整体布局，而子项控制的是子项单独一个的布局
flex 子项目占的份数
align-self 控制子项自己在侧轴的排列方式
order属性定义子项的排列顺序（前后顺序）
3.1flex 属性
可以写百分比，相对于父亲
3.2 align-self 控制子项自己在侧轴上的排列方式
3.3 order 属性定义项目的排列顺序
数值越小，排列越靠前，默认为0。
注意：和 z-index 不一样。（index控制的是叠罗汉的效果，order是左右上下）
.item {
order: <number>;
}
4. 携程网首页案例制作
3. 设置视口标签以及引入初始化样式
<meta name="viewport" content="width=device-width, user-scalable=no,
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/index.css">
- 常用初始化样式
body {
max-width: 540px;
min-width: 320px;
margin: 0 auto;
font: normal 14px/1.5 Tahoma,"Lucida Grande",Verdana,"Microsoft Yahei",STXihei,hei;
color:#000;
background: #f2f2f2;
overflow-x: hidden;
-webkit-tap-highlight-color: transparent;
}
快速修改图标
三、移动WEB开发之rem适配布局
1. rem 单位
2. 媒体查询（从小到大）
@media 可以针对不同的屏幕尺寸设置不同的样式，当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
@media mediatype and|not|only (media feature) {
CSS-Code;}
用@media 开头注意@符号 关键字and not only
mediatype 媒体类型
media feature媒体特性必须有小括号包含 必须带px
设置屏幕尺寸小于800px时样式
- mediatype 查询类型（将不同的终端设备划分成不同的类型）
all 用于所有设备
print 用于打印机和打印预览
screen 用于电脑屏幕，平板电脑，智能手机等 - 关键字（将媒体类型或多个媒体特性连接到一起做为媒体查询的条件）
and：可以将多个媒体特性连接到一起，相当于“且”的意思。
not：排除某个媒体类型，相当于“非”的意思，可以省略。
only：指定某个特定的媒体类型，可以省略。 - 媒体特性范围
width：定义输出设备中页面可见区域的宽度
max-width：最大可见范围
min-width：最小可见范围
案例：根据页面宽度改变背景变色
媒体查询+rem实现元素动态大小变化
媒体查询可以根据不同设备宽度来修改样式
媒体查询+rem 就可以实现不同设备宽度，实现页面元素大小的动态变化
2.4 引入资源（理解）
从小到大引入
当样式比较繁多的时候，我们可以针对不同的媒体使用不同 stylesheets（样式表）。原理，就是直接在link中判断设备的尺寸，然后引用不同的css文件。
语法：<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
示例：<link rel="stylesheet" href="styleA.css" media="screen and (min-width: 320px)">
<link rel="stylesheet" href="styleB.css" media="screen and (min-width: 640px)">
3. Less（css扩展语言）
首先新建一个后缀名为less的文件，在这个less文件里面书写less语句。Less 变量Less 编译Less 嵌套Less 运算
3.4Less变量
直接使用
body{
color:@color;}
a:hover{
color:@color;}
3.5Less编译
需要把我们的less文件，编译生成为css文件，这样我们的html页面才能使用。
3.6Less嵌套
3.7Less运算
4. rem 适配方案
4.2 rem 适配方案技术使用（市场主流）
4.3 rem 适配方案1
rem + 媒体查询+ less 技术
4.3 rem 适配方案2（js+rem）
github地址：https://github.com/amfe/lib-flexible
3. 设置视口标签以及引入初始化样式还有js文件
<meta name="viewport" content="width=device-width, user-scalable=no,
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/index.css">
我们页面需要引入 这个js文件
在 index.html 中 引入 flexible.js 这个文件
<script src=“js/flexible.js”> </script>
4. body样式
body {
min-width: 320px;
width:15rem;
margin: 0 auto;
line-height: 1.5;
font-family: Arial,Helvetica;
background: #F2F2F2;
}
/*如果我们的屏幕超过了750px那么我们就按照750设计稿来走不会让我们页面超过75epx*/
@media screen and (min-width:750pk){29
html{
font-size:75px!important;
}}
5. 苏宁首页案例制作
3. 设置视口标签以及引入初始化样式
<meta name="viewport" content="width=device-width, user-scalable=no,
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="css/normalize.css">
6. body样式
body {
min-width: 320px;
width:15rem;
margin: 0 auto;
line-height: 1.5;
font-family: Arial,Helvetica;
background: #F2F2F2;
}
四、响应式布局
就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的
<style> .container {
background-color: skyblue;
margin: 0 auto;
height: 150px;
}
@media screen and (max-width:767px){
.container {
width: 100%;
}
}
@media screen and (min-width:767px){
.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>
案例：响应式导航
<style> *{
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.container {
width: 750px;
margin: 0 auto;
text-align: center;
}
/* 先写正常情况下 */
.container ul li{
float: left;
width: 93.75px;
height: 30px;
line-height: 30px;
background-color: green;
}
@media screen and (max-width:768px){
.container {
width: 100%;
}
.container ul li {
width: 33.3%;
}
}
</style>
</head>
<body>
<div class="container">
<ul>
<li>导航栏</li><li>导航栏</li><li>导航栏</li><li>导航栏</li><li>导航栏</li><li>导航栏</li><li>导航栏</li><li>导航栏</li>
</ul>
</div>
</body>
2 Bootstrap前端开发框架
2.1 Bootstrap 简介
2.2 Bootstrap 使用
1.创建文件夹结构
2. 创建html骨架结构
<!--要求当前网页使用IE浏览器最高版本的内核来渲染-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--视口的设置：视口的宽度和设备一致，默认的缩放比例和PC端一致，用户不能自行缩放-->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0"> <!--[if lt IE 9]>
<!--解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题-->
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <!--解决ie9以下浏览器对css3 Media Query 的不识别-->
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
3. 引入相关样式文件
<!-- Bootstrap 核心样式-->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
4. 书写内容
2.3布局容器
3. Bootstrap 栅格系统
3.2 栅格选项参数
如果子盒子分数相加
等于12，则孩子能占满整个container的整个宽度
小于12，则占不满整个container
大于12，多余的一列会另起一行显示
3.3 列嵌套
如果不放在row的列里面，里面的两个小盒子内容会有padding影响，而且高度不会和父级一样高（因为默认有内边距）
3.4 列偏移
3.5 列排序
3.6 响应式工具
bootstrap字体图标使用
1.在bootstrap里找到组件图标，把组件名称复制一份到class=“”；（原理是加了伪类元素::before）
2.字体图标和文字对齐
.nav a::before{
vertical-align;middle;
}
案例：阿里百秀移动端首页
方案：我们采取响应式页面开发方案
技术：bootstrap框架
设计图：本设计图采用1280px 设计尺寸
1.权重问题会使header里的padding-left：0；无法实现，可以加一个！important；
2.阿里百秀的图片必须改为img {width：100%；}，否则屏幕在缩放的时候图片会显示不全
3.bootstrap里p段落标签会有margin-bottom；
4.为了不影响盒子，中间的空白缝隙用padding-ringht
5.logo图片不需要缩放时可以吧把图片宽度改为max-width：100%；
5.清除浮动(bootstrap里提供的有清除浮动)
2779
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
