移动Web页面开发
作者：互联网
移动前端概述
移动行业现状
浏览器种类繁多，参差不齐
除了系统原生浏览器，还有很对第三方浏览器。如UC，百度，腾讯，360，遨游等等，这些浏览器对HTML5的支持度不一，对网页的渲染和交互各有不同，还有一些浏览器性能堪忧，从而增加了前端开发成本。
网速仍然是性能瓶颈
在pc时代，网速是困扰用户和开发者的一大难题。到了移动时代，这个问题更是被加倍放大。移动终端所处的网络环境差，是客观存在的现象，无论是3G，还是4G，网速都是阻碍移动前端发展的瓶颈。
多框架造成高门槛
在众多开发技术中，由于前端没有服务器错综复杂的业务逻辑，也不用配置臃肿的开发环境，所以比较简单易学。但是现如今，为了解决前端开发工程化，模块化，开发和维护成本等一系列的问题，出现了一大批前端框架，这就为学习者带来了学习难度。
移动网页开发和PC网页开发的区别
移动端浏览器类型
移动端浏览器内核
移动开发测试环境
通过谷歌浏览器可以测试不同型号，不同分辨率，及不同操作系统中的网页。
其实，在实际开发中不可能同时需要这么多项测试，一般变换型号，网络，分辨率即可。
移动端像素
移动端视口
布局视口和视觉视口
理想视口
meta标签的语法规则
meta视口标签的使用
移动网页开发
使用相对长度单位em布局网页内容
示例
<html>
<head>
<meta charset="UTF-8">
<title>em</title>
<style type="text/css">
#div1{
font-size: 10px;
}
#p1{
font-size: 2em;/*2em*10px=20px*/
}
#p2{
font-size: 2em;/*2em*16px=32px 网页默认字体大小为16 p2的父标签为body*/
}
</style>
</head>
<body>
<!--
em:
1.em属于一种相对值: 相对父标签中的尺寸
2.em值计算: em值 * 父标签尺寸== em值*100% [父标签的百分之N]
3.1em=100%[父标签的100%]
示例:
父标签字体尺寸: 16px
子标签字体尺寸: 1em [1*16] 2em[2*16]
-->
<div id="div1">
<p id="p1">相对单位p1</p>
</div>
<p id="p2">相对单位p2</p>
</body>
</html>
如果p1的父标签#div1也是2em的话那该怎么算呢
示例
<html>
<head>
<meta charset="UTF-8">
<title>em</title>
<style type="text/css">
#div1{
font-size: 2em;/*2em*10px=20px*/
}
#p1{
font-size: 2em;/*2em*20px=40px 因为div1为p1的父标签*/
}
#p2{
font-size: 2em;/*2em*10px=20px body是p2的父标签*/
}
body{
font-size: 10px;
}
</style>
</head>
<body>
<div id="div1">
<p id="p1">相对单位p1</p>
</div>
<p id="p2">相对单位p2</p>
</body>
</html>
通过相对长度单位rem布局网页的内容
示例
<html>
<head>
<meta charset="UTF-8">
<title>rem</title>
<style type="text/css">
#div1{
font-size: 2rem;/*2*10=20*/
}
#p1{
font-size: 2rem;/*2*10=20 不相对于父标签只相对于html根标签*/
}
#p2{
font-size: 2rem;/*2*10=20*/
}
html{
font-size: 10px;
}
</style>
</head>
<body>
<!--
rem:
1.rem属于一种相对值: 相对<html>的尺寸,跟父标签没有关系
2.rem值计算: rem值 * <html>尺寸
3.1rem=100%<html>尺寸
示例:
<html>的字体尺寸: 12px
<div>的字体尺寸: 2rem [2*12]
-->
<div id="div1">
div1
<p id="p1">p1</p>
</div>
<p id="p2">p2</p>
</body>
</html>
小结
总结
标签：p2,Web,移动,浏览器,页面,p1,2em,font,size 来源： https://blog.csdn.net/yananye/article/details/119458146