移动端开发适配方案

1.百分比布局：

使用百分比%定义 、相较于之前的静态布局和百分比方案，页面不会因为伸缩发生变形，自适应效果更佳。宽度用%，高度用px固定，通常使用max-width/min-width控制尺寸范围过大或者过小

优点：原理简单，不存在兼容性问题

缺点：如果屏幕尺度跨度太大，相对设计稿过大或者过小的屏幕不能正常显示，在大屏手机或横竖屏切换场景下可能会导致页面元素被拉伸变形，字体大小无法随屏幕大小发生变化。

2.flex布局：

就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。

建议：

1.如果是需要考虑兼容性问题PC端页面布局，我们还是传统布局。

2.如果是移动端或者不考虑兼容性问题的PC端页面布局，我们可以使用flex弹性布局。 

优点：主要用来代替浮动来完成页面的布局，是浏览器提倡的布局模型，而且不会脱标

缺点：如果屏幕尺度跨度太大，相对设计稿过大或者过小的屏幕不能正常显示，在大屏手机或横竖屏切换场景下可能会导致页面元素被拉伸变形，字体大小无法随屏幕大小发生变化。

 flex(弹性盒、伸缩盒) 是CSS中的一种布局手段，它主要用来代替浮动来完成页面的布局，是浏览器提倡的布局模型 flex可以使元素具有弹性，让元素可以跟随页面的大小的改变而改变，而且不会脱标 设置flex后就不区分行内元素和块元素了 弹性容器 要使用弹性盒，必须先将一个元素设置为弹性容器 我们通过 display 来设置弹性容器 display:flex 设置为块级弹性容器 display:inline-flex 设置为行内的弹性容器 弹性元素 弹性容器的子元素是弹性元素（弹性项） 弹性元素可以同时是弹性容器 flex-direction： 指定容器中弹性元素的排列方式 row 默认值，弹性元素在容器中水平排列（左向右）主轴 自左向右 row-reverse 弹性元素在容器中反向水平排列（右向左）主轴 自右向左 column 弹性元素纵向排列（自上向下） column-reverse 弹性元素方向纵向排列（自下向上） 主轴：弹性元素的排列方向称为主轴 侧轴：与主轴垂直方向的称为侧轴 弹性容器的样式： flex-wrap： 设置弹性元素是否在弹性容器中自动换行 nowrap 默认值，元素不会自动换行 wrap 元素沿着辅轴方向自动换行 wrap-reverse 元素沿着辅轴反方向换行 flex-flow: wrap 和 direction 的简写属性 justify-content ： 如何分配主轴上的空白空间（主轴上的元素如何排列） flex-start 元素沿着主轴起边排列 flex-end 元素沿着主轴终边排列 center 元素居中排列 space-around 空白分布到元素两侧 space-between 空白均匀分布到元素间 space-evenly 空白分布到元素的单侧 align-items： 元素在辅轴上如何对齐，元素间的关系 stretch 默认值，拉伸，将元素的长度设置为相同的值(要去掉子级的高度，不然没效果) flex-start 元素不会拉伸，沿着辅轴起边对齐 flex-end 沿着辅轴的终边对齐 center 居中对齐 baseline 基线对齐（按照内容对齐） align-self:用来控制某个元素在侧轴的对齐方式,用于给单个元素本身使用(值和align-items一样) align-content(单行的时候无效，要在多行的时候使用)： 辅轴空白空间的分布，属性值与以上相似 弹性元素的样式： flex-grow:指定弹性元素的伸展的系数 当父元素有多余空间的时，子元素如何伸展 父元素的剩余空间，子元素会按照比例进行分配 flex-shrink:指定弹性元素的收缩系数 当父元素中的空间不足以容纳所有的子元素时，如果对子元素进行收缩 0就是不变，其余则为比例 缩减系数的计算方式比较复杂 缩减多少是根据缩减系数和元素大小来计算 flex-basis：指定的是元素在主轴上的基础长度 如果主轴是横向的则该值指定的就是元素的宽度 如果主轴是纵向的则该值指定的是就是元素的高度 默认值是auto，表示参考元素自身的高度或宽度 如果传递了一个具体的数值，则以该值为准 flex： 可以设置弹性元素所有的三个样式 flex：伸展 收缩 基础; initial "flex: 0 1 auto" auto "flex: 1 1 auto" none "flex: 0 0 auto" 弹性元素没有弹性 order： 决定弹性元素的排列顺序 数值越小越靠前，默认值为0

3.rem布局 ：

rem是相对长度单位，rem是相对于根元素(html)的字体大小来计算，1rem=1font-size。

用rem代替px，根据屏幕宽度配合媒体查询或配合flexible.js设置html标签的font-size，在布局时使用 rem 单位布局，达到自适应的目的

优点：相较于百分比布局方案，页面不会因为伸缩发生变形，自适应效果更佳。且兼容性较好

缺点：需要配合媒体查询或flexible.js使用,比较麻烦

用rem配合媒体查询做移动适配：
  html {
        font-size: 37.5px;
      }
  div {
    width: (100/37.5rem;) 
    height: (100/37.5rem) ;
  }
  @media (width: 750px) {
    html {
       font-size: 75px;
    }
  }
  @media (width: 320px) {
    html {
      font-size: 32px;
    }
  }
  @media (xxx) {}
  一般html的font-size都设为视口宽度的十分之一

使用flexible.js配合rem做移动适配：
  flexible.js是一个js文件,核心原理是根据不同的视口宽度给网页中html根节点设置不同的font-size
  flexible.js会自动把html根标签的font-size设置为视口宽度的十分之一
  div {
      width: (100/37.5rem;) 
      height: (100/37.5rem) ;
  }

 flexible官网

4.vh/vw方案 ：

vw 表示的是视口的宽度（viewport width），vw这个单位永远相对于视口宽度进行计算
     100vw = 一个视口的宽度      1vw = 1%视口宽度
vh 表示的是视口的高度(viewport height)，也永远相对于视口高度进行计算
     100vh = 一个视口高度          1vh = 1%视口高度

用vw或vh代替px，可以直接达到自适应的目的

优点：相对于rem以根元素字体大小的倍数 定义元素大小，逻辑清晰简单，更简单

缺点：新的技术没有完全普及，同时存在一些兼容性问题。

           因为相对于视口， 失去了最大宽度/高度的限制，

使用vw做移动适配： div { width: (100/3.75vw;) height: (100/3.75vw) ; }

 5.响应式布局：

响应式布局就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的

平时我们的响应式尺寸划分：

超小屏幕（手机，小于 768px）：设置宽度为 100%
小屏幕（平板，大于等于 768px）：设置宽度为 750px
中等屏幕（桌面显示器，大于等于 992px）：宽度设置为 970px
大屏幕（大桌面显示器，大于等于 1200px）：宽度设置为 1170px

使用媒体查询： 语法：@media 逻辑符(一般忽略不写) 媒体类型(一般忽略不写) and(一般忽略不写) (媒体特性){} 逻辑符： and only not 媒体类型(如果写媒体类型后面必须加and)： all 所有设备 print 打印设备 screen 带屏幕的设备 speech 屏幕阅读器 可以使用,连接多个媒体类型，这样它们之间就是一个或的关系 可以在媒体类型前添加一个only，表示只有。（only的使用主要是为了兼容一些老版本浏览器） 媒体特性(必须用括号括起来写)： width 视口的宽度 height 视口的高度 min-width min-height 视口的最小宽高度（视口大于指定宽高度时生效） max-width max-height 视口的最大宽度（视口小于指定宽高度时生效） orientation 屏幕方向 值：portrait竖屏 landscape横屏 样式切换的分界点，我们称其为断点，也就是网页的样式会在这个点时发生变化 一般比较常用的断点 小于768 超小屏幕 max-width:768px 大于768 小屏幕 min-width:768px 大于992 中型屏幕 min-width:992px 大于1200 大屏幕 min-width:1200px 书写顺序： 同时可以写多个@media 如果用min-width就从小到大写 如果用max-width就从大到小写 一个@media中如果有多个媒体特性，中间用and连接 媒体查询外链式css引入： <link rel="stylesheet" href="./xxx.css" media="逻辑符 媒体类型 and (媒体特性)">

 Bootstrap框架：官网

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的变化，系统会自动分为最多12列 。底层也使用了媒体查询。

优点：

1.比较成熟，在大量的项目中充分的使用和测试

2.拥有完善的文档，使用起来更方便

3.有大量的组件样式，接受定制

缺点：定制较为繁琐，体积大

详情看官网

6.vw配合rem： 

优点：不用写媒体查询，同时解决了最大宽度/高度的限制

我们以 iPhone6为基准，屏幕宽度为375px，然后换算成 vw
那么1vw=3.75px
那么100px等于26.6666666vw      100 /3.75=26.6666666
html {
  font-size: 26.6666666vw;   这里在iPhone6中26.6666666vw等于font-size:100px
}
假如宽度高度都是100px
div {
  width: (100/100rem);   因为在iPhone6中100px等于26.6666666vw，所以100/100rem等于
  height: (100/100rem);  100/26.6666666vw
  background-color: aqua;
}

总结： 

各种布局都有自己的优缺点，一般情况不会只采取一种方案，一般都采用混合技术开发，选取其中一种技术为主，其他技术为辅

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/ydkf/3379.html