移动端适配

移动端适配

视口viewport：

<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=0,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">

<meta>标签中定义了一些元数据信息，通过设置<meta name = "viewport">，提供有关 视口初始大小 的信息，供移动设备 使用。属性值为：

属性	属性值	描述
width	数值 / device-width	视口宽度
height	数值 / device-height	视口高度
initial-scale	0.0 ~ 10.0	设备宽度与视口大小之间的缩放比率
maximum-scale	0.0 ~ 10.0	缩放最大值
minimum-scale	0.0 ~ 10.0	缩放最小值
user-scalable	布尔值	默认yes，为no时用户不能缩放网页

适配方案：

1. rem 布局

rem 是CSS3新增的一个相对单位
使用rem布局：

.box {
    width: 10rem; /* 160px */
}

对于需要使用rem来适配不同屏幕的元素，使用rem来作为CSS单位，为了方便，可以借助sass写一个函数计算px转化为rem，写样式时不必一直手动计算

@function px2rem($px, $base-font-size: 32px) {
  @if (unitless($px)) {
    @warn "Assuming #{$px} to be in pixels, attempting to convert it into pixels for you";
    @return px2rem($px + 0px); // That may fail.
  } @else if (unit($px) == rem) {
    @return $px;
  }
  @return ($px / $base-font-size) * 1rem;
}

// 使用，eg:
font-size: px2rem(18px);

优点：rem 布局能很好的实现在不同尺寸的屏幕横向填满屏幕，且在不同屏幕元素大小比例一致

缺点：在大屏设备（Pad）上，元素尺寸会很大，页面显示更少的内容。

2. 弹性盒适配（合理布局）

<meta name="viewport" content="width=device-width">

使用flex布局：

.box {
  display: flex;
}

常用的flex属性值：
flex-direction ：设置主轴的方向
justify-content ：设置主轴上的子元素排列方式
flex-wrap ：设置子元素是否换行
align-content ：设置侧轴上的子元素排列方式（多行）
align-items：设置侧轴上的子元素排列方式（单行）
flex-flow ：复合属性，相当于同时设置了
flex-direction和flex-wrap
1.1、flex-direction 设置主轴的方向
属性值 说明
row 默认值从左到右
row-reverse 从左到右
column 从上到下
column-reverse 从上到下
1.2、justify-content 设置主轴的子元素排列方式
justify-content 属性定义了项目在主轴上的对齐方式

注意：使用这个属性之前一定要确定好主轴是那个

3. 百分比布局

百分比布局采用百分比设置元素宽高
百分比用法：
要想设置当前容器的高度或宽度百分比，必须“明确”知道父容器的高度或宽度

.box {
     width:100%;
     
  }