移动端搭建

首先了解视口的概念

视口的介绍

• 在移动浏览器中，当页面宽度超出设备，浏览器内部虚拟的一个页面容器，将页面容器缩放到设备这么大，然后展示
• 解决了：移动端适配pc的问题。

视口的参数

视口的宽度可以通过meta标签设置，此属性为移动端页面视口设置，当前值表示在移动端页面的宽度为设备的宽度，并且不缩放（缩放级别为1）

• width:视口的宽度
• initial-scale：初始化缩放
• user-scalable:是否允许用户自行缩放（值：yes/no; 1/0）
• minimum-scale:最小缩放，一般设置了用户不允许缩放，就没必要设置最小和最大缩放
• maximum-scale:最大缩放
  #####如何配置视口
• 也可以参考京东等网站的设置

---

首先包一个大盒子 设置 width:100%;height:100%;wax-width:760px 最大宽度可根据需求自行设置

1.滚动条

• 子元素宽度/高度超过父元素宽度/高度，并且父元素设置overflow:scroll的时候出现滚动条。

2.单侧固定另一侧自适应（自适应布局）

• 盒子宽度设为100%
• 单侧浮动并设置宽度，另一侧设置margin大小为浮动元素宽度。注意浮动元素需要放在自适应元素的前边。
• 使用flex布局实现。
• 可以都设置为浮动通过calc()函数进行计算。

  关于calc（）函数

• 用于动态计算长度值
• 括号里运算符前后都需保留一个空格

3.浮动或定位导致元素位置随屏幕大小移动的情况

• 给该元素设置同样的max-width 即可

4.获取设备宽高

vw、vh、vmin、vmax 的含义

• vw、vh、vmin、vmax 是一种视窗单位，也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗（Viewport）大小来决定的，单位 1，代表类似于 1%。
• 视窗(Viewport)是你的浏览器实际显示内容的区域—，换句话说是你的不包括工具栏和按钮的网页浏览器。
• 具体描述如下：
  vw：视窗宽度的百分比（1vw 代表视窗的宽度为 1%）
  vh：视窗高度的百分比
  vmin：当前 vw 和 vh 中较小的一个值
  vmax：当前 vw 和 vh 中较大的一个值

vw、vh 与 % 百分比的区别

• % 是相对于父元素的大小设定的比率，vw、vh 是视窗大小决定的。
• vw、vh 优势在于能够直接获取高度，而用 % 在没有设置 body 高度的情况下，是无法正确获得可视区域的高度的，所以这是挺不错的优势。

vmin、vmax 用处

• 做移动页面开发时，如果使用 vw、wh 设置字体大小（比如 5vw），在竖屏和横屏状态下显示的字体大小是不一样的。
• 由于 vmin 和 vmax 是当前较小的 vw 和 vh 和当前较大的 vw 和 vh。这里就可以用到 vmin 和 vmax。使得文字大小在横竖屏下保持一致。