本文主要是介绍东北狼仙：苏宁手机端样式rem+flexible.js，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
手机端研究了好几天做了手机端，还好基础的程序员生活不是很难，用心做几个项目撸出来就好了，最近学些rem布局挺不错的针对手机端使用比较不错，整个页面都可以自适应解决了字体图片等等的整体变大变小不会让页面变形，看着舒服顺眼。哈尔滨品牌策划
VSCODE 需要安装cssred
index.html 页面代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/index.css">
<SCRIPT src="js/flexible.js"></SCRIPT>
<title>苏宁手机端</title>
</head>
<body>
<div class="search-content">
<a href="" class="classify"></a>
<div class="search">
<form action=""><input type="search " value="ahhahhhahahha"></form>
</div>
<a href="" class="login">登录</a>
</div>
<!-- banner -->
<div class="banner"><img src="../htm5/upload/banner.gif" alt=""></div>
<!-- ad -->
<div class="ad">
<a href=""><img src="../htm5/upload/ad1.gif" alt=""></a>
<a href=""><img src="../htm5/upload/ad2.gif" alt=""></a>
<a href=""><img src="../htm5/upload/ad3.gif" alt=""></a>
</div>
<!-- nav -->
<div class="nav">
<a href=""><img src="../htm5/upload/nav1.png" alt="">
<span>手机浏览</span></a>
<a href=""><img src="../htm5/upload/nav1.png" alt="">
<span>手机浏览</span></a>
<a href=""><img src="../htm5/upload/nav1.png" alt="">
<span>手机浏览</span></a>
<a href=""><img src="../htm5/upload/nav1.png" alt="">
<span>手机浏览</span></a>
<a href=""><img src="../htm5/upload/nav1.png" alt="">
<span>手机浏览</span></a>
<a href=""><img src="../htm5/upload/nav1.png" alt="">
<span>手机浏览</span></a>
<a href=""><img src="../htm5/upload/nav1.png" alt="">
<span>手机浏览</span></a>
<a href=""><img src="../htm5/upload/nav1.png" alt="">
<span>手机浏览</span></a>
<a href=""><img src="../htm5/upload/nav1.png" alt="">
<span>手机浏览</span></a>
<a href=""><img src="../htm5/upload/nav1.png" alt="">
<span>手机浏览</span></a>
</div></body>
</html>
CSS样式
body {
min-width: 320px;
max-width: 750px;
width: 10rem;
margin: 0 auto;
line-height: 1.5;
font-family: Arial, Helvetica, sans-serif;
background: #f2f2f2;
}
a {
text-emphasis: none;
font-size: .333333rem;
}
@media screen and (min-width:750px) {
html {
font-size: 75px !important;
}
}
.search-content {
display: flex;
position: fixed;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 10rem;
height: 1.173333rem;
background-color: #ffc001;
}
.classify {
width: .586667rem;
height: .933333rem;
background-color: pink;
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: 0.88rem;
font-size: .333333rem;
margin-top: .133333rem;
border-radius: .44rem;
color: #757575;
padding-left: .1733333rem;
}
.login {
width: 1rem;
height: .933333rem;
margin: .133333rem;
color: #f2f2f2;
text-align: center;
line-height: .933333rem;
font-size: .333333rem;
}
.banner {
width: 10rem;
height: 4.906667rem;
}
.banner img {
width: 100%;
height: 100%;
}
.ad {
display: flex;
width: 10rem;
}
.ad a {
flex: 1;
}
.ad img {
width: 100%;
height: 100%;
}
.nav {
width: 10rem;
}
.nav a {
float: left;
width: 2rem;
height: 1.866667rem;
text-align: center;
}
.nav a img {
display: block;
width: 1.066667rem;
height: 1.066667rem;
margin: .133333rem auto 0;
}
.nav a span {
font-size: .333333rem;
color: #333;
}
这篇关于东北狼仙：苏宁手机端样式rem+flexible.js的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
