苏宁
1.body的设置
1.1 less + 媒体查询 + rem
max-width: 750px;可以省略
因为给了width:15rem;写死了
body {
min-width: 320px;
/*给了width:15rem;写死了*/
width: 15rem;
margin: 0 auto;
line-height: 1.5;
font-family: Arial,Helvetica;
background: #F2F2F2;
}
1.2 flexible.js + rem
max-width: 750px;不可以省略
因为flexible是根据当前屏幕调整分为10等份,所以需要限定
body {
min-width: 320px;
/* 因为flexible是根据当前屏幕调整分为10等份,所以需要限定 */
max-width: 750px;
/* flexible划分为10等份 */
width: 10rem;
margin: 0 auto;
line-height: 1.5;
font-family: Arial, Helvetica;
background: #f2f2f2;
}
2
.search-content {
display: flex;
position: fixed;
top: 0;
left: 50%;
transform: translateX(-50%);
/* 因为flexible是根据当前屏幕调整分为10等份,所以需要限定 */
width: 10rem;
height: 1.173333rem;
background-color: #FFC001;
}
需要加上:
/* 如果我们的屏幕超过了 750px
那么我们就按照 750设计稿来走 不会让我们页面超过750px */
@media screen and (min-width: 750px) {
html {
font-size: 75px!important;
}
}