前端学习-移动端页面开发和移动端的JS库01
前端Logo.jpg
大家好，我是lyh165，每天喜欢用17小时去工作和学习。
之前从事于后者(世界上有两种手机一种是其他手机，另一种是iPhone手机)dont ask my why.
现如今献血于(人生苦短，我用Python)期待于与吴恩达较于高下。
后于(UI设计、产品经理、技术总监、CTO、 我还有一个bug没改:然后die)
我打算用每周更新专栏三到四篇文章。不能做到每天一文是因为工作、学习、总结和概念以及编译成文章需要大量的时间。而且我是个疯子、疯子、疯子。花了17个小时都满足不了你们要求的疯子。就体谅一下吧。
一天24小时都不够用来学习的。你又什么资格去叹气！
大家可以扫码关注我的微信公众号.jpg
哎、最近在学tornado，视频的老师说字不清晰，自己吸收能力也慢，搞到我几天懵逼。也少更文，希望请见谅。
今天发布的专题是前端移动端页面开发和移动端的JS库。
本文章会拆分成4个部分
-- 移动端页面开发 --
1.移动端的App分类
2.web中的Viewport 视口的作用
3.移动端中的iPhone的视网膜屏幕介绍
4.PC和移动端的布局介绍（移动端只要使用rem布局、cssrem插件）
1.移动端的App分类
1.1、Native App 原生app手机应用程序
使用原生的语言开发的手机应用，Android系统用的是java，iOS系统用的是object-C
1.2、Hybrid App 混合型app手机应用程序
混合使用原生的程序和html5页面开发的手机应用
1.3、Web App 基于Web的app手机应用程序（我们主讲Web App）
完全使用html5页面加前端js框架开发的手机应用
2.web中的Viewport 视口的作用
视口是移动设备上用来显示网页的区域，一般会比移动设备可视区域大，宽度可能是980px或者1024px，目的是为了显示下整个为PC端设计的网页，这样带来的后果是移动端会出现横向滚动条，为了避免这种情况，移动端会将视口缩放到移动端窗口的大小。这样会让网页不容易观看，可以用 meta 标签，name=“viewport ” 来设置视口的大小，将视口的大小设置为和移动设备可视区一样的大小。
简单来说：PC端默认可能是980px,1024px，但是到了手机端是320px。所以系统会自动将980px按等比例进行缩放到320px的尺寸。
那么，我们如何不让PC端进行等比例缩放呢。这样就出现视口设置。
不让系统按照PC端的宽度进行设置视口。是按照手机屏幕的宽度进行设置。
sublime快捷键(Emmet插件) meta:vp
<!-- width=device-width 宽度等于屏幕的宽度
user-scalable=no 不允许用户在屏幕里面缩放
initial-scale=1.0 初始缩放等于1
maximum-scale=1.0, minimum-scale=1.0 用来适配浏览器-->
<!-- <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> -->
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
没有设置视口的效果.gif
移动端和web端(设置视口，默认按照当前屏幕的宽度设置宽度).gif
3.移动端中的iPhone的视网膜屏幕介绍
先了解一下 一般屏幕物理像素密度
比如一张图片 像素是 480*320
一般电脑 1个图像的像素对应一个屏幕的物理像素
苹果电脑 retina屏幕（一般的logo如果没有做retina视网膜适配，图片一般都是虚的）
相当于在拿了一般电脑的图片过来，进行放大
如何解决 retina适配
需要把一张图片的像素扩展到2倍。也就是960*640。并且通过代码设置成
480*320
pic1x.jpg
pic2x.jpg
视网膜适配 核心代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>视网膜屏幕适配</title>
<style type="text/css">
.retina_pic{
width: 300px;
height: 215px;
}
</style>
</head>
<body>
<img src="images/pic1x.jpg" alt="1倍图">
<img src="images/pic2x.jpg" alt="2倍图" class="retina_pic">
</body>
</html>
2倍图和3倍图适配问题。
一般3倍图直接使用2倍图进行适配即可。因为3倍图的密度和2倍图的密度用肉眼已经看不出来了。
4.PC和移动端的布局介绍（移动端只要使用rem布局、cssrem插件）
PC端的布局类型有：
4.1、流体布局
流体布局，就是使用百分比来设置元素的宽度，元素的高度按实际高度写固定值，流体布局中，元素的边线无法用百分比，可以使用样式中的计算函数 calc() 来设置宽度，或者使用 box-sizing 属性将盒子设置为从边线计算盒子尺寸。
流体布局的 核心代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>流体布局</title>
<style type="text/css">
body,ul{
margin: 0;
padding: 0
}
ul{
list-style: none;
}
.menu{
height: 50px;
}
.menu li{
/*第一种解决宽度超过的方法：*/
/*width:calc(25% - 4px); */
height:50px;
text-align:center;
line-height:50px;
float:left;
background-color:gold;
border:2px solid #000;
width:25%;
box-sizing: border-box;
}
</style>
</head>
<body>
<ul class="menu">
<li><a href="">餐单文字</a></li>
<li><a href="">餐单文字</a></li>
<li><a href="">餐单文字</a></li>
<li><a href="">餐单文字</a></li>
</ul>
</body>
</html>
移动端和web端(流体布局适配calc()、box-sizing).gif
4.2、响应式布局(现在市场70%的网页都是使用响应式布局)
响应式布局就是使用媒体查询的方式，通过查询浏览器宽度，不同的宽度应用不同的样式块，每个样式块对应的是该宽度下的布局方式，从而实现响应式布局。响应式布局的页面可以适配多种终端屏幕（pc、平板、手机）。
响应式布局 核心代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>响应式布局</title>
<style type="text/css">
body,ul{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
.con{
border:1px solid #000;
overflow: hidden;
}
.con li{
width: 23%;
height: 200px;
background-color: gold;
float: left;
margin: 30px 1%;
}
@media (max-width: 800px)
{
.con li{
width: 46%;
margin: 30px 2%;
}
}
@media (max-width: 500px)
{
.con li{
width: 90%;
margin: 30px 5%;
}
}
</style>
</head>
<body>
<ul class="con">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</body>
</html>
移动端和web端(响应式布局).gif
4.3、弹性盒模型布局
弹性盒模式布局：能够根据开发者自己定义样式，布局。所谓弹性说明是比较灵活扩展。
不像响应式布局的栅格系统（每个行分成12等分，bootstrap将会讲到），不过市场还是用一套比较完善的布局，因为既然使用到，那么就遵循它们的规则
弹性盒模型布局的 常用属性
1、容器属性
display : flex
声明使用弹性盒布局
flex-direction : row | row-reverse | column | column-reverse
确定子元素排列的方向
flex-wrap : nowrap | wrap | wrap-reverse
元素超过父容器尺寸时是否换行
flex-flow : flex-direction | flex-wrap
同时设置flex-direction 和 flex-wrap
justify-content : flex-start | flex-end | center | space-between | space-around
子元素的尺寸确定之后，用此属性来设置flex-direction定义方向上的分布方式
align-items : flex-start | flex-end | center | baseline | stretch
子元素的尺寸确定之后，用此属性来设置flex-direction定义方向上的垂直方向的分布方式
align-content : flex-start | flex-end | center | space-between | space-around | stretch
设置多行子元素在行方向上的对齐方式
2、条目属性
flex : none | <' flex-grow '> <' flex-shrink >'? || <' flex-basis '>
同时设置flex-grow 和 flex-shrink 以及 flex-basis
flex-grow ： number
表示的是当父元素有多余的空间时，这些空间在不同子元素之间的分配比例
flex-shrink： number
当父元素的空间不足时，各个子元素的尺寸缩小的比例
flex-basis ：length | percentage | auto | content
用来确定弹性条目的初始主轴尺寸。
align-self ：auto | flex-start | flex-end | center | baseline | stretch
覆写父元素指定的对齐方式
order : integer
改变条目在容器中的出现顺序
弹性盒模型实例 核心代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body,ul{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
/* 使用弹性盒模型进行布局 */
.menu_con{
width: 960px;
/*height: 100px;*/
/*background-color: red;*/
margin: 50px auto 0;
display: flex;
}
.logo{
width: 80px;
height: 80px;
background-color: gold;
}
.menu{
/*background-color: cyan;*/
flex-grow: 1;
display: flex;
align-items: center;
overflow: hidden;
}
.menu li{
flex-grow: 1;
text-align: center;
border-right:1px solid #000;
margin-right: -1px;
/* background-color: red;
border: 1px solid #000;*/
}
.menu li a{
text-decoration: none;
color: #666;
}
@media (max-width: 960px) {
.menu_con{
width: 100%;
}
}
</style>
</head>
<body>
<div class="menu_con">
<div class="logo">
</div>
<ul class="menu">
<li><a href="">首页</a></li>
<li><a href="">公司简介</a></li>
<li><a href="">公司新闻</a></li>
<li><a href="">行业动态</a></li>
<li><a href="">联系我们</a></li>
</ul>
</div>
</body>
</html>
移动端和web端(弹性盒模型实例).gif
4.4今天的布局重点:移动端的rem布局类型：
首先了解em单位，em单位是参照元素自身的文字大小来设置尺寸，rem指的是参照根节点的文字大小，根节点指的是html标签，设置html标签的文字大小，其他的元素相关尺寸设置用rem，这样，所有元素都有了统一的参照标准，改变html文字的大小，就会改变所有元素用rem设置的尺寸大小。
em单位 和 rem单位的区别，rem会整体缩放
m单位是参照元素自身的文字大小来设置尺寸，rem指的是参照根节点的文字大小
两张GIF图带你认识em单位，和rem单位。我们需要做界面的时候，需要是整体缩放。所以采用rem单位。
em效果 (调整根节点元素没有反应)
移动端和web端(em的布局).gif
rem效果 (调整元素自身效果没有反应)
移动端和web端(rem的布局).gif
好了，上面了解之后，那么我们以后编写代码都不会使用px单位，因为px单位是一种固定单位。不能适配所有的机型。我们以后使用rem来做适配各种手机的单位。只需要修改根节点的font-size的值即可。
但是，我们效果图是px单位。我们每次拿到px单位还需要计算是一个工作量非常大的事情。所以已经有人开发这款插件出来的。
插个小曲，rem、px换算问题
一张2倍图(@2x)logo图片比如是 100*100的像素
那么它实际在界面只是 占了50*50像素。
然后在根据set_root.js动态计算字体大小设置rem的值。
下面我的1rem值等于docElement.style.fontSize
所以到时候，在我的代码里面100px的换算是2.5rem
(
function(){
var calc = function(){
var docElement = document.documentElement; //获取一个html文档
// 三目运算符 简写
// 如果屏幕大于 > 750 就按照750 否则就等于下面的
// docElement.style.fontSize = 20*(clientWidthValue/375) + 'px';
// 然后用当前屏幕的宽度做一个基准 / 375 再乘以一个20 然后赋值给html的fontsize
// 这就是动态改变fontsize的值
var clientWidthValue = docElement.clientWidth > 750 ? 750 : docElement.clientWidth;
docElement.style.fontSize = 20*(clientWidthValue/375) + 'px';
}
calc();
window.addEventListener('resize',calc);
})();
移动端的布局(cssrem)插件下载和安装：
Sublime Text 3 的cssrem插件 GitHub链接 https://github.com/flashlizi/cssrem
css中的px转rem插件安装 插件
image.png
image.png
退出sb
image.png
cssrem插件设置px转rem的换算率
为什么px_to_rem要设置成40 比如 ps里面的一个图片高度是 100px（2倍图 以iPhone6为例） 如果在sb编写代码 那么高度是要除以一半的 也就是50，那么转换成rem也就是 50/20=2.5rem 那么如果那100去除 也就是 100/40=2.5 1rem = 20 因为图片是2倍的 所以需要用100/40
image.png
image.png
4.2使用rem做移动端的项目
image.png
rem做的移动端代码
链接：https://pan.baidu.com/s/1cepBEKQpnX78aV3IKYddGw 密码：of53
