东莞网站制作公成人职业培训机构
目录
1. rem基础
2.媒体查询
2.1 语法规范
2.2 媒体查询+rem
2.3 引入资源（理解）
3. less基础
3.1 维护css的弊端
3.2 less介绍
3.3 less变量
3.4 less编译
3.5 less嵌套
3.6 less运算
4. rem适配方案
4.1 rem实际开发
4.2 技术使用
4.3 rem+媒体查询+less
5. 苏宁网首页案例制作
6. rem适配方案2
1. rem基础
2.媒体查询
2.1 语法规范
/* 媒体查询一般按照从大到小或从小到大的顺序 *//* 样式具有层叠性 *//* screen and 不能省略 *//* 数字后面必须跟单位,and后面要跟空格 */@media screen and (max-width:539px) {body {background-color: blue;}}@media screen and (min-width:540px) {body {background-color: green;}}@media screen and (min-width:970px) {body {background-color: red;}}2.2 媒体查询+rem
@media screen and (min-width:320px) {html {font-size: 50px;}}@media screen and (min-width:640px) {html {font-size: 100px;}}.top {height: 1rem;font-size: .5rem;background-color: green;color: #fff;text-align: center;line-height: 1rem;}2.3 引入资源（理解）
<!-- 媒体查询最好从小到大写 --><!-- 引入资源就是针对不同屏幕尺寸,调用不同的css文件 --><link rel="stylesheet" href="style320.css" media="screen and (min-width:320px)"><link rel="stylesheet" href="style640.css" media="screen and (min-width:640px)">3. less基础
3.1 维护css的弊端
3.2 less介绍
3.3 less变量
3.4 less编译
3.5 less嵌套
3.6 less运算
除法运算要加小括号才能算
4. rem适配方案
4.1 rem实际开发
4.2 技术使用
4.3 rem+媒体查询+less
5. 苏宁网首页案例制作
将样式文件导入样式文件中
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" /><meta http-equiv="X-UA-Compatible" content="ie=edge"><link rel="stylesheet" href="css/normalize.css"><link rel="stylesheet" href="css/index.css"><title>Document</title>
</head><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><!-- banner 部分 --><div class="banner"><img src="upload/banner.gif" alt=""></div><!-- 广告部分 --><div class="ad"><a href="#"><img src="upload/ad1.gif" alt=""></a><a href="#"><img src="upload/ad2.gif" alt=""></a><a href="#"><img src="upload/ad3.gif" alt=""></a></div><!-- nav --><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
// 设置常见屏幕尺寸，修改里面的html文字大小
a {text-decoration: none;
}html {// pc端也可以打开font-size: 50px;
}// 本次定义划分的份数为15
@no: 15;
@media screen and (min-width: 320px) {html {font-size: (320px / @no);}
}@media screen and (min-width:360px) {html {font-size: (360px / @no);}
}// 375 iphone 678
@media screen and (min-width:375px) {html {font-size: (375px / @no);}
}@media screen and (min-width:384px) {html {font-size: (384px / @no);}
}@media screen and (min-width:400px) {html {font-size: (400px / @no);}
}@media screen and (min-width:414px) {html {font-size: (375px / @no);}
}@media screen and (min-width:424px) {html {font-size: (424px / @no);}
}@media screen and (min-width:480px) {html {font-size: (480x / @no);}
}@media screen and (min-width:540px) {html {font-size: (540px / @no);}
}@media screen and (min-width:720px) {html {font-size: (720px / @no);}
}@media screen and (min-width:750px) {html {font-size: (750px / @no);}
}index.less
// 将样式文件导入样式文件中
@import "common";body {min-width: 320px;width: 15rem;margin: 0 auto;line-height: 1.5;font-family: Arial, Helvetica, sans-serif;background: #f2f2f2;
}// search-content
@baseFont: 50rem;.search-content {display: flex;position: fixed;top: 0;left: 50%;transform: translate(-50%);width: 15rem;height: (88rem / @baseFont);background-color: #ffcc01;.classify {width: (44 / @baseFont);height: (70 / @baseFont);background: url(../images/classify.png);background-size: (44 / @baseFont) (70 / @baseFont);margin: (11 / @baseFont) (25 / @baseFont) (7 / @baseFont) (24 / @baseFont);}.search {flex: 1;input {// 去掉输入时的边框效果outline: none;width: 100%;border: 0;height: (66 / @baseFont);border-radius: (33 / @baseFont);background-color: #fff2cc;margin-top: (12 / @baseFont);font-size: (25 / @baseFont);color: #757575;padding-left: (55 / @baseFont);}}.login {width: (75 / @baseFont);height: (70 / @baseFont);margin: (10 / @baseFont);font-size: (25 / @baseFont);text-align: center;color: #fff;line-height: (70 / @baseFont);}
}// banner
.banner {width: (750 / @baseFont);height: (368 / @baseFont);img {width: 100%;height: 100%;}
}// ad
.ad {display: flex;a {flex: 1;img {width: 100%;}}
}// nav
nav {width: (750 / @baseFont);a {float: left;width: (150 / @baseFont);height: (140 / @baseFont);text-align: center;img {display: block;width: (82 / @baseFont);height: (82 / @baseFont);margin: (10 / @baseFont) auto 0;}span {display: block;font-size: (25 / @baseFont);color: #333;margin-top: 5px;}}
}6. rem适配方案2
flexible.js + rem
插件 cssrem 可以将px转换成rem；
这个插件默认的html文字大小 cssroot 16px；
在设置中搜索设置 cssroot ，将工作区的font size 设置为想要的。
index.html
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><link rel="stylesheet" href="css/normalize.css"><link rel="stylesheet" href="css/index.css"><!-- 引入我们的flexible.js 文件 --><script src="js/flexible.js"></script><title>Document</title>
</head><body><div class="search-content"><a href="#" class="classify"></a><div class="search"><form action=""><input type="search" value="rem适配方案2很开心哦"></form></div><a href="#" class="login">登录</a></div>
</body></html>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;}a {text-decoration: none;font-size: .333333rem;
}/* 这个插件默认的html文字大小 cssroot 16px *//*
img {width: 5.125rem;height: 4rem;width: 1rem;width: 1.093333rem;height: 1rem;
} *//* 如果我们的屏幕超过了 750px 那么我们就按照 750设计稿来走 不会让我们页面超过750px */@media screen and (min-width: 750px) {html {font-size: 75px !important;}
}/* search-content */.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;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;
}