移动端项目开发感悟

移动端项目开发感悟

一、移动端项目的布局

PC端我们采用版心与通栏的方法来应对不同大小屏幕。但是在移动端上，由于移动端屏幕宽度本身就小，所以不再适合设置通过通栏设置最小固定宽度。

• 流式布局：

  • 使用百分比定义宽度，高度大都是用px来固定，可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整，尽可能的适应各种分辨率。

    页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变。这就导致如果屏幕太大或者太小都会导致元素无法正常显示。

  • 流式布局适合设计稿上字号较大的情况，因为这样页面拉宽以后看起来也不难受。

  • 例如百度新闻：当屏幕变宽时，字号未变，图片适应宽度改变。（此处图片使用了裁切，高度固定，也可不固定）

• 自适应布局：

  • 使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式。主要是选取主流设备为断点针对性写额外的样式进行适配。

    分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围，所以它需要开发多套界面来适应不同的终端。

  • 如手机端一列，平板端两列。

• 响应式布局：

  • 媒体查询+流式布局+特殊单位(vw、rem等)。使用@media媒体查询和网格系统配合相对布局单位进行布局，就是综合响应式、流动、特殊单位等上述技术通过 CSS 给单一网页不同设备返回不同样式的技术统称。
  • 例如腾讯首页：所有元素单位用vw，当移动端屏幕宽度改变，内容等比例变化

• 总结：面对不同的移动端设备屏幕，

  • 流式布局是水平拉伸页面，适合页面内容、字号偏大的网站。
  • 自适应布局相当于做多个页面来应对不同的屏幕宽度。（其实也不算做多个，只是用媒体查询。）
  • 响应式布局是做一个页面，兼容多个屏幕，响应式布局同时应用了流式布局、自适应布局、特殊单位。

• 最完美的移动端布局应该是，0_{300左右为流式；300}768左右为响应式；设置版心最大宽度为768px，超出768px是最大布局，不再改变。【300和768只是例举，实际根据具体情况，又如250和1024】具体操作为：

  @media screen and (max-width:300px){
      html{
          font-size:3px;
      }
  }
  @media screen and (min-width:768px){
      html{
          font-size:7.68px;
      }
  }
  

二、响应式布局具体操作

一）图片自适应

1、大小自适应

• 宽度高度设置max-xxx，或者使用vw、rem单位。
• 精灵图的话，只需要设置div的宽高为rem、精灵图的大小通过background-size也用rem设置。
• 此外，必须同时设置宽高，意味占据这个图片位置的图片大小，这是因为后端传上来的图片比例不一定和我们预先设计的意义，所以就必须同时设置宽高并配合Object-fit进行裁剪。。
• 使用Object-fit进行裁剪

2、分辨率自适应

小屏幕设备不需要高清图或大图，用小图代替，就可以减少网络带宽了。

• 通过img元素的srcset属性（根据浏览器宽、高、像素密度来加载相应图片资源）

二）单位

所有元素用rem单位或者vw单位。

1rem是html的font-size值，通过js获取屏幕宽度然后动态设置html的font-size就可以根据屏幕宽度动态改变元素大小。

1vw单位是当前屏幕宽度的1%

【esp】rem比vw更常用，因为用rem可以动态人为控制1rem的大小。而vw是和屏幕相关的，无法人为控制。

三）其他

其他部分都是和流式布局以及自适应布局一样了，保证页面宽度变化时自动适应不乱即可。

三、大厂布局参考

一）腾讯首页、网易新闻布局

1、特征

• 有max-width:768px;margin:0 auto的版心，超出768px的设备，如iPad Pro，版心将居中。
• 当视口大小在[x,768]，所有内容单位都是相对单位rem或vw，在此范围内页面将进行响应式变化。x，网易为250px，腾讯为300px。
• 当视口大小在[0,x]，所有内容单位为px。此时页面缩小，字号等不再发生变化，页面慢慢变形。

2、如何实现

所有单位用rem，假设要制作的标准页面为375px。

首先，在style最顶部设置1rem = 1vw[375px时] (= 3.75px)，此时，比如设计稿上16px的字号，就设置为16px / 3.75px = 4.266rem。

其次，如响应式最小视口宽度x = 300px，那么此时字号应该为12.8px，那么久设置媒体查询当页面宽度<300时，设置1rem = 3px （=1vw[300px时]），那么4.266rem就可以一直显示未12.8px。

3、优点与使用情况

• x是一个阈值，是屏幕响应式变化的最小宽。目前我暂时认为这个阈值应该取决于设计稿的最小文本字号。由于部分浏览器会显示内容最小字号，如12px。换算设计稿宽度为多少时，页面最小字号为12px，此时的宽度就是x。
• 这么做是为了适配一些小屏幕的手机。假如全部使用vw，那么当屏幕小到一定程度，字体大小就会非常小，同时有限时最小为12px。那么两者相互影响下，就会导致所有文本大小都一样，同时页面布局也会变乱。

二）百度新闻

百度是使用的流式布局，字号用的固定单位px。但是它的字号多为18px左右，最小字号13px且很少。

由于字号偏大，所以用流式布局没问题。因为即使拉伸到了768px，仍然看着很和谐，字体不至于和屏幕比起来太小。

新人浅见，敬请指摘