移动端适配方案

移动端适配方案

百分比布局

百分比布局（流式布局）是通过百分比单位 " % " 来实现对不同屏幕宽度的响应式效果
百分比布局在布局中应用比较广泛，通过百分比单位使页面中组件的宽高随着浏览器宽高的变化而变化，从而实现响应式的效果
缺点：大量计算百分比值比较困难，各个属性使用百分比，相对父元素的属性并不唯一，使布局变得复杂（margin、padding垂直水平方向都相对比父元素的宽度，border-radius、translate相对于元素自身，定位元素属性相对于直接非static定位的父元素…）

css：单位为%，值为该元素属性值除以相对于元素属性值的比

vw/vh适配

vw/vh 是 CSS3 新增的相对单位，相对于视口的宽度 / 高度，视口被均分为100单位，每单位等于1vw/vh

• vw：视口宽度的百分比（100vw等于视口宽度的100%）
• vh：视口高度的百分比（100vh等于视口高度的100%）

通过 vw/vh 设置元素的大小可以实现对不同屏幕宽度的响应式效果

css：单位为vw/vh，以 ip6 的设计图为例，1px =（1/375）*100 vw/vh

@media媒体查询

@media媒体查询 通过查询不同的媒体类型来实现不同的样式，特别是响应式页面，可以通过不同媒体类型的不同屏幕大小，实现多套不同的样式，达到自适应的效果
缺点：配置多个响应断点，可能造成响应式断层问题，对用户不友好

常用媒体类型：

• all：用于所有设备
• print：用于打印机和打印预览
• screen：用于电脑屏幕，平板电脑，智能手机等
• speech：用于屏幕阅读器等发声设备

常用查询关键字：

• not：用于排除某种媒体类型
• only：用于指定某特定媒体类型
• all：用于所有的媒体类型
• and：用于连接多种媒体特性

常用媒体特性：

• width：输出设备中页面可见区域的宽度
• height：输出设备中页面可见区域的宽度
• max-width / max-height：输出设备中的页面最大可见区域宽度 / 高度
• min-width / min-height：输出设备中的页面最小可见区域宽度 / 高度

1.内嵌式css：

//通过查询不同的媒体类型，使用不同的css代码
@media screen and (min-width:1200px) {
	//css代码
}
@media screen and (min-width:992px) {
	//css代码
}
@media screen and (min-width:768px) {
	//css代码
}
@media screen and (min-width:480px) {
	//css代码
}

2.外链式css：

//通过查询不同的媒体类型，引入不同的css文件
<link rel="stylesheet" media="screen and (min-width:1200px)" href="a.css">
<link rel="stylesheet" media="screen and (min-width:992px)" href="b.css">
<link rel="stylesheet" media="screen and (min-width:768px)" href="c.css">
<link rel="stylesheet" media="screen and (min-width:480px)" href="d.css">

viewport视口适配

viewport 是浏览器视口，代表浏览器的可视区域，就是设备屏幕上用来显示网页的那块区域

viewport meta标签的content属性值：

• width=device-width ：表示宽度等于设备屏幕的宽度（也可以等于一个正整数）
• initial-scale=1.0：表示初始的缩放比例（页面初始加载时的默认比例）
• minimum-scale=1.0：表示允许用户缩放的最小比例
• maximum-scale=1.0：表示允许用户缩放的最大比例
• user-scalable=no：表示用户是否可以手动缩放（no为不允许，yes为允许）

js：通过动态设置缩放比例，使不同设备宽度等于相同宽度

window.onload = function() {
    //获取屏幕宽度
    var screenW = window.screen.width;
    //目标宽度（以ip6的375为例）
    var targetW = 375;
    //设置缩放比例，使不同设备宽度均为目标宽度
    var scale = screenW/targetW;
    var meta = document.createElement("meta");
    meta.name = "viewport";
    meta.content = "width=device-width, initial-scale="+scale+", mininum-scale="+scale+", maximum-scale="+scale+", user-scalable=no"
    document.head.appendChild(meta);
};

css：以 ip6 的设计图为例，大小为实际px大小

rem适配

rem 是CSS3新增的相对长度单位，相对于根元素（html）的 font-size 值的大小来计算，1rem 等于根元素 font-size 的 px 值

方法1：动态设置根元素font-size + rem适配

缺点：通过 js 动态设置根元素的 font-size 值，使 js 和 css 耦合在一起，增加了文件之间的依赖

设置 viewport meta：

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

js：根据浏览器显示区域宽度动态设置根元素字体大小

window.onload = function() {
    //获取根元素（html）
    var html = document.documentElement
    //获取浏览器显示区域宽度
    var clientW = html.clientWidth
    //根据浏览器显示区域宽度设置根元素字体大小实现rem适配（以ip6的375为例）
    html.style.fontSize = clientW/3.75+'px'
}

css：单位为rem，以 ip6 的设计图为例，大小为实际px大小除以100（1px = 0.01rem）

方法2：CSS calc()函数 + rem适配

CSS calc()函数用于动态计算长度值，允许我们在属性值中执行数学计算操作
通过 calc() 函数和 vw 属性来实现自动计算，设置根元素字体大小
缺点：calc() 函数存在兼容性问题

设置根元素字体大小：

<style>
    /* 以ip6的375为例，设计稿尺寸750/100 */
    html {
        font-size: calc(100vw / 7.5);
        font-size: -moz-calc(100vw / 7.5);
        font-size: -webkit-calc(100vw / 7.5);
    }
</style>

css：单位为rem，以 ip6 的设计图为例，大小为实际px大小除以100（1px = 0.01rem）

方法3：vw设置根元素font-size + rem适配

通过 vw 设置根元素的字体大小，使根元素字体大小实现对不同屏幕宽度的响应式效果，再通过 rem 实现元素大小的适配（rem 相对于根元素 html 的 font-size 值的大小来计算）

设置根元素字体大小：

<style>
    /* 以ip6的375为例 */
    html {
	    font-size: 100px;
	    /* 通过vw设置根元素字体大小：100px=100/375=0.26666666vw */
	    font-size: 0.26666666vw;
	}
</style>

css：单位为rem，以 ip6 的设计图为例，大小为实际px大小（1px = 1rem）

弹性盒子（Flex布局）

弹性盒子是CSS3的一种新的布局模式，可以简便、完整、响应式地实现各种页面布局
CSS3弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式

弹性盒子内容：

• 弹性容器（Flex container）：通过设置 display: flex / inline-flex; 将其定义为弹性容器
• 弹性子元素（Flex item）：弹性容器的子元素

弹性盒子常用属性:

• flex-direction：设置弹性盒子中子元素排列方式
  • row：默认值，子元素横向从左到右排列（左对齐）
  • row-reverse：子元素反转横向排列（右对齐），从后往前排，最后一项排在最前面
  • column：子元素纵向从上到下排列
  • column-reverse：子元素反转纵向排列，从后往前排，最后一项排在最上面
• justify-content：设置弹性盒子中子元素在主轴（横轴）方向上的对齐方式
  • flex-start：默认值，子元素位于容器的开头，依次平齐摆放
  • flex-end：子元素位于容器的结尾，依次平齐摆放
  • center：子元素位于容器的中心，依次平齐摆放
  • space-between：子元素位于各行之间留有相同空白间隔的容器内
  • space-around：子元素位于各行之前、之间、之后都留有相同空白间隔的容器内
• align-items：设置弹性盒子中子元素在侧轴（纵轴）方向上的对齐方式
  • stretch：默认值，子元素被拉伸以适应整个容器
  • center：子元素在容器的中心摆放
  • flex-start：子元素在容器的开头摆放
  • flex-end：子元素在容器的结尾摆放
  • baseline：子元素在容器的基线上摆放
• flex-wrap：设置弹性盒子中子元素的换行方式
  • nowrap：默认值，子元素不换行，超出部分溢出
  • wrap：子元素超出时换行
  • wrap-reverse：子元素超出时以相反的顺序换行
• align-content：修改 flex-wrap 属性的行为，类似 align-items，但不是设置子元素对齐，而是设置行对齐
  • stretch：默认值，各行将会伸展以占用剩余的空间
  • flex-start：各行向弹性盒容器的起始位置堆叠
  • flex-end：各行向弹性盒容器的结束位置堆叠
  • center：各行向弹性盒容器的中间位置堆叠
  • space-between：各行在弹性盒容器中平均分布
  • space-around：各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半

弹性子元素常用属性：

• order：设置元素的排列顺序
  • < integer >：该值为整数数字，可以为负值，默认为0，定义排列顺序，数值小的排在前面
• flex-grow：设置元素的放大比例
  • < number >：该值为数字，元素占剩余空间的比例，默认为0，即如果存在剩余空间，也不放大，如果都为1，将等分剩余空间
• flex-shrink：设置元素的缩小比例
  • < number >：该值为数字，元素在空间不足时缩小的比例，默认为1，即如果空间不足，该元素将缩小，如果都为1，空间不足时将等比例缩小，如果有一个为0，空间不足时该元素不缩小
• flex-basis：设置在分配多余空间之前，元素占据的主轴空间，浏览器根据这个属性，计算主轴是否有多余空间
  • auto：默认值，元素的本来大小
  • < length >：该值为长度单位数字，可以设为跟width或height属性一样的值，元素将占据固定空间
• flex：flex-grow、flex-shrink 和 flex-basis的简写
  • initial：默认值，值为 0 1 auto
  • auto：值为 1 1 auto
  • none：值为 0 0 auto
• align-self：设置单个元素自身在侧轴（纵轴）方向上的对齐方式
  • auto 默认值，元素继承父容器的 align-items 属性，如果没有父容器则为 “stretch”
  • stretch：元素被拉伸以适应容器
  • center：元素在容器的中心摆放
  • flex-start：元素在容器的开头摆放
  • flex-end：元素在容器的结尾摆放
  • baseline：元素在容器的基线上摆放

css：通过设置元素css的弹性盒子属性实现响应式布局