使用 flexible.js + rem 制作苏宁移动端首页
一、技术选型
二、搭建相关文件夹
三、设置视口标签以及引入初始化样式文件和js文件
四、body 样式
五、rem 适配方案二 body样式修改
index.css
body {
min-width: 320px;
max-width: 750px;
/* flexible 给我们划分了 10 等份 */
width: 10rem;
margin: 0 auto;
line-height: 1.5;
font-family: Arial, Helvetica;
background: #f2f2f2;
}
不再需要common.js来做屏幕适配了
六、VScode px转换rem 插件 cssrem
6.1 安装 cssrem
6.2 设置html 字体大小基准值
-
ctrl + 逗号打开设置
-
找到扩展中的 cssrem 插件 进入
Root Font Size修改
-
修改完成后 重启 VScode
七、search-content布局以及修改 flexble.js 默认html字体大小
index.html
<body>
<!-- 顶部部分 -->
<div class="search-content"></div>
</body>
index.css
.search-content {
position: fixed;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 10rem;
height: 1.173333rem;
background-color: #FFC001;
}
我们发现，由于 flexble.js中的影响，页面的效果其实是根据我们当前屏幕的大小来判定的，并不是我们想要的效果，所以我们需要修改 flexble.js 默认html字体大小
如果我们的屏幕超过了 750px 那么我们就按照 750设计稿来执行
@media screen and (min-width: 750px) {
html {
font-size: 75px;
}
}
我们发现页面还是没有达到我们想要的效果，原因是权重不够
为 html 的字体大小设置 !important
@media screen and (min-width: 750px) {
html {
font-size: 75px!important;
}
}
.search-content {
position: fixed;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 10rem;
height: 1.173333rem;
background-color: #FFC001;
}
八、search-content 内容制作
index.html
<body>
<div class="search-content">
<a href="#" class="classify"></a>
<div class="search">
<form action="">
<input type="search" value="新人专享礼">
</form>
</div>
<a href="#" class="login">登录</a>
</div>
</body>
index.css
a {
text-decoration: none;
font-size: .333333rem;
}
.classify {
width: .586667rem;
height: .933333rem;
margin: .146667rem .333333rem .133333rem;
background: url(../images/classify.png) no-repeat;
background-size: .586667rem .933333rem;
}
.search {
flex: 1;
}
.search input {
outline: none;
border: 0;
width: 100%;
height: .88rem;
font-size: .333333rem;
background-color: #FFF2CC;
margin-top: .133333rem;
border-radius: .44rem;
color: #757575;
padding-left: .733333rem;
}
.login {
width: 1rem;
height: .933333rem;
margin: .133333rem;
color: #fff;
text-align: center;
line-height: .933333rem;
font-size: .333333rem;
}
