- 按照设计稿与设备宽度的比例,动态计算并设置html根标签的 font-size 大小;(媒体查询)
- CSS中,设计稿元素的宽、高、相对位置等取值,按照同等比例换算为 rem 单位的值;
rem + 媒体查询 + less技术
【案例:移动端首页】
1. 设计稿常见的尺寸宽度
2. 动态设置 html 标签的 font-size 大小
3. 设置视口标签以及引入初始化样式
<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="css/normalize.css">
4. 设置公共的common.less文件
5. 新建 index.less 文件
6. body样式
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0 , maximum-scale=1.0 minimum-scale=1.0, user-scalable=0">
<title>Document</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="search-content">
<a href="#" class="classify"></a>
<div class="search">
<form action="">
<input type="text" placeholder="你值得拥有">
</form>
</div>
<a href="#" class="login">登录</a>
</div>
<div class="banner">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/product-images/xiaomicivibfbefe/section1-1.png" alt="">
</div>
<div class="ad">
<a href="#">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/product-images/xiaomicivibfbefe/section3-1.png" alt="">
</a>
<a href="#">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/product-images/xiaomicivibfbefe/section3-1.png" alt="">
</a>
<a href="#">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/product-images/xiaomicivibfbefe/section3-1.png" alt="">
</a>
</div>
<nav>
<a href="#">
<img src="upload/nav1.png" alt="">
<span>爆款手机</span>
</a>
<a href="#">
<img src="upload/nav1.png" alt="">
<span>爆款手机</span>
</a>
<a href="#">
<img src="upload/nav1.png" alt="">
<span>爆款手机</span>
</a>
<a href="#">
<img src="upload/nav1.png" alt="">
<span>爆款手机</span>
</a>
<a href="#">
<img src="upload/nav1.png" alt="">
<span>爆款手机</span>
</a>
<a href="#">
<img src="upload/nav1.png" alt="">
<span>爆款手机</span>
</a>
<a href="#">
<img src="upload/nav1.png" alt="">
<span>爆款手机</span>
</a>
<a href="#">
<img src="upload/nav1.png" alt="">
<span>爆款手机</span>
</a>
<a href="#">
<img src="upload/nav1.png" alt="">
<span>爆款手机</span>
</a>
<a href="#">
<img src="upload/nav1.png" alt="">
<span>爆款手机</span>
</a>
</nav>
</body>
</html>
common.less
a {
text-decoration: none;
}
// 写到上面
html {
font-size: 50px;
}
// 划分的份数
@no: 15;
// 320
@media screen and (min-width: 320px) {
html {
font-size: (320px / @no);
}
}
// 360
@media screen and (min-width: 360px) {
html {
font-size: (360px / @no);
}
}
// 375
@media screen and (min-width: 375px) {
html {
font-size: (375px / @no);
}
}
// 384
@media screen and (min-width: 384px) {
html {
font-size: (384px / @no);
}
}
// 400
@media screen and (min-width: 400px) {
html {
font-size: (400px / @no);
}
}
// 414
@media screen and (min-width: 414px) {
html {
font-size: (414px / @no);
}
}
// 424
@media screen and (min-width: 424px) {
html {
font-size: (424px / @no);
}
}
// 480
@media screen and (min-width: 480px) {
html {
font-size: (480px / @no);
}
}
// 540
@media screen and (min-width: 540px) {
html {
font-size: (540px / @no);
}
}
// 720
@media screen and (min-width: 720px) {
html {
font-size: (720px / @no);
}
}
// 750
@media screen and (min-width: 750px) {
html {
font-size: (750px / @no);
}
}
index.css
@import "common.less";
body{
min-width: 320px;
width: 15rem;
margin: 0 auto;
line-height: 1.5;
background: #F2F2F2;
}
a{
text-decoration: none;
}
@baseFont:50;
.search-content{
display: flex;
position: fixed;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 15rem;
height: (88rem / @baseFont);
background-color: #FFC001;
.classify{
width: (44rem / @baseFont);
height: (70rem / @baseFont);
margin:(11rem / @baseFont) (25rem / @baseFont) (7rem / @baseFont) (24rem / @baseFont);
background: url(../images/classify.png) no-repeat;
background-size:(44rem / @baseFont) (70rem / @baseFont) ;
}
.search {
flex:1;
input{
width: (520rem / @baseFont);
height: (66rem / @baseFont);
border-radius: (33rem / @baseFont);
background-color: FFF2CC;
border: 0;
margin-top: (12rem / @baseFont);
outline: none;
color: #757575;
font-size: (25rem / @baseFont);
padding-left: (54rem / @baseFont);
}
}
.login {
width: (75rem / @baseFont);
height: (70rem / @baseFont);
margin: (10rem / @baseFont);
font-size: (25rem / @baseFont);
color: #fff;
text-align: center;
line-height: (70rem / @baseFont);
}
}
.banner {
width: (750rem / @baseFont);
height:(368rem / @baseFont);
img {
width: 100%;
height: 100%;
}
}
.ad {
display: flex;
a{
flex: 1;
img{
width: 100%;
height: 100%;
}
}
}
nav{
width: (750rem / @baseFont);
a{
float: left;
width: (150rem / @baseFont);
height: (140rem / @baseFont);
text-align: center;
img {
display: block;
width: (82rem / @baseFont);
height: (82rem / @baseFont);
margin:(10rem / @baseFont) auto 0;
}
span{
display: block;
font-size: (25rem / @baseFont);
color:#333 ;
}
}
}