1. 重点提炼
- 了解移动web开发现状
- 标准viewport
- 掌握移动web的调试方法
- 移动端常见的布局方案
- 流式布局
2. 移动端基础
2.1 浏览器现状
PC端常见浏览器:360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器。
移动端常见浏览器:UC浏览器,QQ浏览器,欧朋浏览器,百度手机浏览器,360安全浏览器,谷歌浏览器,搜狗手机浏览器,猎豹浏览器,以及其他杂牌浏览器。
国内的UC和QQ,百度等手机浏览器都是根据Webkit
修改过来的内核,国内尚无自主研发的内核,就像国内的手机操作系统都是基于Android
修改开发的一样。
总结:兼容移动端主流浏览器,处理Webkit
内核浏览器即可。
2.2 手机屏幕的现状
- 移动端设备屏幕尺寸非常多,碎片化严重。
- Android设备有多种分辨率:480x800, 480x854, 540x960, 720x1280,1080x1920等,还有传说中的2K,4k屏。
- 近年来iPhone的碎片化也加剧了,其设备的主要分辨率有:640x960, 640x1136, 750x1334, 1242x2208等。
- 作为开发者无需关注这些分辨率,因为我们常用的尺寸单位是
px
。
2.3 常见移动端屏幕尺寸
注:以上数据均参考自https://material.io/devices/
注:作为前端开发,不建议大家去纠结dp, dpi, pt, ppi等单位。
2.4 移动端调试方法
- Chrome DevTools(谷歌浏览器)的模拟手机调试
- 搭建本地web服务器,手机和服务器一个局域网内,通过手机访问服务器
- 使用外网服务器,直接IP或域名访问
3. 视口
视口(viewport)就是浏览器显示页面内容的屏幕区域
。
视口可以分为布局视口
、视觉视口
和理想视口
。
3.1 布局视口 layout viewport
一般移动设备的浏览器都默认设置了一个布局视口
,用于解决早期
的PC端页面在手机上显示的问题。
iOS
,Android
基本都将这个视口分辨率设置为980px
,所以PC上的网页大多都能在手机上呈现,只不过元素看上去很小
,一般默认可以通过手动缩放网页。
如CSDN
没有开发合适的手机端页面,以早期的形式展示,文字特别小且显示不全,因此这种模式并不适合手机端去使用,用户体验极差。
3.2 视觉视口 visual viewport
字面意思,它是用户正在看到的网站的区域。注意:是网站的区域。
我们可以通过缩放去操作视觉视口,但不会影响布局视口,布局视口仍保持原来的宽度。
3.3 理想视口 ideal viewport
为了使网站在移动端有最理想的浏览和阅读宽度而设定(注意是乔布斯设计的)
理想视口,对设备来讲,是最理想的视口尺寸
需要手动添写meta
视口标签通知浏览器操作
meta
视口标签的主要目的:布局视口的宽度应该与理想视口的宽度一致,简单理解就是设备有多宽,我们布局的视口就多宽
总结:我们开发最终会用理想视口,而理想视口就是将布局视口的宽度修改为视觉视口
3.4 meta标签
meta
标签是单标签。
name =viewport
代表视口标签
content代表内容,内容里包含若干的属性,这些属性非常重要。
device-width 特指设备的宽度
user-scalable 一般都设置no,不希望用户缩放
剩下的选项也都是常规设置,并且不允许缩放。
3.4.1 最标准的viewport设置
- 视口宽度和设备保持一致
- 视口的默认缩放比例1.0
- 不允许用户自行缩放
- 最大允许的缩放比例1.0
- 最小允许的缩放比例1.0
以上也不是凭空出来的,各大网站也遵循此设置,如京东
3.4.2 example01
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
移动端开发程
</body>
</html>
基本废了,字太小了。
因此需要meta视口标签。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
移动端开发程
</body>
</html>
参考:https://github.com/6xiaoDi/blog–Mobile-layout/tree/a0.01
Branch: branch01commit description:a0.01(example01—标准的viewport设置)
tag:a0.01
4. 二倍图
4.1 物理像素&物理像素比
物理像素
(其实就是分辨率
)点指的是屏幕显示的最小颗粒
,是物理真实存在的。这是厂商在出厂时就设置好了,比如苹果8
是750* 1334
,即一行放750
个像素点,一列可以放1334
个像素点。- 我们开发时候的
1px
不是一定等于1
个物理像素的 - 一个
px
的能显示的物理像素点的个数,称为物理像素比
或屏幕像素比
- PC端页面,
1
个px
等于1
个物理像素的,但是移动端就不尽相同
4.1.1 example02
物理像素 就是我们说的分辨率 iPhone8
的物理像素是750
。
这里元素设置的是300px,如果手机端是1对1比,应该占不到一半。
<!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;
}
div {
width: 300px;
height: 300px;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
375 x 2 = 750
iphone8
实际物理像素是750px
。
在iPhone8
里面1px
开发像素 = 2
个物理像素
因此开发用浏览器调试的时候,上面写的物理像素比与真实的手机不一致,而是开发像素。
参考:https://github.com/6xiaoDi/blog–Mobile-layout/tree/a0.02
Branch: branch01commit description:a0.02(example02—物理像素比)
tag:a0.02
PC
端 和 早前的手机屏幕
/ 普通手机屏幕
: 1CSS像素 = 1 物理像素的
=> 早期的手机看起来并不清楚,直到出现了一个技术 =>
Retina
(视网膜屏幕)是一种显示技术(最早的时候是摩托摩拉公司开发的),可以将把更多的物理像素点压缩至一块屏幕里,从而达到更高的分辨率,并提高屏幕显示的细腻程度。
原来在普通屏幕1像素是一个格显示的,而在视网膜屏幕中是四个格子显示。
4.2 多倍图
对于一张 50px * 50px
的图片,在手机或Retina
屏中打开,按照刚才的物理像素比会放大倍数,这样会造成图片模糊 => 因此图片在手机端需要进行处理
在标准的viewport
设置中,使用倍图
来提高图片质量,解决在高清设备中的模糊问题
4.2.1 example03
我们需要一个50*50
像素(css像素)的图片 直接放到我们的iphone8 里面会放大2倍 100* 100
就会模糊
我们采取的是 放一个100* 100
图片 然后手动的把这个图片 缩小为 50* 50
(css像素)
我们准备的图片 比我们实际需要的大小 大2倍,这就方式就是 2倍图
<!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>
</style>
</head>
<body>
<!-- 模糊的 -->
<img src="images/apple50.jpg" alt="">
<!-- 我们采取2倍图 -->
<img src="images/apple100.jpg" alt="">
</body>
</html>
但是如果这么写,它会把100x100缩放成200x200了。 => 手动的把这个图片 缩小为 50* 50 (css像素)。
img:nth-child(2) {
width: 50px;
height: 50px;
}
参考:https://github.com/6xiaoDi/blog–Mobile-layout/tree/a0.03
Branch: branch01commit description:a0.03(example03—二倍图做法)
tag:a0.03
pc端由于谷歌浏览器的优化看不出来模糊,我们用手机看看
这样很清楚看出来第二个很清晰了。
通常使用二倍图, 因为iPhone 6\7\8
的影响,但是现在还存在3倍图4倍图的情况,这个看实际开发公司需求
背景图片 注意缩放问题
/* 在 iphone8 下面 */
img{
/*原始图片100*100px*/
width: 50px;
height: 50px;
}
box{
/*原始图片100*100px*/
background-size: 50px 50px;
}
4.3 背景缩放background-size
background-size
属性规定背景图像的尺寸
background-size: 背景图片宽度 背景图片高度;
单位: 长度|百分比|cover|contain;
cover
把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。
contain
把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域
4.3.1 example04
4.3.1.1 example04-1
<!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>
div {
width: 500px;
height: 500px;
border: 2px solid red;
background: url(images/dog.jpg) no-repeat;
}
</style>
</head>
<body>
<div></div>
<!-- <p></p>-->
</body>
</html>
图片拉伸
background-size: 图片的宽度 图片的高度;
=>
background-size: 500px 200px;
只写一个参数 肯定是宽度 高度省略了 会等比例缩放
background-size: 500px;
里面的单位可以跟%
相对于父盒子来说的
background-size: 50%;
cover 等比例拉伸 要完全覆盖div盒子 可能有部分背景图片显示不全
background-size: cover;
实际原理 => 拉伸盖住整个盒子。
contain 高度和宽度等比例拉伸 当宽度 或者高度 铺满div盒子就不再进行拉伸了 可能有部分空白区域
background-size: contain;
实际就是等比例缩放谁先铺满就到头了。
参考:https://github.com/6xiaoDi/blog–Mobile-layout/tree/a0.04
Branch: branch01commit description:a0.04(example04-1—背景缩放)
tag:a0.04
4.3.1.2 example04-2
- 我们有一个 50 * 50 的盒子需要一个背景图片,但是根据分析这个图片还是要准备2倍, 100 * 100
- 我们需要把这个图片缩放一半,也就是 50*50 background-size
<!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>
div {
width: 50px;
height: 50px;
border: 1px solid red;
background: url(images/apple100.jpg) no-repeat;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
background-size: 50px 50px;
手机端也没问题
参考:https://github.com/6xiaoDi/blog–Mobile-layout/tree/a0.05
Branch: branch01commit description:a0.05(example04-5—背景二倍)
tag:a0.05
4.4 多倍图切图 cutterman
- @3X 3倍图
- @2X 2倍图
- @1X 1倍图原图
5. 移动开发选择
5.1 移动端主流方案
1.单独制作移动端页面(主流)
通常情况下,网址域名前面加m(mobile)
可以打开移动端。通过判断设备,如果是移动设备打开,则跳到移动端页面
。
也就是说,PC端
和移动端
为两套网站,pc端是pc断的样式,移动端在写一套,专门针对移动端适配的一套网站
京东pc端
京东移动端
m.taobao.com
m.suning.com
5.2 响应式页面兼容移动端(其次)
响应式网站
:即pc
和移动端
共用一套网站,只不过在不同屏幕下,样式会自动适配。
三星电子官网:www.samsung.com/cn/
,通过判断屏幕宽度来改变样式,以适应不同终端。
缺点:制作麻烦
, 需要花很大精力去调兼容性
问题
5.3 总结
现在市场常见的移动端开发有 单独制作移动端页面
和 响应式页面
两种方案
现在市场主流的选择还是单独制作移动端页面
6. 移动端技术解决方案
6.1 移动端浏览器兼容问题
移动端浏览器基本以 webkit
内核为主,因此我们就考虑webkit
兼容性问题。
我们可以放心使用 H5
标签和CSS3
样式。
同时我们浏览器的私有前缀我们只需要考虑添加webkit
即可
6.2 移动端公共样式
移动端 CSS 初始化推荐使用 normalize.css/
Normalize.css
:保护了有价值的默认值
Normalize.css
:修复了浏览器的bug
Normalize.css
:是模块化的
Normalize.css
:拥有详细的文档
官网地址: http://necolas.github.io/normalize.css
6.3 移动端大量使用 CSS3盒子模型box-sizing
传统模式宽度计算:盒子的宽度 = CSS中设置的width + border + padding
CSS3盒子模型: 盒子的宽度= CSS中设置的宽度width 里面包含了 border 和 padding
也就是说,我们的CSS3
中的盒子模型,padding
和 border
不会撑大盒子了
/*CSS3盒子模型*/
box-sizing: border-box;
/*传统盒子模型(默认)*/
box-sizing: content-box;
6.3.1 note
移动端可以全部CSS3
盒子模型
PC端
如果完全需要兼容,我们就用传统模式,如果不考虑兼容性,我们就选择CSS3 盒子模型
6.3.2 example05
<!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>
div:nth-child(1) {
/* 传统盒子模型= width + border + padding */
width: 200px;
height: 200px;
background-color: pink;
padding: 10px;
border: 10px solid red;
box-sizing: content-box;
}
div:nth-child(2) {
/* padding 和 border 不会再撑大盒子了 */
box-sizing: border-box;
width: 200px;
height: 200px;
background-color: purple;
padding: 10px;
border: 10px solid blue;
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>
参考:https://github.com/6xiaoDi/blog–Mobile-layout/tree/a0.06
Branch: branch01commit description:a0.06(example05—C3盒子模型)
tag:a0.06
6.4 移动端特殊样式
/*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; }
6.4.1 example06
6.4.1.1 example06-1
<!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>
</style>
</head>
<body>
<a href="#">CCCCCCC</a>
</body>
</html>
移动端a标签
会默认高亮显示。
a {
-webkit-tap-highlight-color: transparent;
}
参考:https://github.com/6xiaoDi/blog–Mobile-layout/tree/a0.07
Branch: branch01commit description:a0.07(example06-1—移动端特殊样式-去除a标签高亮)
tag:a0.07
6.4.1.2 example06-2
<!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>
a {
-webkit-tap-highlight-color: transparent;
}
</style>
</head>
<body>
<a href="#">CCCCCCC</a>
<input type="button" value="按钮">
</body>
</html>
去除默认样式:反光效果
input {
-webkit-appearance: none;
}
参考:https://github.com/6xiaoDi/blog–Mobile-layout/tree/a0.08
Branch: branch01commit description:a0.08(example06-2—移动端特殊样式-去除按钮默认反光样式)
tag:a0.08
长按页面时的弹出菜单
/*禁用长按页面时的弹出菜单*/
img,a { -webkit-touch-callout: none; }
7. 移动端常见布局
7.1 移动端技术选型
7.1.1 移动端
单独制作(主流)
- 流式布局(百分比布局)
- flex 弹性布局(强烈推荐)
- less+rem+媒体查询布局
- 混合布局
7.1.2 响应式
页面兼容移动端(其次)
- 媒体查询
- bootstarp
8. 流式布局(百分比布局)
流式布局
,就是百分比布局
,也称非固定像素布局
。
通过盒子的宽度设置成百分比
来根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充。
流式布局
方式是移动web开发使用的比较常见的布局方式
。
8.1 example07
<!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>
section {
width: 100%;
}
section div {
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>
去除默认外边距以及进行浮动
* {
margin: 0;
padding: 0;
}
section {
width: 100%;
}
section div {
float: left;
width: 50%;
height: 400px;
}
屏幕可以随意伸缩,两个盒子自由伸缩 => 流失布局
max-width 最大宽度 (max-height 最大高度)
min-width 最小宽度 (min-height 最小高度)
section {
width: 100%;
max-width: 980px;
min-width: 320px;
/*水平居中*/
margin: 0 auto;
}
参考:https://github.com/6xiaoDi/blog–Mobile-layout/tree/a0.09
Branch: branch01commit description:a0.09(example07—流式布局)
tag:a0.09
8.2 应用
这种流式布局常用,如jd
导航按钮,一排5个,宽度各占20%
(后续待补充)