标签：移动 750px 苏宁 width html 首页 rem font size
目录
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一个大小，这样就不会有子元素撑大父盒子了。
标签：移动,750px,苏宁,width,html,首页,rem,font,size 来源： https://blog.csdn.net/weixin_49455047/article/details/121890913
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。