/* 设置常见屏幕尺寸 修改里面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一个大小，这样就不会有子元素撑大父盒子了。

标签：移动,750px,苏宁,width,html,首页,rem,font,size
来源： https://blog.csdn.net/weixin_49455047/article/details/121890913