移动端步骤

关键步骤

• 设置viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">

• 引入计算比例js,计算不同屏幕尺寸下1rem的大小

  • 换算比例时的基准值以设计稿为准 device-width/基准值

  <script src="remscale.js"></script>

• 从设计稿量取px值转换成rem单位进行布局

  100px* 100px  
  ||
  1rem 1rem

注：

//最外层的盒子居中处理
.wrap{
    max-width:6.4rem;  //以设计稿为准
    margin:0 auto;
    height:500px;
    background-color: yellowgreen;
}
      

vw适配

vw单位介绍

vw 即Viewport's width的简写，是css3规范中的视口单位，

• 相对单位

• 相对于视口大小

  • 视口宽度 = 100vw ----> 1vw = 视口宽度1%

相对于视口的宽度，视口被均分为100单位的vw。

750px  =  100vw 
7.5px =  1vw

相关阅读：
除此之外还有vh单位 即Viewport's height，相对于视口的高度，视口高度被均分为100单位的vh。
vmax相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax。
vmin相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin。

1vw 等于视窗宽度的1%，在页面布局中将px值换算成vw,

当视口宽度发生变化，则元素大小随即发生变化，实现页面适配

• 提示：可以借助插件自动计算

• 缺点：转换后的长度单位不够直观修改维护困难

步骤

• 设置一下基准值

• 从设计稿量取px值直接布局

• 使用插件直接将px转换成vw

使用rem+vw单位实现适配

沿用rem布局方案，所有的布局元素及属性都用rem做单位,用vw单位设置html的font-size,这样就不再需要JS来动态计算根元素字体大小。

换算过程:
假设在750px的设计稿下，可以理解为100vw,对应750px
沿用rem布局方案中的html{font-size:100px}换算为vw那么 1vw = 7.5px
100px就是13.333333vw了

然后我们就可以在布局写rem单位了, 由于倍率是100,除以100,直接小数点向左移动2位,1rem是100px,那么10px就是0.1rem，不需要借助插件转换计算也可以直观的进行布局了。

15.4移动端项目

项目介绍

项目名称：

小U商城

项目描述

小U商城是面向移动端的专业综合网上购物商城，我们要完成 首页、列表页、详情页等静态页面的制作

技术选型

布局采取rem适配布局

设计图尺寸

本设计图采用 750px 设计尺寸

开发工具

• VScode

• 蓝湖