移动端技术选型
移动端布局和以前我们学习的PC端有所区别：
1. 单独制作移动端页面（主流）
流式布局（百分比布局）
flex 弹性布局（强烈推荐）
less+rem+媒体查询布局
混合布局
2. 响应式页面兼容移动端（其次）
媒体查询
bootstarp
流式布局（百分比布局）
流式布局，就是百分比布局，也称非固定像素布局。
通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。
流式布局方式是移动web开发使用的比较常见的布局方式。
max-width 最大宽度 （max-height 最大高度）
min-width 最小宽度 （min-height 最小高度）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
section {
width: 100%;
max-width: 980px;
min-width: 320px;
margin: 0 auto;
}
section div {
float: left;
width: 50%;
height: 400px;
}
section div:nth-child(1) {
background-color: pink;
}
section div:nth-child(2) {
background-color: purple;
}
</style>
</head>
<body>
<section>
<div></div>
<div></div>
</section>
</body>
</html>最大宽度和最小宽度为
<=
案例：京东移动端首页
访问地址：
多快好省，购物上京东！ (jd.com)
1. 技术选型
方案：我们采取单独制作移动页面方案 技术：布局采取流式布局
2. 搭建相关文件夹结构
3. 设置视口标签以及引入初始化样式
我们现在开发的是移动端要初始化
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,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;
}
app首页制作
vertical-align: middle; 图片和文字基线对齐
为什么第一个图片可以，因为第一个图片很小所以跟文字对齐
俩边写死，因为position: absolute;不占标准文档流 中间的搜索宽度就跟父元素一样，此时我们设置它的外边距，这样它就会随浏览器的大小变化而变化
5. 二倍精灵图做法
在firework里面把精灵图等比例缩放为原来的一半
之后根据大小 测量坐标
注意代码里面background-size也要写： 精灵图原来宽度的一半
设置了固定定位，就要设置宽度为100%，最大宽度和最小宽度
品牌日制作
盒子有多宽，图片就有多宽
百分比布局的特点，只需要设置宽度，不用设置高度
新闻快报模块
二倍图，要缩放成原来的百分之50 注意缩放的是a而不是img
<!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,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
<link rel="stylesheet" href="./css/normalize.css">
<link rel="stylesheet" href="./css/index.css">
<title>Document</title>
</head>
<body>
<!-- 头部 -->
<header class="app">
<ul>
<li>
<img src="./images/close.png" alt="">
</li>
<li>
<img src="./images/logo.png" alt="">
</li>
<li>打开京东APP，购物更轻松</li>
<li>立即打开</li>
</ul>
</header>
<!-- 搜索 -->
<div class="search-wrap">
<div class="search-btn"></div>
<div class="search">
<div class="jd-icon">
<div class="sou"></div>
</div>
</div>
<div class="search-login">登录</div>
</div>
<!-- 主体内容部分 -->
<div class="main-Content">
<!-- 滑动图 -->
<div class="slider">
<img src="upload/banner.dpg" alt="">
</div>
<!-- 品牌日 -->
<div class="brand">
<div>
<a href=""><img src="upload/pic11.dpg" alt="" srcset=""></a>
</div>
<div>
<a href=""><img src="upload/pic22.dpg" alt="" srcset=""></a>
</div>
<div>
<a href=""><img src="upload/pic33.dpg" alt="" srcset=""></a>
</div>
</div>
<!-- nav部分 -->
<nav>
<a href="">
<img src="upload/nav1.webp" alt="" srcset="">
<span>京东超市</span>
</a>
<a href="">
<img src="upload/nav1.webp" alt="" srcset="">
<span>京东超市</span>
</a>
<a href="">
<img src="upload/nav1.webp" alt="" srcset="">
<span>京东超市</span>
</a>
<a href="">
<img src="upload/nav1.webp" alt="" srcset="">
<span>京东超市</span>
</a>
<a href="">
<img src="upload/nav1.webp" alt="" srcset="">
<span>京东超市</span>
</a>
<a href="">
<img src="upload/nav1.webp" alt="" srcset="">
<span>京东超市</span>
</a>
<a href="">
<img src="upload/nav1.webp" alt="" srcset="">
<span>京东超市</span>
</a>
<a href="">
<img src="upload/nav1.webp" alt="" srcset="">
<span>京东超市</span>
</a>
<a href="">
<img src="upload/nav1.webp" alt="" srcset="">
<span>京东超市</span>
</a>
<a href="">
<img src="upload/nav1.webp" alt="" srcset="">
<span>京东超市</span>
</a>
</nav>
<!-- 新闻模块 -->
<div class="news">
<a href="">
<img src="upload/new1.dpg" alt="">
</a>
<a href="">
<img src="upload/new2.dpg" alt="">
</a>
<a href="">
<img src="upload/new3.dpg" alt="">
</a>
</div>
</div>
</body>
</html>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;
}
*{
-webkit-tap-highlight-color: transparent;
}
input{
-webkit-appearance: none;
}
img,a{
-webkit-touch-callout: none;
}
a{
color: #666;
text-decoration: none;
}
.app{
height: 45px;
}
ul{
margin: 0;
padding: 0;
list-style: none;
}
img{
/* 去除图片顶部的空白缝隙 */
vertical-align: middle;
}
.app ul li{
float: left;
height: 45px;
background-color: #333;
text-align: center;
line-height: 45px;
color: #fff;
}
.app ul li:nth-child(1){
width: 8%;
}
.app ul li:nth-child(1) img{
width: 10px;
}
.app ul li:nth-child(2){
width: 10%;
}
.app ul li:nth-child(2) img{
/* 图片和文字基线对齐 */
width: 30px;
vertical-align: middle;
}
.app ul li:nth-child(3){
width: 57%;
}
.app ul li:nth-child(4){
width: 25%;
background-color: #f63515;
}
/* 搜索 */
.search-wrap{
position: fixed;
height: 44px;
overflow: hidden;
width: 100%;
min-width: 320px;
max-width: 640px;
}
.search-btn{
position: absolute;
top: 0;
left: 0;
width: 40px;
height: 44px;
/* background: pink; */
}
.search-btn::before{
content: "";
display: block;
width: 20px;
height: 18px;
background: url(../images/s-btn.png) no-repeat;
background-size: 20px 18px ;
margin: 14px 0 0 15px;
}
.search-login{
position: absolute;
top: 1px;
right: 0;
width: 40px;
height: 44px;
/* background: pink; */
color: #fff;
line-height: 44px;
}
.search{
position: relative;
height: 30px;
margin: 0 50px;
border-radius: 15px;
background-color: #fff;
margin-top: 7px;
}
.jd-icon{
width: 20px;
height: 15px;
position: absolute;
top: 8px;
left: 13px;
background: url(../images/jd.png) no-repeat;
background-size: contain;
}
.jd-icon::after{
content: "";
display: block;
width: 1px;
height: 15px;
background-color: #ccc;
position: absolute;
right: -8px;
top: 0;
}
.sou{
position: absolute;
width: 18px;
height: 15px;
top: 2px;
left: 40px;
background: url(../images/jd-sprites.png) no-repeat -81px 0;
background-size: 200px auto;
}
.slider img{
width: 100%;
}
/* 品牌日 */
.brand{
/* 切割的是盒子，图片并没有变化 */
overflow: hidden;
border-radius: 10px 10px 0 0;
}
.brand div{
width: calc(100%/3);
float: left;
}
.brand div img{
width: 100%;
}
/* nav */
nav{
padding-top: 5px;
}
nav a{
float: left;
width: 20%;
text-align: center;
}
nav a img{
width: 40px;
margin: 10px 0;
}
nav a span{
display: block;
}
/* news */
.news {
margin-top: 200px;
}
.news img{
width: 100%;
}
.news a{
float: left;
box-sizing: border-box;
}
.news a:nth-child(1){
width: 50%;
}
/* .news a:nth-child(2){
width: 25%;
} */
/* n+2就是从第二的开始 */
.news a:nth-child(n+2){
width: 25%;
border-left: 1px solid #ccc;
} 
6. 图片格式
DPG图片压缩技术
京东自主研发推出DPG图片压缩技术，经测试 该技术，可直接节省用户近50%的浏览流量， 极大的提升了用户的网页打开速度。 能够兼容jpeg，实现全平台、全部浏览器的兼 容支持，经过内部和外部上万张图片的人眼浏 览测试后发现，压缩后的图片和webp的清晰度 对比没有差距
webp 图片格式
谷歌开发的一种旨在加快图片加载速度的图片 格式。图片压缩体积大约只有JPEG的2/3，并 能节省大量的服务器宽带资源和数据空间
