本文详细解析了移动端基础，包括浏览器现状、屏幕尺寸、调试方法。重点讲解视口概念，布局视图、视觉视口和理想视口，以及如何设置meta视口标签。深入探讨二倍图和多倍图技术，以及移动端开发策略（单独页面与响应式）。以京东首页为例，展示了流式布局、技术选型和关键代码。
目录
1. 移动端基础
1.1 浏览器现状
pc端浏览器：360、谷歌、火狐、百度、ie
移动端浏览器：uc、qq、百度、谷歌、搜狗
移动端浏览器主要是对webkit内核进行兼容开发的
总结：兼容移动端主流浏览器，处理webkit内核浏览器即可
1.2 手机屏幕现状
尺寸多，碎片化；Android、iPhone设备分辨率多；我们常用的单位是px
1.3 移动端调试方法
- Chrome devtools（谷歌）的模拟手机调试
- 搭建本地web服务器，手机和服务器一个局域网，通过手机访问浏览器
2. 视口
视口（viewport）就是浏览器显示页面内容的屏幕区域。视口分为布局视口、视觉视口和理想视口
2.1 布局视图（layout viewport）
移动浏览器都默认设置一个布局视图
ios，Android基本将这个视口分辨率设置为980px，
2.2 视觉视口（visual viewport）
就是用用户看到网站的区域，注意是网站的区域
我们可以用缩放去操作视图，但不会影响布局视口，布局视口乃保持原来的宽度
2.3 理想视图（ideal viewport）
移动端最理想的和浏览和阅读宽度而设定
需要手动填写meta视口标签通知浏览器操作
meta视口标签的主要目的：布局视口的宽度应该和理想视口宽度一致
2.4 meta视口标签
<meta name="viewport" content="width=device-width,user-scalable=no initial-scale=1.0 maximum-scale=1.0, minimum-scale=1.0">
2.5 标准的viewport设置
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0， user-scalable=no"/>
视口宽度和设备保持一致
视口的默认缩放比例1.0
不允许用户自行缩放
最大运行缩放比例1.0
最小运行缩放比例1.0
3. 二倍图
3.1 物理像素&物理像素比
物理像素值屏幕显示的最小颗粒，是物理真实存在的，厂商在出厂时设置好了
开发时1px不是一定等于1个物理像素的
pc端页面，1个px等于一个物理像素
1个px能够显示物理像素点的个数，称物理像素比或者屏幕像素比
retina（视网膜屏幕）是一种显示技术，把更多的物理像素压缩到一块屏幕里，达到更高的分辨率，提高屏幕显示的细腻长程度
3.2 多倍图
在标准的viewport设置中，使用倍图来提高图片的质量，解决高清设备中模糊问题
通常使用二倍图
// 原始图片时100*100px
img {
width:50px;
height:50px;
}
.box{
background-size:50px 50px ;
}
3.3 背景缩放background-size
background-size: 高度 宽度
只写一个参数，会等比例缩放
里面单位写到%，相对父盒子
cover：要完全覆盖盒子，部分图显示不全
contain：高度宽度等比例拉伸，当一个铺满即可，有空白区域
3.4 多倍图切图cutterman
4. 移动端开发选择
4.1 单独制作移动端页面（主流）（重点）
京东，淘宝、苏宁易购
通常情况下，网址域名前加m（mobile）可以打开移动端，通过判断移动设备，就跳转不同的页面
4.2 响应式页面兼容移动端（其次）
三星....
通过判断屏幕宽度来改变样式，以适应不同的在终端
缺点：制作麻烦，需要花费很大尽力去调兼容性问题
5. 移动端技术解决方案
5.1 移动端浏览器
移动端浏览器以webkit内核为主，考虑它的兼容性即可
放心使用H5和C3
5.2 css初始化 normalize.css
移动端css初始化推荐使用normalize.css
5.3 css盒子模型 box-sizing
box-sizing：border-box
padding和border不会撑大盒子
5.3 特殊样式
- 链接会点击高亮显示需要清除：
- -webkit-tap-highlight-color: transparent;
- 给按钮和输入框自定义样式：
- -webkit-appearance: none;
- 禁止长按页面出现菜单：
- -webkit-touch-callout: none;
6. 移动端常见布局
移动端页面
- 分为流式布局（百分比布局）
- flex弹性布局
- less+rem+媒体查询布局
- 混合布局
响应式页面
- 媒体查询
- bootstarp
7. 移动端开发之流式布局
就是百分比布局，称非固定像素布局
通过盒子的宽度设置百分比来根据屏幕的宽度来伸缩，不受固定像素的限制，内容像两侧填充
流式布局时移动web开发使用常用的布局方式
max-width 最大宽度；min-width最小宽度
<!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>
* {
margin: 0;
padding: 0;
}
section {
width: 100%;
min-width: 100px;
max-width: 900px;
margin: 0 auto;
}
section div {
float: left;
width: 50%;
height: 400px;
}
div:nth-child(1) {
background-color: pink;
}
div:nth-child(2) {
background-color: blue;
}
</style>
</head>
<body>
<section>
<div></div>
<div></div>
</section>
</body>
</html>8. 京东移动首页制作
8.1 技术选型
方案：单独制作移动页面方案
技术：流式布局
8.2 搭建文件夹的结构
8.3 设置标签和引入样式
<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">8.4 初始化样式
width: 100%;
min-width: 380px;
max-width: 1080px;
margin: 0 auto;
font-family: -apple-system, Arial, Helvetica, sans-serif;
line-height: 1.5;
color: #666;8.5 补充：二倍精灵图的做法
先把精灵图缩放一半，再测量坐标，注意background-size也要写
8.6 代码
html文件：
<!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>京东</title>
</head>
<body>
<header class="app">
<ul>
<li>
<a href="#"><img src="./images/closes.png" alt=""></a>
</li>
<li>
<a href="#"><img src="./images/logo.png" alt=""></a>
</li>
<li>
<em class="open">打开京东APP</em>
<em class="close">购物实惠又轻松</em>
</li>
<li>
<a href="#">立即打开</a>
</li>
</ul>
</header>
<div class="search_warp">
<div class="search-btn"></div>
<div class="search">
<div class="jd-icon"></div>
<div class="sou"></div>
</div>
<div class="search-login">
<a href="#">登录</a>
</div>
</div>
<!-- 主体内容 -->
<div class="main">
<div class="slider"><img src="./uplaod/ban.jpg" alt=""></div>
</div>
<!-- 品牌日 -->
<!-- <div class="brand">
<div>
<a href="#"><img src="./uplaod/pic1.dpg" alt=""></a>
</div>
<div>
<a href="#"><img src="./uplaod/pic2.dpg" alt=""></a>
</div>
<div>
<a href="#"><img src="./uplaod/pic3.dpg" alt=""></a>
</div>
</div> -->
<div class="brand">
<div>
<a href="#"><img src="./uplaod/pic11.dpg" alt=""></a>
</div>
<div>
<a href="#"><img src="./uplaod/pic22.dpg" alt=""></a>
</div>
<div>
<a href="#"><img src="./uplaod/pic33.dpg" alt=""></a>
</div>
</div>
<!-- nav -->
<nav>
<a href="#">
<img src="./uplaod/nav1.png" alt="">
<span>京东超市</span>
</a>
<a href="#">
<img src="./uplaod/nav2.png" alt="">
<span>数码电器</span>
</a>
<a href="#">
<img src="./uplaod/nav3.png" alt="">
<span>京东服饰</span>
</a>
<a href="#">
<img src="./uplaod/nav4.png" alt="">
<span>京东生鲜</span>
</a>
<a href="#">
<img src="./uplaod/nav5.png" alt="">
<span>京东到家</span>
</a>
<a href="#">
<img src="./uplaod/nav6.png" alt="">
<span>充值缴费</span>
</a>
<a href="#">
<img src="./uplaod/nav7.png" alt="">
<span>物流查询</span>
</a>
<a href="#">
<img src="./uplaod/nav8.png" alt="">
<span>领券</span>
</a>
<a href="#">
<img src="./uplaod/nav9.png" alt="">
<span>领津贴</span>
</a>
<a href="#">
<img src="./uplaod/nav10.png" alt="">
<span>PLUS会员</span>
</a>
<!-- new -->
<div class="news">
<a href="#">
<img src="./uplaod/new1.dpg" alt="">
</a>
<a href="#">
<img src="./uplaod/new2.dpg" alt="">
</a>
<a href="#">
<img src="./uplaod/new3.dpg" alt="">
</a>
</div>
</nav>
</body>
</html>css文件：
/*点击高亮我们需要清除清除 设置为transparent 完成透明*/
* {
-webkit-tap-highlight-color: transparent;
}
/*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
input {
-webkit-appearance: none;
}
/*禁用长按页面时的弹出菜单*/
img,
a {
-webkit-touch-callout: none;
}
body {
width: 100%;
min-width: 380px;
max-width: 660px;
margin: 0 auto;
font-family: -apple-system, Arial, Helvetica, sans-serif;
line-height: 1.5;
color: #666;
}
img {
/* 解决图片空白缝隙 */
vertical-align: top;
}
a {
text-decoration: none;
color: #fff;
}
em {
font-style: normal;
}
.app {
height: 50px;
}
ul {
height: 50px;
margin: 0px;
padding: 0;
list-style: none;
background-color: #333;
}
.app ul li {
float: left;
height: 50px;
line-height: 50px;
text-align: center;
}
.app ul li:nth-child(1) {
width: 8%;
}
.app ul li:nth-child(1) img {
width: 16px;
vertical-align: middle;
}
.app ul li:nth-child(2) {
width: 10%;
}
.app ul li:nth-child(2) img {
width: 35px;
vertical-align: middle;
}
.app ul li:nth-child(3) {
position: relative;
width: 40%;
}
.app ul li:nth-child(3) .open {
position: absolute;
left: 0;
top: -10px;
font-size: 12px;
color: white;
}
.app ul li:nth-child(3) .close {
position: absolute;
left: 0;
bottom: -10px;
color: #999;
font-size: 12px;
}
.app ul li:nth-child(4) {
float: right;
width: 32%;
background-color: #cd2525;
}
.app ul li:nth-child(4) a {
color: white;
}
/* 搜索模块 */
.search_warp {
position: fixed;
overflow: hidden;
height: 44px;
width: 100%;
max-width: 660px;
min-width: 560px;
/* background-color: rgb(225, 37, 37); */
}
.search-btn {
position: absolute;
top: 0;
left: 0;
width: 44px;
height: 44px;
}
.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: 0;
right: 0;
width: 40px;
height: 44px;
line-height: 44px;
}
.search {
position: relative;
height: 30px;
margin: 0 50px;
background-color: #fff;
border-radius: 15px;
margin-top: 7px;
}
.jd-icon {
width: 20px;
height: 15px;
position: absolute;
top: 8px;
left: 10px;
background: url(../images/jd.png) no-repeat;
background-size: 20px 15px;
}
.jd-icon::after {
position: absolute;
top: 0;
right: -7px;
content: '';
display: block;
width: 1px;
height: 15px;
background-color: #ddd;
}
.sou {
position: absolute;
top: 8px;
left: 50px;
width: 18px;
height: 15px;
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 {
float: left;
width: 33.3333%;
}
.brand div img {
width: 100%;
}
/* nav */
nav a {
float: left;
width: 20%;
text-align: center;
}
nav a img {
width: 47px;
margin: 10px 0;
}
nav a span {
display: block;
}
nav a {
color: #666;
}
/* new */
.news {
margin-top: 20px;
}
.news a {
float: left;
box-sizing: border-box;
}
.news a:nth-child(1) {
width: 50%;
}
.news a:nth-child(n+2) {
width: 25%;
border-left: 1px solid #ccc;
}
.news img {
width: 100%;
}效果图：
扫一扫
943
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
