rem适配方案
rem适配方案一
一、原理
1、让一些不能等比自适应的元素，达到当设备尺寸发生改变时等比例适配当前设备
2、使用媒体查询根据不同设备比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化，元素尺寸也发生变化，从而达到等比例缩放的适配
二、技术选取
rem+媒体查询+less技术
三、设计稿
设计稿一般由网工提供，设计稿现在基本以750px为准，根据设计稿要求进行项目开发。
四、元素大小取值方法
注：拿到设计稿时，一般将屏幕宽度分15等份 比如750px 750px / 15 = 50px
1、页面元素的rem值 = 页面元素值（px）/ （屏幕宽度 / 划分的份数）
2、屏幕宽度 / 划分的份数 就是 html font-size 的大小
3、或 页面元素的rem值 = 页面元素值（px）/ html font-size 字体大小
苏宁网移动端首页（部分）
一、设置公共common.less文件
1、新建common.less 设置好常见的屏幕尺寸，利用媒体查询设置不同的html字体大小，因为除了首页其他页面也需要
2、我们关心的尺寸有320px、360px、375px、384px、414px、480px、540px、720px、750px
3、划分的份数定位15份
4、因为pc端也可以打开苏宁移动端，所以默认html字体大小为50px，注意-这句话要写在最上面
二、新建index.less文件
1、将设置好的common.less文件引入到 common.less里面
①语法：@import “common”；
②@import 是导入的意思 可以把一个样式文件导入到另一个样式文件里面
③link 是把一个 样式文件引入到 html 页面里面
2、将生成index.css 引入到 index.html里面
注：如果修改了common.less文件 但是样式没有修改 可以尝试重新导入文件
三、body样式
1、在index.less中写入样式
2、手动添加一个宽度 width：15rem； 750 / 50 = 15rem
3、代码展示：
body {
min-width: 320px;
// 750px / 50 = 15rem
width: 15rem;
margin: 0 auto;
line-height: 1.5;
font-family: Arial, Helvetica, sans-serif;
background-color: #f2f2f2;
}四、头部serch-content模块
1、外部主体部分
需要固定定位
设置变量@baseFont : 50;
高度：height: (88rem / @baseFont);
css：
@baseFont : 50;
.serch-content {
position: fixed;
top: 0;
left: 50%;
transform: translate(-50%);
width: 15rem;
height: (88rem / @baseFont);
background-color: #ffc001;
}
2、内部分为三个部分 classify search login
使用flex布局 左右两个固定宽高 中间自适应
html：
css：
.classify {
width: (44rem / @baseFont);
height: (70rem / @baseFont);
margin: (11rem / @baseFont) (25rem / @baseFont) (7rem / @baseFont) (24rem / @baseFont);
background: url(images/classify.png) no-repeat;
background-size: (44rem / @baseFont) (70rem / @baseFont);
}
.search {
flex: 1;
input {
outline: none;
height: (66rem / @baseFont);
width: 100%;
border-radius: (33rem / @baseFont);
background-color: #fff2cc;
margin-top: (12rem / @baseFont);
border: none;
font-size: (25rem / @baseFont);
padding-left: (55rem / @baseFont);
color: #757575;
}
}
.login {
width: (75rem / @baseFont);
height: (70rem / @baseFont);
margin: (10rem / @baseFont);
font-size: (25rem / @baseFont);
color: #fff;
text-align: center;
line-height: (70rem / @baseFont);
}五、banner 部分
盒子固定宽高 图片自适应
html：
css：
.banner {
width: (750rem / @baseFont);
height: (368rem / @baseFont);
img {
width: 100%;
height: 100%;
}
}六、广告部分
分为三个部分 三张可以点击的图片
html：
css：
.ad {
display: flex;
a {
flex: 1;
img {
width: 100%;
}
}
}七、整体效果
rem适配方案二（flexible.js+rem）
一、解析
1、不需要写不同屏幕的媒体查询，因为flexible.js里面已经做了处理
2、原理：把当前设备划分为10等份，不同设备下比例还是一致的，只需确定当前设备的html文字大小
如：当前设计稿是750px，只需把HTML文字大小设置为75px （750px / 10）即可
里面页面元素rem值：页面元素的px值 / 75 剩余的，让flexble.js处理
二、flexible.js文件下载
1、下载网址：https://github.com/amfe/lib-flexible
2、进入网址点击code打开 并点击download下载
3、下载完成后，将文件减压，将index.js文件引入即可使用
苏宁网移动端首页（以一为基础进行修改）
一、文件的引入
1、将index.js引入到index.html中
2、样式直接写在index.css中
二、修改body的样式
1、修改字体大小-因为当前页面划分成了10等份，所以字体大小为75px
2、给页面加一个最大宽度 max-width: 750px; 因为当前参考页面为html
三、下载cssrem插件
1、点开vscode拓展区 输入cssrem并下载 下载完成重新加载
2、点开设置 输入cssrem.root font-size 根据设计稿修改根字体大小
如：750px的页面的根字体大小就是 75px
快捷键：alt+z px与rem的转换
四、补充
设计稿的最大屏幕是750px，但是我们的flexible.js是和屏幕自适应的
所以我们需要用媒体查询设置超过750px后的页面字体大小
@media screen and (min-width:750px) {
html {
font-size: 75px !important;
}
}注：因为flexible.js中有超过750px的字体大小且权重比我们输入的要高，所以我们需要提权