目录
1.技术选型
方案：我们采取单独制作移动端页面方案
技术：布局采用rem适配布局（less+rem+媒体查询）
设计图：本设计图采用750px设计尺寸
2.设置公共common.less文件
1.新建common.css，设置好最常见的屏幕尺寸，利用媒体查询设置不同html字体大小，因为除了首页其他页面也需要
2.我们关系的尺寸有320px，360px，375px，384px，400px，414px，424px，480px，540px，720px，750px
3.份数定为15等份
4.因为我们PC端也可以打开苏宁移动端首页，我们默认html字体大小为50px，注意这句话写到最上面
/* 设置常见屏幕尺寸 修改里面html文字大小 */
// 因为我们PC端也可以打开苏宁移动端首页，我们默认html字体大小为50px
html {
font-size: 50px;
}
@num: 15;
@media screen and (min-width: 320px) {
html {
font-size: (320px / @num);
}
}
@media screen and (min-width: 360px) {
html {
font-size: (360px / @num);
}
}
// IPhone 6 7 9
@media screen and (min-width: 375px) {
html {
font-size: (375px / @num);
}
}
@media screen and (min-width: 384px) {
html {
font-size: (384px / @num);
}
}
@media screen and (min-width: 400px) {
html {
font-size: (400px / @num);
}
}
@media screen and (min-width: 414px) {
html {
font-size: (414px / @num);
}
}
@media screen and (min-width: 424px) {
html {
font-size: (424px / @num);
}
}
@media screen and (min-width: 480px) {
html {
font-size: (480px / @num);
}
}
@media screen and (min-width: 540px) {
html {
font-size: (540px / @num);
}
}
@media screen and (min-width: 720px) {
html {
font-size: (720px / @num);
}
}
@media screen and (min-width: 750px) {
html {
font-size: (750px / @num);
}
}3.新建index.less文件
1.新建index.less 这里面写首页样式
2.将刚刚设置好的common.less引入到index.less里面
// 首页样式文件
// 在index.less中导入common.less文件
@import "common";
// @import是导入的意思 可以把一个样式文件导入到另一个样式文件
// link是吧一个样式文件引到html页面里面3.生成index.css引入到index.html里面
4.遇到的问题
1.给input加padding时盒子被撑大，影响布局
这里input type属性值search是css3新增属性值，所有input盒子是css3盒子，padding不会撑大盒子
如果input tyep的属性值不是css新增属性如text，给padding还是会撑大盒子的
2.使用适配方案2制作苏宁移动端首页
1.技术选型
方案;我们采取单独制作移动端页面方案
技术：布局采取rem适配布局2（flexible.js+rem）
设计图：本设计图采用750px设计尺寸
2.搭建相关文件夹结构
3.设置视口标签及js文件
视口标签及css引入
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimun-scale=1.0,user-scalable=no"
/>
<!-- 引入初始化 -->
<link rel="stylesheet" href="css/normalize.css" />
<!-- 引入主页样式 -->
<link rel="stylesheet" href="css/index.css" />js文件引入
<!-- 引入我们flexible.js文件 -->
<script src="js/index.js"></script>设置body样式
body {
min-width: 320px;
width: 15rem;
margin: 0 auto;
line-height: 1.5;
font-family: Arial, Helvetica, sans-serif;
background-color: #f2f2f2;
}4.VSCode px转换rem插件cssrem
安装方法：扩展里搜索cssrem（px to rem ）安装即可
设置html字体大小基准值
这个插件默认的html文字大小cssroot是16px
1.打开设置快捷键ctrl+逗号
2.搜索cssroot就可以更改字体大小了（默认16px）
也可以在扩展--->cssrem插件处点设置进入设置
快捷键alt+z自动在rem和px之间转换
原理：该插件有默认值16px所以可以转换rem值，但此处案例以750px为设计稿，分为10份，及font-size为75px，所以将插件默认值改为75px，因采用flexible.js字体大小随屏幕尺寸变化rem也随之变化，从而实现伸缩布局。
5.遇见的问题
/* 如果我们的屏幕超过了750px 那么我们就按照750设计稿来走 不会让我们的页面超过750px */
@media screen and (min-width: 750px) {
html {
font-size: 75px !important;
}
}
body {
min-width: 320px;
max-width: 750px;
width: 10rem;
margin: 0 auto;
line-height: 1.5;
font-family: Arial, Helvetica, sans-serif;
background-color: #f2f2f2;
}
/* 这个插件默认的html文字大小cssroot 16px */
img {
width: 1.12rem;
height: 1.093333rem;
}
a {
text-decoration: none;
font-size: 0.333333rem;
}
.search-content {
display: flex;
position: fixed;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 10rem;
height: 1.173333rem;
background-color: #ffc001;
} <body>
<div class="search-content">
<a href="#" class="classify"></a>
<div class="search">
<!-- input search为css3盒子 border-box padding不会撑大盒子 -->
<input type="search" name="" id="" placeholder="rem适配方案2" />
</div>
<a href="#" class="login">登录</a>
</div>
</body>flexible.js通过js来改变html文字大小，可以实现每一次宽度变化都可以自适应的功能，但在移动端设计中，设计稿的大小为750px，将body最大宽度设为750px后，html的字体大小并没有改变仍是当前屏幕的1/10，所以当屏幕大于750px是html字体大小会进一步变大，这时虽然body限制了大小，但里面的元素却没有，导致元素过大挤出盒子，虽然也可以通过给每个盒子最大宽度来解决，但太过繁琐。
这里可以之间用媒体查询来将大于750px的字体大小固定在和750px一个大小，这样就不会有子元素撑大父盒子了。