<!--
移动端：可以移动的设备就是移动端，手机、平板、小天才手表
现阶段来看我们主要做的是手机端APP界面开发
如何查看移动端页面效果？
我们需要在浏览器设备模拟其中查看效果------- F12或者鼠标右键检查----打开控制台
设备模拟其中的内容：
iphone6/7/8----------------移动设备类型
375*667--------------------移动设备分辨率（屏幕大小）
75%------------------------观看比例（75%是最佳观看比例）
旋转小图标------------------切换横屏竖屏
右侧三个小圆点
capture screenshot---------截图，截取当前屏幕大小的图片
capture full size screenshot---------截图，截取带有滚动条区域的图片
了解一下常用移动设备大小
以iphone手机为例：
iphone4----------3=220*480
iphone5----------320*568
iphone6/7/8----------375*667
iphone6/7/8s----------414*736
了解一下设计图稿大小：
iphone4----------640*960-----------2倍
iphone5----------640*1136----------2被
iphone6/7/8------750*1334----------2倍
iphone6/7/8s----------1242*2208------3倍
设备像素比（dpr），是一个固定的值，不变，就是一个死值
设备像素比（dpr）=物理像素/css像素
物理像素：我们在设计图稿上量取的宽高（大小），就是物理像素，可以把设计图稿看成是物理像素
CSS像素：我们在代码中所书写的宽度（width、height），可以把移动设备屏幕大小看成是css像素
css像素=物理像素/dpr
例如：在iphone5设计图稿上量取宽度120px，问代码中如何书写？
dpr=2
css像素=物理像素/dpr=120px/2=60px
视口：
视觉视口：我们肉眼看到的移动设备屏幕大小区域，就是视觉视口
布局视口：我们代码中css与html所构成的页面
理想视口：让布局视口正确显示在视觉视口中，达到理想化的状态，只需要借助一行代码来实现
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
移动端布局步骤：
1、确定设计图稿出自哪一版本
确定dpr
2、css像素=物理像素/dpr
3、引入icon字体图标，引入公共css文件，引入自己的css文件,理想视口
4、HTML布局CSS样式
HTML部分
<body>
header
section
footer
</body>
CSS:
html,body{
height:100%;
}
body{
display:flex;
flex-direction:column
}
移动端常用布局方式：
1、类似拉勾网，屏幕发生变化时，内容被拉伸，字号大小无变化，模块高度无变化
布局方式：px+%
2、类似京东，屏幕发生改变时，内容等比例缩放
1）rem布局
2）vw布局
常用的单位：
1、px------------像素，是一个固定的单位
2、%-------------百分比
3、em------------相对单位，相对于父元素字号大小进行缩放
注意：如果元素自身拥有字号大小，相对于自身字号大小进行缩放
4、rem-----------相对单位，相对于根目录字号大小进行缩放
始终相对于根目录字号大小进行缩放
5、vw与vh
vw-------viewport width---------视口宽度 100vw=一个完整的视口宽度
vh-------viewport height---------视口高度 100vh=一个完整视口高度
vmin------取视口宽高的最小值
vmax------取视口宽高的最大值
思考问题：
一个完整视口宽度与宽度100%有区别么？
有区别：
参照物不同，宽度100%，相对于父元素，100vw等于完整的视口宽度
单位转换：
1、rem与px转换
1rem=16px
在设计图稿iphone678上量取宽度120px，问代码中为多少rem？
dpr=2
css像素=物理像素/dpr======120px/2=60px
1rem=16px
？rem=60px
？=======60px16px===3.75rem
？=120px/2/16px=
在设计图稿iphone678上量取宽度236px，问代码中为多少rem？
dpr=2
css像素=236px/2=118px
1rem=16px
？rem=118px=========118px/16px===7.375rem
？=236px/2/16px=
我们发现以上计算过程太繁琐，考虑如何简化计算？
考虑将根目录字号大小更改为50px，html{font-size:50px;}
2、vw与px
以iphone678为例，屏幕宽：375px
100vw=375px 1vw=3.75px
？vw=100px
？vw=100/3.75=26.6666666667vw
1rem=100px=26.6666666667vw
设计图稿量取宽度400px，代码中为多少rem？
css像素=400px/2=200px
200px/100px=2rem
以iphone5为例，屏幕宽：320px
100vw=320px 1vw=3.2px
?vw=100px
?vw=100/3.2=31.25vw
机上计算过程过于繁琐，我们可以借助flexbel.js来实现单位的转换，他是个封装好的函数，那过来直接使用即可，对于里面的内容了解即可
如何使用：
引用：
<script src=""><script>
使用：
设计图稿上面量取的大小/100
-->
535
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
