移动端布局

1.什么是移动端： 可以移动的设备被称之为移动端，手机，平板，手表 我们目前开发主要做手机界面-APP界面 2.在PC端查看移动页面效果 F12或者鼠标右键检查----打开控制台-设备模拟器Emulated Devices --Devices--Add custom devices(切换不同设备的移动设备型号，查看页面效果) 3.设备模拟器里面的内容 iphone678----移动设备型号 375667------移动设备屏幕分辨率 75%----------观看页面比例（可以切换） 旋转图标------切换设备横屏或者竖屏 右上角三个小圆点 capture screenshot------截图，截取设备屏幕大小的短图 capture full size screenshot----截图，截取设备带有滚动条的长图 4.常用设备屏幕大小 以iphone手机为例 iphone4----320480 iphone5----320568 iphone678----375667 iphone678plus----414*736

5.移动端设计图稿大小
   以iphone手机为例
   iphone4----640*960-------------2倍
   iphone5----640*1136------------2倍
   iphone678----750*1134----------2倍
   iphone678plus----1242*2208-----3倍 

6.设备像素比(dpr) = 物理像素/CSS像素
  设备像素比是一个固定的值
      物理像素:ps中量取的距离(宽或高)，我们截取下来的设计图稿
      CSS像素:我们开发时编写的CSS像素,也可以理解成设备屏幕大小
     例如:ps中量取的宽度为100px,那我们代码例应该写多少CSS像素

例如:拿到一个iphone678的设计图稿,ps中量取的宽度为100px,那我们代码里面应该写多少CSS像素
已知公式 dpr = 物理像素/CSS像素
例：     CSS像素=物理像素/dpr

拿到一个iphone678的设计图稿-----2倍图-------dpr
量取100px----------物理像素
CSS像素=物理像素/dpr---------100px/2======50px

7.将一个700px300px的盒子放在移动设备中(iphone678----375667)能够完全显示出了(不合理) 700px明显大于设备宽度375,双击还可以放大 问题所在:视口不同 概念 视觉视口:我们看到的窗口，也就是设备屏幕的大小 布局视口:编写CSS和HTML的页面就是布局视口 现在将布局视口放在视觉视口中出现问题:大小不吻合,放大 如果想要达到理想化效果(布局视口与视觉视口完全吻合)要引入理想视口 理想视口:通过一行代码即可引入理想视口 meta标签 name="viewport"--视口 content=" width=device-width----宽度=设备宽度 initial-scale=1.0-----页面最初缩放比例1 minimum-scale=1.0-----最小缩放比例为1 maximum-scale=1.0-----最大缩放比例为1 user-scalable=no------不让用户进行缩放 " 8.移动端布局的步骤 移动端布局方式有很多种,响应式布局、固定px布局、rem布局

1. 确定设计图稿出自于哪一个设备 为了确定设备像素比(dpr) 2.根据设备像素比,计算CSS像素 CSS像素=物理像素/dpr 也可以理解成css像素=ps上面量取大小/2 3.引入理想视口 标签 4.引入icon图标,引入自己的CSS link标签引入 link标签引入 5.写移动端HTML布局 HTML部分 CSS部分 *{margin: 0; padding: 0;} ul{list-style: none;} img {display: block;} a {text-decoration: none;} input {outline: none;} html,body {height: 100%;} body {display: flex;flex-direction: column;}