1、less+媒体查询+rem:(根据屏幕宽度/15算得默认字体大小)

如：

公共的common.less中写入：

注意：可使用vscode的EasyLess插件将less自动编译为css文件； //先定义浏览器在750px宽度下，默认字体大小；写在最上面实现初始化字体大小 html{ font-size:50px; }

@no：15; //可调节 @madia screen and (min-width:320px){ html{
font-size:320px / @no; } }

@madia screen and (min-width:750px){ html{ font-size:750px / @no; } } // ...(多个媒体查询定义屏幕适配文字大小：主要有320px、360px、375px、384px、400px、414px、424px、480px、540px、720px、750px)；

在index.less内倒入common.less：

@import ./common.less

//页面元素rem计算公式：页面元素px/html字体大小 50（默认750px宽度下）

@baseFont：50 (设置750px宽度下的相对字体大小;可调节);

.search-content{

width:15rem; height:88rem / 50; .classify{ margin-left:11rem/@baseFont //(less运算与第一个变量单位保持一致；less运算时运算符左右要有空格隔开)； } }

2、flexible.js+rem:

注意：flexible.js与normalize.css文件相区别； 淘宝的flexible本质上就是一段js代码。帮助我们做了一件事：当屏幕的大小发生改变的时候，去改变HTML根标签中的字体大小。

在淘宝flexible的加持之下，HTML的根标签的字体大小： font-size = 屏幕的宽度 / 10；让html根标签的字体大小设置为屏幕宽度的十分之一。

注意：1、使用flexible.js配合vscode下的px转rem插件 cssrem 使用（自动将px转为rem） 注意要将cssrem插件 内的默认字体大小css.rootFontSize改为75；

2、使用媒体查询适配默认浏览器font-size大小： //如果屏幕超过了750px，那么我们就按照750设计稿来走，不会让我们页面超过750px @madia screen and (min-width:750px){ html{ font-size:75px !important; } }

3、响应式布局以及Bootstrap栅格系统

设备划分（媒体查询）： 超小屏幕（手机） 宽度<768px :设置宽度为100% 小屏设备（平板） 宽度>=768px ~ <992px :设置宽度为750px 中等屏幕（桌面显示器） 宽度>=992px ~ 1200px :设置宽度为970px 屏幕设备（大桌面显示器）宽度 >=1200px ：设置宽度为1170px

移动端布局技术选型：

流式布局（百分比布局）、flex弹性布局（推荐）、rem适配布局（推荐）、响应式布局、vw适配屏幕； 布局方案建议：选取一种主要技术，其他技术作为辅助开发，这种混合技术开发适配方案

rpx小程序适配：

rpx（responsive pixel）：可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素 注：可以选用iphone6的模拟器作为相对屏幕参考实现屏幕适配；