移动web入门
1. 移动web预览与调试
步骤:
- F12开发者工具
- 点击手机图标
- 切换到移动调试模式
- 选择移动设备型号或调节移动设备宽度
- Chrome DevTools(谷歌浏览器)的模拟手机调试
- 搭建本地web服务器,手机和服务器一个局域网内,通过手机访问服务器
- 使用外网服务器,直接IP或域名访问
调节屏幕的宽度有哪几种方法?分别是什么?
- 选择移动设备型号或调节移动设备宽度
2. 移动端基础
2.1 为什么要重置移动设备的视口宽度?
浏览器
PC端常见浏览器
- 360浏览器
- 谷歌浏览器
- 火狐浏览器
- QQ浏览器
- 百度浏览器
- 搜狗浏览器
- IE浏览器
移动端常见浏览器
- UC浏览器,
- QQ浏览器,
- 欧朋浏览器
- 百度手机浏览器
- 360安全浏览器
- 谷歌浏览器
- 搜狗手机浏览器
- 猎豹浏览器
- 其他杂牌浏览器。
国内的UC和QQ,百度等手机浏览器都是根据Webkit修改过来的内核,国内尚无自主研发的内核,就像国内的手机操作系统都是基于Android修改开发的一样。
总结:兼容移动端主流浏览器,处理Webkit内核浏览器即可。
- 移动web开发几乎不考虑兼容性问题。原因:
- 手机浏览器多了一个可以缩放的视口,而且默认视口比较大。解决办法:重置视口宽度
屏幕
- 移动端设备屏幕尺寸非常多,碎片化严重。
- Android设备有多种分辨率:480x800, 480x854, 540x960, 720x1280,1080x1920等,还有传说中的2K,4k屏。
- 近年来iPhone的碎片化也加剧了,其设备的主要分辨率有:640x960, 640x1136, 750x1334, 1242x2208等。
- 作为开发者无需关注这些分辨率,因为我们常用的尺寸单位是 px 。
- 手机屏幕出现了多倍屏,超级清晰。解决办法:多倍图
- 手机屏幕尺寸比较小,而且用户是用手操作,点击时精准度不高。解决办法:尽可能扩大可点击范围
- 屏幕大小不一。解决办法:flex布局(也叫弹性布局、伸缩布局) 、rem布局和vw/vh
2.2 常见移动端屏幕尺寸
注:以上数据均参考自
注:作为前端开发,不建议大家去纠结dp,dpi,pt,ppi等单位。
2.3 移动端视口的问题
屏幕的宽度
2.4 如何重置?
在标签中加入:
<meta name = "viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0,minimum-scale=1.0, user-scalable=no">
- meta:提供有关页面的元信息
- viewport:视口
- width = device-width : 让浏览器视口的宽度等于设备宽度(即屏幕的宽度)
- initial-scale=1:视口的初始缩放比例为1
- maximum-scale = 1.0 :允许用户缩放的最大比例
- minimum-scale = 1.0 :允许用户缩放的最小比例
- user-scalable = no/0 :是否允许用户缩放页面
2.5. 什么时候需要重置视口?
- 移动端默认视口宽度为1000px左右,但是屏幕宽度才300-500px之间,所以需要将视口宽度重置
2.6 什么是视口?
- 视觉视口 visual viewport
- 字面意思,它是用户正在看到的网站的区域。注意:是网站的区域。
- 我们可以通过缩放去操作视觉视口,但不会影响布局视口,布局视口仍保持原来的宽度。
3. 流式布局(%)
3.1 多倍屏 - 屏幕尺寸
屏幕对角线的距离,单位是英寸
3.2 多倍屏 - 物理像素
3.3 多倍屏 - 物理分辨率
- iPhone6/7/8/分辨率: 750 x 1134
- 含义是:横排有750物理像素,竖排有1134物理像素
3.4多倍屏 - 设备像素比(dpr)
3.5 多倍屏 - 苹果手机屏幕
3.6 多倍屏 - 安卓手机屏幕
3.7 多倍屏 - 多倍屏
3.7 多倍图
4. 移动端技术解决方案
4.1 CSS初始化 normalize.css
移动端 CSS 初始化推荐使用 normalize.css/
- Normalize.css:保护了有价值的默认值
- Normalize.css:修复了浏览器的bug
- Normalize.css:是模块化的
- Normalize.css:拥有详细的文档
官网地址: necolas.github.io/normalize.c…
4.2 CSS3 盒子模型 box-sizing
- 传统模式宽度计算:
盒子的宽度
= CSS中设置的width + border + padding
- CSS3盒子模型:
盒子的宽度
=CSS中设置的宽度width 里面包含了 border 和 padding
- 也就是说,我们的CSS3中的盒子模型, padding 和 border 不会撑大盒子了
4.3 特殊样式
Version:0.9 StartHTML:0000000105 EndHTML:0000002768
/*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; }
5.移动端常见布局
5.1 移动端技术选型
移动端布局和以前我们学习的PC端有所区别:
- 单独制作移动端页面(主流)
- 流式布局(百分比布局)
- flex 弹性布局(强烈推荐)
- less+rem+媒体查询布局
- 混合布局
- 响应式页面兼容移动端(其次)
- 媒体查询
- bootstarp
5.2 流式布局(百分比布局)
- 流式布局,就是百分比布局,也称非固定像素布局。
- 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充。
- 流式布局方式是移动web开发使用的比较常见的布局方式。
max-width
最大宽度 (max-height 最大高度)min-width
最小宽度 (min-height 最小高度)
5.3 图片格式
DPG图片压缩技术
京东自主研发推出DPG图片压缩技术,经测试该技术,可直接节省用户近50%的浏览流 量,极大的提升了用户的网页打开速度。能够兼容jpeg,实现全平台、全部浏览器的兼容支持,经过内部和外部上万张图片的人眼浏览测试后发现,压缩后的图片和webp的清晰度对比没有差距。
webp 图片格式
谷歌开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3,并能节省大量的服务器宽带资源和数据空间
5.4 综合练习
<!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">
<title>Document</title>
<style>
body {
background-color: #f1f1f1;
}
footer {
width: 100%;
height: 80px;
position: fixed;
left: 0;
bottom: 0;
background-color: #fff;
}
a {
float: left;
width: 20%;
height: 80px;
text-decoration: none;
}
i {
display: block;
margin: 16px auto 0 auto;
width: 22px;
height: 22px;
background: url(./images/icon.png);
background-size: 165px auto;
/* border: 1px solid; */
}
a:nth-child(1) i {
background-position: -8px -5px;
}
a:nth-child(2) i {
background-position: -38px -5px;
}
a:nth-child(3) i {
background-position: -70px -5px;
}
a:nth-child(4) i {
background-position: -102px -5px;
}
a:nth-child(5) i {
background-position: -133px -5px;
}
span {
display: block;
text-align: center;
color: #333;
margin-top: 5px;
}
a:hover i {
background-color: red;
}
</style>
</head>
<body>
<footer>
<a href="">
<i></i>
<span>首页</span>
</a>
<a href="#">
<i></i>
<span>分类</span>
</a>
<a href="#">
<i></i>
<span>惊喜</span>
</a>
<a href="#">
<i></i>
<span>购物车</span>
</a>
<a href="#">
<i></i>
<span>未登录</span>
</a>
</footer>
</body>
</html>
效果图:
6. flex布局
6.1 入门介绍
- 2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。
6.2 Flex 布局是什么?
- Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。
- 任何一个容器都可以指定为 Flex 布局。
.box{
display: flex;
}
- 行内元素也可以使用 Flex 布局。
.box{
display: inline-flex;
}
- Webkit 内核的浏览器,必须加上
-webkit
前缀。
.box{
display: -webkit-flex; /* Safari */
display: flex;
}
注意: 设为 Flex 布局以后,子元素的float
、clear
和vertical-align
属性将失效。
6.3 基本概念
- 采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"。
- 容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。
- 主轴的开始位置(与边框的交叉点)叫做
main start
,结束位置叫做main end
; - 交叉轴的开始位置叫做
cross start
,结束位置叫做cross end
。 - 项目默认沿主轴排列。单个项目占据的主轴空间叫做
main size
- 占据的交叉轴空间叫做
cross size
。 Version:0.9 StartHTML:0000000105 EndHTML:0000000659 StartFragment:0000000141 EndFragment:0000000619
总结flex布局原理:
- 就是通过给父盒子添加flex属性,来控制子盒子的位置和排列方式
6.4 容器的属性
以下6个属性设置在容器上。
1. flex-direction
flex-direction
属性决定主轴的方向(即项目的排列方向)。
值:
row
(默认值):主轴为水平方向,起点在左端。row-reverse
:主轴为水平方向,起点在右端。column
:主轴为垂直方向,起点在上沿。column-reverse
:主轴为垂直方向,起点在下沿。
<!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">
<title>1. flex-direction属性决定主轴的方向</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
display: flex;
width: 600px;
height: 400px;
border: 2px solid red;
box-sizing: border-box;
/* flex-direction: row; */
/* flex-direction: row-reverse; */
/* flex-direction: column; */
flex-direction: column-reverse;
}
.box-g {
flex-direction: row;
width: 100px;
height: 50px;
border: 2px solid red;
margin-top: -1px;
}
</style>
</head>
<body>
<div class="box">
<div class="box-g"></div>
<div class="box-g"></div>
<div class="box-g"></div>
<div class="box-g"></div>
</div>
</body>
</html>
效果图:
2. flex-wrap(了解)
- 默认情况下,项目都排在一条线(又称"轴线")上。
flex-wrap
属性定义,如果一条轴线排不下,如何换行。 值: (1)nowrap
(默认):不换行。
(2)wrap
:换行,第一行在上方。
(3)wrap-reverse
:换行,第一行在下方。
3. flex-flow
flex-flow
属性是flex-direction
属性和flex-wrap
属性的简写形式,默认值为row nowrap
。
.box {
flex-flow: <flex-direction> || <flex-wrap>;
}
4. justify-content
justify-content
属性定义了项目在主轴上的对齐方式。 值:flex-start
(默认值):左对齐flex-end
:右对齐center
: 居中space-between
:两端对齐,项目之间的间隔都相等。space-around
:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
<!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">
<title>1. flex-direction属性决定主轴的方向</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
display: flex;
width: 600px;
height: 400px;
border: 2px solid red;
box-sizing: border-box;
display: flex;
/* flex-direction: column-reverse; */
/* justify-content: flex-start; */
/* justify-content: flex-end; */
/* justify-content: center; */
/* justify-content: space-around; */
/* justify-content: space-between; */
justify-content: space-evenly;
}
.box-g {
width: 100px;
height: 50px;
margin: 10px;
border: 2px solid rgb(15, 201, 40);
}
</style>
</head>
<body>
<div class="box">
<div class="box-g"></div>
<div class="box-g"></div>
<div class="box-g"></div>
<div class="box-g"></div>
</div>
</body>
</html>
效果图:
5. align-items
align-items
属性定义项目在交叉轴上如何对齐。
值:
flex-start
:交叉轴的起点对齐。flex-end
:交叉轴的终点对齐。center
:交叉轴的中点对齐。baseline
: 项目的第一行文字的基线对齐。stretch
(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
<!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">
<title>1. flex-direction属性决定主轴的方向</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
display: flex;
width: 600px;
height: 400px;
border: 5px solid red;
box-sizing: border-box;
display: flex;
/* align-items: flex-start; */
/* align-items: flex-end; */
/* align-items: center;
justify-content: center; */
align-items: stretch;
}
.box-g {
width: 100px;
/* height: 50px; */
/* margin: 10px; */
border: 2px solid rgb(70, 163, 240);
}
</style>
</head>
<body>
<div class="box">
<div class="box-g"></div>
<div class="box-g"></div>
<div class="box-g"></div>
<div class="box-g"></div>
</div>
</body>
</html>
效果图:
6. align-content
align-content
属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
值:
flex-start
:与交叉轴的起点对齐。flex-end
:与交叉轴的终点对齐。center
:与交叉轴的中点对齐。space-between
:与交叉轴两端对齐,轴线之间的间隔平均分布。space-around
:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。stretch
(默认值):轴线占满整个交叉轴。
6.5 项目的属性
以下6个属性设置在项目上。
1. order
order
属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。
.item {
order: <integer>;
}
2. flex-grow
flex-grow
属性定义项目的放大比例,默认为0
,即如果存在剩余空间,也不放大。
.item {
flex-grow: <number>; /* default 0 */
}
如果所有项目的flex-grow
属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow
属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。
3. flex-shrink
flex-shrink
属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
.item {
flex-shrink: <number>; /* default 1 */
}
如果所有项目的flex-shrink
属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink
属性为0,其他项目都为1,则空间不足时,前者不缩小。负值对该属性无效。
4. flex-basis
flex-basis
属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto
,即项目的本来大小。
.item {
flex-basis: <length> | auto; /* default auto */
}
它可以设为跟width
或height
属性一样的值(比如350px),则项目将占据固定空间。
5. flex
flex
属性是flex-grow
, flex-shrink
和 flex-basis
的简写,默认值为0 1 auto
。后两个属性可选。
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
该属性有两个快捷值:auto
(1 1 auto
) 和 none (0 0 auto
)。建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。
6. align-self
align-self
属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items
属性。默认值为auto
,表示继承父元素的align-items
属性,如果没有父元素,则等同于stretch
。
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}