1.移动端基础
1.1 浏览器现状
国内的UC和QQ 百度等手机浏览器都是根据Webkit修改过来的内核，国内目前尚无自主研发的内核，就像国内的手机系统基本上都是局域安卓修改开发的一样.
意思就是:兼容移动端主流浏览器 处理Webkit内核浏览器即可。
1.2 手机屏幕的现状
移动端设备屏幕尺寸非常多，碎片化严重
Android设备有多种分辨率480*480 480*854 540*960 720*1280 等等
近年来iPhone的碎片化也严重了 其设备的主要分辨率有 640*960 640*1136 750*1334 1242*2208等等
作为开发者无需关注这些分辨率 因为我们常用的尺寸单位是px
1.3 移动端调试方法
Chrome DevTools(谷歌浏览器)的模拟手机调试
搭建本地web服务，手机和服务器一个局域网内 通过手机访问服务器
使用外网服务器 直接IP或者域名访问
总之:
移动端浏览器我们主要对Webkit内核进行兼容
我们现在开发的移动端主要针对手机端开发
现在移动端碎片化比较严重，分辨率和尺寸大小不一
2 视口
视口(viewport)就是浏览器显示页面内容的屏幕区域,视口可以分为布局视口 视觉视口和理想视口.
2.1 布局视口layout viewport
一般移动设备的浏览器都默认失职了一个布局视口 用于解决早期的PC端页面的手机上显示的问题
iOS Android 基本都将这个视口分辨率设置为980px 所以PC上的网页能在大多数手机上呈现 只不过看上去元素很小 一般默认可以通过手动缩放网页.
2.2 视觉视口visual viewport
用户正在看到的网站的区域 注意:是网站的区域
我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍然保持原来的宽度
2.3 理想视口 ideal viewport
为了使网站在移动端有理想的浏览和阅读宽度而设定
理想视口对设备来讲 是最理想的视口尺寸
需要手动添加meta视口标签通知浏览器操作
meta视口标签的主要目的:布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我的布局视口有多宽。
2.4 meta视口标签
视口标签语法
<!-- content 属性 --> <!-- width：宽度设置的是viewport宽度 可以设置device-width特殊值 --> <!-- initial-scale 视图缩放比 大于0的数字 初始的缩放倍数--> <!-- maximum-scale 最大缩放比 大于0的数字 --> <!-- minimum-scale 最小缩放比 大于0的数字 --> <!-- user-scalable 用户是否可以缩放 yes或no（1或0） --> <meta name="viewport" content="width=device-width, initial-scale=1.0">
标准的viewport设置:
视口宽度和设备保持一致
视口的默认缩放比是1.0
不允许用户自行缩放
最大允许的缩放比例1.0
最小允许的缩放比例1.0
倍图
物理像素和物理像素比
物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。这是厂商在出厂时就设置好了。比如苹果6，7，8 是750*1334
我们开发时候的1px不是一定等于1个物理像素。
PC端页面，1px等于1个物理像素的。
一个px能显示的物理像素点的个数，称为物理像素比或屏幕像素比。
物理像素 就是我们说的分辨率。物理像素比 比如iPhone8 一个px能显示两个物理像素，所以物理像素比是2
PC端和早期的手机屏幕 1CSS像素 = 1物理像素
Retina(视网膜屏幕)是一种显示技术，可以把更多的物理像素点压缩至一块屏幕里。从而达到更高的分辨率，并提高屏幕显示的细腻程度。
这个时候，对于一张50px*50px的图片，在手机Retina屏中打开，按照上面的分析 是要被放大到2倍或者多倍的 会造成图片模糊。
所以 在标准的viewport中，会使用多倍图来提高图片质量。解决在高清设备中的牧户问题。
通常使用二倍图。因为iPhone8plus 及以上机型的影响 还会使用3倍图或者四倍图。背景图片要注意缩放问题。
如果在iPhone8显示50*50图片，我们要准备一张100*100的图片 再手动改成50*50 的来使用，这就是二倍图。
代码示例:
<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>流式布局倍图</title> <style> /* 我们需要一个50*50(CSS像素)的图片 直接放到我们的iPhone8里面会放大2倍 100*100*/ /* 我们采取的是放一个100*100的图片 然后手动把图片缩小为50*50(CSS像素) */ /* 放到iPhone8 中 会放大二倍 但是图片本身就是100*100的 所以不会模糊 */ /* 在iPhone8中我们准备的图片 会比我们实际需要的大小的2倍 这就是二倍图 */ img:nth-child(2) { width: 50px; height: 50px; } </style> </head> <body> <!-- 放到手机里会模糊 --> <img src="../img/apple50(1).jpg" alt=""> <!-- 这个不会 --> <img src="../img/apple100.jpg" alt=""> </body> </html>
背景图片缩放：
background-size 属性 规定背景图像的尺寸
background-size(宽度 高度)
<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> div { width: 500px; height: 500px; border: 1px solid #ccc; background: url(../img/dog.jpg) no-repeat; /* 如果只写一个参数 高度和宽度一样 */ /* background-size: 500px; */ /* 里面的单位可以跟% 相对于父盒子说的*/ /* background-size: 50%; */ /* 特殊字符 cover 完全覆盖*/ /* background-size: cover; */ /* 把图像扩展至最大尺寸 使宽度和高度完全适应内容区域 当宽度或者高度铺满盒子 就不在进行拉伸 可能有部分空白区域 等比例缩放 */ background-size: contain; } </style> </head> <body> <div></div> </body> </html>
背景图片处理:
<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> /* 我们有一个50*50的盒子需要一个背景图片 但是根据分析这个图片要准备倍图 */ /* 通过background-size 缩放成50*50的 */ div { width: 50px; height: 50px; border: 1px solid #ccc; background: url(../img/apple100.jpg) no-repeat; background-size: 50px 50px; } </style> </head> <body> <div></div> </body> </html>
二倍精灵图的处理方法
1. 在firework里面把精灵图等比例缩放为原来的一半
2. 之后根据大小测量坐标
3. 注意代码里面background-size也要写:精灵图原来宽度的一半移动端开发选择
移动端主流方案:
1.单独制作移动端页面
通常情况下 网址域名前加m(mobile)可以打开移动端 通过判断设备，如果是移动设备打开 就跳转到移动端界面
2.响应式页面兼容手机页面
三星官网是这样的 通过判断屏幕的宽度来改变样式 以适应不同终端 缺点是制作麻烦 需要很大精力去调试兼容性问题。
移动端技术解决方案
移动端浏览器基本以Webkit内核为主，因此我们就考虑Webkit兼容性问题
我们可以放心的使用H5标签和CSS3样式
同时我们浏览器的私有前缀我们只需要考虑添加Webkit即可.
移动端CSS初始化 推荐使用 normalize.css
优点:
1.normalize.css 保护了有价值的默认值
2.normalize.css 修复了浏览器的bug
3.normalize.css 是模块化的
normalize.css 文档地址:http://necolas.github.io/normalize.css/
CSS3中的盒子模型
传统模式宽度计算:盒子的宽度=CSS中设置的width border padding
CSS3盒子模型：盒子的宽度=CSS中设置的宽度width里面包含了border和padding
也就是说 我们的CSS3中的盒子模型，padding和border不会撑大盒子。
/* CSS3 盒子模型 */
/* box-sizing: border-box; */
/* 传统盒子模型 */
/* box-sizing:content-box */
<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>CSS3中的盒子模型</title> <style> div:nth-child(1) { /* 传统盒子模型=width border padding */ width: 200px; height: 200px; background-color: pink; padding: 10px; border: 10px solid #ccc; } div:nth-child(2) { /* 有了这句话就让盒子变成CSS3盒子模型 */ /* padding 和 border 不会再撑大盒子了 */ box-sizing: border-box; width: 200px; height: 200px; background-color: purple; padding: 10px; border: 10px solid pink; } </style> </head> <body> <div></div> <div></div> </body> </html>
移动端可以全部使用CSS3盒子模型
PC端如果完全需要兼容 我们就用传统模式 如果不考虑兼容性 我们就选择CSS3盒子模型。
移动端技术解决方案
特殊样式:
/* CSS3 盒子模型 */
box-sizing: border-box;
-webkit-box-sizing: border-box;
/* 点击高亮我们需要清除 设置为transparent 完成透明 */
-webkit-tap-highlight-color: transparent;
/* 移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式 */
-webkit-appearance: none;
/* 禁用长按页面时的弹出菜单 */
img,a {
-webkit-touch-callout: none;
}
移动端常见布局
移动端技术选型
移动端布局和以前我们学习的PC端有所区别:
1.单独制作移动端页面(主流)
>1. 流式布局(百分比布局)
>2.flex弹性布局(强烈推荐)
>3.less rem 媒体查询布局
>4.混合布局
2.响应式页面兼容移动端(其次)
>1.媒体查询
>2.bootstarp
流式布局(百分比布局)
流式布局，就是百分比布局 也称非固定像素布局
通过盒子的宽度设置成百分 根据屏幕的宽度来进行伸缩，不受固定像素的限制 内容向两侧填充
流式布局方式是移动Web开发使用的比较常见的布局方式。
例子:
<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%; /* 最大宽度 超过980px 就不能再放大了 */ max-width: 980px; /* 最小宽度 小于320px 就不能再缩小了 */ min-width: 320px; margin: 0 auto; margin-top: 20px; background-color: orange; } section div { float: left; width: 49%; height: 100px; } 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>
流式布局 京东移动首页(部分):
方案:我们采取单独制作移动页面方案
技术:布局采取流式布局
<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> <div class="sou"></div> <input type="text" placeholder="请输入商品内容"> </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=""> </a> </div> <div> <a href="#"> <img src="../upload/pic22.dpg" alt=""> </a> </div> <div> <a href="#"> <img src="../upload/pic33.dpg" alt=""> </a> </div> </div> <!-- 导航栏 --> <nav> <a href=""> <img src="../upload/nav1.webp" alt=""> <span>京东超市</span> </a> <a href=""> <img src="../upload/nav1.webp" alt=""> <span>京东超市</span> </a> <a href=""> <img src="../upload/nav1.webp" alt=""> <span>京东超市</span> </a> <a href=""> <img src="../upload/nav1.webp" alt=""> <span>京东超市</span> </a> <a href=""> <img src="../upload/nav2.webp" alt=""> <span>京东超市</span> </a> <a href=""> <img src="../upload/nav1.webp" alt=""> <span>京东超市</span> </a> <a href=""> <img src="../upload/nav3.webp" alt=""> <span>京东超市</span> </a> <a href=""> <img src="../upload/nav1.webp" alt=""> <span>京东超市</span> </a> <a href=""> <img src="../upload/nav1.webp" alt=""> <span>京东超市</span> </a> <a href=""> <img src="../upload/nav1.webp" alt=""> <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>
CSS部分:
body { width: 100%; min-width: 320px; max-width: 640px; margin: 0 auto; background: #ccc; font-size: 14px; font-family: ‘-apple-system‘, ‘Helvetica‘,‘sans-serif‘; line-height: 1.5; } img { /* 去除图片底部的空白缝隙 */ vertical-align: middle; } /* 移动端处理的特殊样式 */ * { /* 取消点击高亮显示 */ -webkit-tap-highlight-color: transparent; -webkit-appearance: none; } img, a { /* 取消长按提示 */ -webkit-touch-callout: none; } a { color: #666; text-decoration: none; } ul { margin: 0; padding: 0; list-style: none; } .app { height: 45px; } .app ul li { float: left; height: 45px; line-height: 45px; text-align: center; background-color: #333; 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: #f63535; } /* 搜索 */ .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; } .search-btn::before { content: ""; display: block; width: 20px; height: 18px; background: url(../images/s-btn.png) no-repeat; background-size:20px 18px; margin-top: 14px; margin-left: 15px; } .search-login { position: absolute; top: 0; right: 0; width: 40px; height: 44px; color: #fff; line-height: 44px; } .search { position: relative; height: 30px; background-color: #fff; margin: 0 50px; margin-top: 7px; border-radius: 15px; } .jd-icon { position: absolute; top: 8px; left: 13px; width: 20px; height: 15px; background-color: pink; background: url(../images/jd.png) no-repeat; background-size: 20px 15px; } .jd-icon::after { position: absolute; top: 0px; right: -8px; content: ""; display: block; width: 1px; height: 16px; background-color: #ccc; } .sou { position: absolute; top: 9px; left: 50px; width: 18px; height: 15px; background-color: pink; /* 二倍精灵图的做法 */ /* 1. 在firework里面把精灵图等比例缩放为原来的一半 */ /* 2. 之后根据大小测量坐标 */ /* 3. 注意代码里面background-size也要写:精灵图原来宽度的一半*/ background: url(../images/jd-sprites.png) no-repeat -81px 0; background-size: 200px auto; } .search input { position: absolute; top: 7px; left: 80px; border: none; } .slider img { width: 100%; } .brand { border-radius:10px 10px 0 0; overflow: hidden; } .brand div { float: left; width: 33.333333%; } .brand div img { width: 100%; } nav a { float: left; width: 20%; text-align: center; } nav a img { width: 40px; margin: 12px 0 8px 0; } nav a span { display: block; } /* 新闻模块 */ .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 #e8e8e8; } .news a img { width: 100%; }