1.什么rem?
首先，rem是一个相对单位，并且始终参考的是html标签的字体大小。使用rem单位的好处，在于整个页面中只有一个html，我们可以让所有的元素都参考当前页面的html大小。
比如：当前屏幕的html的文字大小为50px，那么元素的width:100px；就是 2rem。我们就可以直接写 width：2rem。
html {
font-size: 50px;
}
.box {
width: 2rem;
height: 2rem;
background-color: pink;
}
这样，我们就可以根据界面的大小，调整html的字体大小，从而可以改变使用rem为单位的元素的大小。
那么，我们怎么才能为不同设备指定不同的html的字体大小呢？这个字体大小是怎么定的呢？接下来看媒体查询。
2.什么是媒体查询？
媒体查询就是识别设备的宽度，并进行渲染css样式。
他的语法是：
@media screen and (判定条件px) {
设置的css颜色
}
注意点：
-
用 @media开头 注意@符号
-
mediatype 媒体类型
-
关键字 and not only (一般我们使用and 比较多)
-
media feature 媒体特性必须有小括号包含
-
and 两侧必须有空格 判定条件一定记得加单位
-
判定条件 max-width min-width min-device-width
-
推荐使用从小到大 判定条件使用min-width
-
如果要使用max-width 判定条件从大到小写
了解了媒体查询的语法，我们来写个案例体会一下：
利用媒体查询改变背景颜色：
/* 1. 媒体查询一般按照从大到小或者 从小到大的顺序来 */
/* 2. 小于540px 页面的背景颜色变为蓝色 */
@media screen and (max-width: 539px) {
body {
background-color: blue;
}
}
/* 3. 540 ~ 970 我们的页面颜色改为 绿色 */
/* @media screen and (min-width: 540px) and (max-width: 969px) {
body {
background-color: green;
}
} */
@media screen and (min-width: 540px) {
body {
background-color: green;
}
}
/* 4. 大于等于970 我们页面的颜色改为 红色 */
@media screen and (min-width: 970px) {
body {
background-color: red;
}
}
/* 5. screen 还有 and 必须带上不能省略的 */
/* 6. 我们的数字后面必须跟单位 970px 这个 px 不能省略的 */到了这里，你还会有疑问，那么有了媒体查询有了rem，这两个怎么结合用起来，实现完整的写出一个自适应的页面呢？
首先你要知道：我们在写页面前，要确定当前设计稿的大小，和要将当前屏幕划分的份数。（一般是公司内部开会决定的）
这里延伸一个问题，为什么要把屏幕划分份数呢？
答：因为我们要把每一个不同的屏幕划分为相同的份数，这样做我们可以根据不同的屏幕分辨率，计算出html的font-size。（屏幕划分出的每一份就是font-size）而我们界面上的元素都使用rem为单位，rem就是html的font-size。让元素在不同的屏幕上占据相同的比例空间。这样才能等比例的缩放。
比如一个元素的宽度为2rem：
那么在320px屏幕下，这个元素的大小为2*21.33px = 42.66px
那么在750px屏幕下，这个元素的大小为2*50px = 100px
这两个结果，都是占自己屏幕的15分之2，但是在变大，所以是等比例缩放。
假设我们确定当前设计稿为750px，确定划分的份数为10份，也就是10rem，那么 在750px的屏幕里，一份就是75px。
接下来我们就可以利用媒体查询进行不同设备的识别
在大于320px的屏幕里，html的字体就是32px,在大于540ox的屏幕里，html的字体就是54px等等等...这样就完成了初步的设置。计算html的字体大小的公式是：屏幕大小 / 划分的份数 = html的字体大小
在我们之前的代码里说过，在html里面的元素也应该使用rem来作为单位
让他在不同的屏幕下去根据不同屏幕下的html的大小去进行改变，（公式是：测量出元素的px / html的文字大小 = 元素为几rem）（ps:因为我们最后的单位要求的是rem 所以我们一般把测量出元素px改为rem去计算，不要被搞晕了，直接改为rem就好了。）
因为我们知道，rem是根据html的字体大小改变的，我们把不同设备里的html都设置了不同的值，并且元素也使用了rem作为单位，这样就轻而易举的实现了不同屏幕下的自适应。
示例：（媒体查询+rem实现元素自适应）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
/* 从小到大的顺序 */
@media screen and (min-width: 320px) {
html {
font-size: 32px;
}
}
@media screen and (min-width: 640px) {
html {
font-size: 64px;
}
}
.top {
height: 1rem;
font-size: .5rem;
background-color: green;
color: #fff;
text-align: center;
line-height: 1rem;
}
</style>
</head>
<body>
<div class="top">购物车</div>
</body>
</html> 在这里，又出现了一个问题，页面元素设计稿测量出来的值都是px，我们是怎么转换成rem的呢？难道我们要一个一个拿计算器去算吗？或者你以为是ui小姐姐给的设计稿的单位就是rem吗? 不不不 都不是。在这里我们用到了一个插件less。
3.什么是less
-
Less（LeanerStyle Sheets 的缩写）是一门 CSS扩展语言，也成为CSS预处理器。
-
做为 CSS的一种形式的扩展，它并没有减少CSS的功能，而是在现有的CSS语法上，为CSS加入程序式语言的特性。
-
它在CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS的维护成本，就像它的名称所说的那样，Less可以让我们用更少的代码做更多的事情。
-
常见的CSS预处理器：Sass、Less、Stylus
-
一句话：Less是一门 CSS 预处理语言，它扩展了CSS的动态特性。
总之一句话说就是：它比css多了很多css实现不了的功能比如计算等等。
3.1 less的使用
语法：
@变量名:值;
如：
@color: pink;注意：
-
必须有@为前缀
-
不能包含特殊字符
-
不能以数字开头
-
大小写敏感
示例：
// 定义一个粉色的变量
@color: pink;
// 错误的变量名 @1color @color~@#
// 变量名区分大小写 @color 和 @Color 是两个不同的变量
// 定义了一个 字体为14像素的变量
@font14: 14px;
body {
background-color: @color;
}
div {
color: @color;
font-size: @font14;
}
a {
font-size: @font14;
}总结：
-
定义了一个粉色的变量，body和div都使用了这个变量。那么我们如果想要将body和div的颜色一起修改为另一个颜色，只需要修改变量的值即可，简单方便
-
一般将使用次数比较多的内容，定义为变量，然后通过使用变量，来使用到变量的值
3.2. Less 编译 - vocode Less 插件
-
问题：html文件，是没有办法直接使用less文件的。html只能使用css文件，那么能不能将less转换为css，然后html文件去使用呢？
-
介绍：
-
本质上，Less 包含一套自定义的语法及一个解析器/翻译器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。
-
所以，我们需要把我们的 less文件，编译生成为css文件，这样我们的html页面才能使用。
-
Easy LESS 插件用来把less文件编译为css文件
-
Easy Less插件会使用less中的解析器/翻译器，将less翻译为css
-
安装完毕插件，重新加载下 vscode
-
只要保存一下Less文件，会自动生成CSS文件
-
less 编译： less翻译，将less翻译为css
3.3 Less 嵌套
less嵌套写法如下：
-
-
/*我们经常用到选择器的嵌套 (选择器组合使用：后代选择器)*/ #header .logo { width: 300px; } /* less中的选择器嵌套写法 */ #header { .logo { width: 300px; } }如果遇见 （交集|伪类|伪元素选择器） ，利用&进行连接
-
a:hover{ color:red; } a{ &:hover{ color:red; } } 3.4 Less 运算
任何数字、颜色或者变量都可以参与运算。就是Less提供了加（+）、减（-）、乘（*）、除（/）算术运算。
/*Less 里面写*/
@witdh: 10px + 5;
div {
border: @witdh solid red;
}
/*生成的css*/
div {
border: 15px solid red;
}
/*Less 甚至还可以这样 */
width: (@width + 5) * 2;-
乘号（*）和除号（/）的写法
-
运算符中间左右有个空格隔开 1px + 5
-
对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位
-
如果两个值之间只有一个值有单位，则运算结果就取该单位
3.5 less内引入
一般情况下，我们会把我们写的common.less直接导入到index.less里面，这样就相当于把common.less放在了index.less里
语法：
@import "common";-
注意 import后面一定要跟一个空格 否则不生效
-
@import 导入的意思 可以把一个样式文件导入到另外一个样式文件里面
-
link 是把一个 样式文件引入到 html页面里面
这样我们就无需在html里引入common了。
4.rem+媒体查询+less适配方案
终于到这里了，我们要用一个案例将之前的三个知识点串联起来。
1.技术选型：
-
rem+less+媒体查询
-
flexible.js+rem
此案例我们选用第一种。
2.文件夹搭建
1.images文件夹（用来存放不常更换的图片）
2.upload文件夹（用来存放产品图）
3.css文件夹
4.index.html
3.内容
1.common.less
写共同的样式，将媒体查询也写在内。
//划分屏幕份数
@num:10;
//媒体查询规定不同屏幕下的字体大小
@media screen and (min-width:320px){
html{
font-size: 32px;
// 此处也可以这么写
// font-size: (320px / @num);
}
}
@media screen and (min-width:540px){
html{
font-size: 54px;
}
}
@media screen and (min-width:570px){
html{
font-size: 57px;
}
}
@media screen and (min-width:620px){
html{
font-size: 62px;
}
}
@media screen and (min-width:650px){
html{
font-size: 65px;
}
}
@media screen and (min-width:700px){
html{
font-size: 70px;
}
}
@media screen and (min-width:750px){
html{
font-size: 75px;
}
}2.index.less
//记住这个！！！！！没有冒号！！！！并且要跟空格！！！！
@import "comoon";
//定义当前屏幕的html的文字大小，这只一个变量是为了下面方便进行计算。
@besaFont:75;
*{
box-sizing: border-box;
}
h3,p{
padding: 0;
margin: 0;
}
body{
min-width: 320px;
width: 10rem;
margin: 0 auto;
background-color: #fff;
line-height:1.5;
}
header{
position: fixed;
top: 0;
.hd{
width: 10rem;
height: (385rem /@besaFont );
background: url(../images/bg.jpg) no-repeat;
.hd-items{
display: flex;
padding: 27px 45px 40px 30px ;
position: absolute;
top: (90rem /@besaFont);
left: 50%;
transform: translateX(-50%);
width: (681rem / @besaFont);
background-color: #fff;
border-radius: 30px;
z-index: 1;
.hd-logo{
width: (78rem / @besaFont);
height: (75rem /@besaFont);
border: 1px solid #ccc;
border-radius: 8px;
.images{
width:(55rem / @besaFont) ;
height: (23rem / @besaFont);
background: url(../images/logo.png) no-repeat ;
background-size:(55rem / @besaFont) auto ;
margin: (23rem / @besaFont) auto;
}
}
.hd-name{
flex: 3;
font-size: (16rem / @besaFont);
padding-left: (15rem / @besaFont);
h3{
font-size: (18rem / @besaFont);
}
p{
color: #999;
margin-top: (8rem /@besaFont);
span{
margin-left: (10rem /@besaFont);
}
}
}
.hd-follow{
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: end;
flex: 1;
font-size: (16rem / @besaFont);
cursor: pointer;
span:last-child{
width: (110rem /@besaFont);
height: (45rem / @besaFont);
background-color: #fddf00;
border-radius: (30rem /@besaFont);
text-align: center;
line-height: (45rem / @besaFont);
&::before{
display: inline-block;
content: '';
width:(27rem /@besaFont) ;
height: (24rem /@besaFont);
vertical-align: middle;
margin-right: (10rem / @besaFont);
background: url(../images/follow.png) no-repeat;
background-size:(27rem /@besaFont) ;
}
}
}
}
}
}
section{
padding: (416rem /@besaFont ) (37rem /@besaFont) 0;
height: 1200px;
.content-hd{
display: flex;
.classty{
flex: 1;
padding: (33rem /@besaFont) (15rem /@besaFont);
text-align: center;
background-color: #fddf00;
border-radius: (30rem /@besaFont);
font-size: (18rem /@besaFont);
color: #000;
cursor: pointer;
&:first-child{
color: #fff;
background-color: #003a9b;
}
&:nth-child(2){
margin: 0 (28rem / @besaFont);
}
}
}
.content{
padding: (35rem /@besaFont) 0 0;
h3{
font-size: (30rem / @besaFont);
span{
margin-left: (20rem /@besaFont);
font-size: (18rem /@besaFont);
font-weight: 400;
color: #999;
}
}
.content-items{
padding-top:(40rem /@besaFont) ;
.con-items-one{
display: flex;
& div[class^=items-one-]{
overflow: hidden;
flex: 1;
margin: 0 (23rem /@besaFont) 0 0;
border: 1px solid #ccc;
border-radius: (30rem /@besaFont);
}
.one-last{
margin-right: 0 !important;
}
.one-img{
height: (143rem /@besaFont);
background-color: pink;
img{
width: 100%;
}
}
.txt{
position: relative;
z-index: -1;
padding: (55rem /@besaFont) (20rem /@besaFont) (20rem /@besaFont);
&::before{
position: absolute;
top: (30rem / @besaFont);
left: (20rem /@besaFont);
content: '';
width: (21rem /@besaFont);
height: (30rem/@besaFont);
background: url(../images/国旗.png) no-repeat;
background-size: (21rem /@besaFont);
}
h3{
font-size: (22rem /@besaFont);
font-weight: 400;
padding-bottom: (7rem /@besaFont);
}
span{
display: flex;
i{
flex: 1;
justify-content: space-between;
font-style: normal;
font-size: (22rem /@besaFont);
color: #e4007b;
}
.icon{
width: (36rem /@besaFont);
// background: url(../images/shopcar.png) no-repeat;
// background-size:(36rem /@besaFont) ;
img{
display: block;
width:(36rem /@besaFont) ;
margin: 0 auto;
}
}
}
}
}
.con-items-tow{
display: flex;
margin-top: (15rem /@besaFont);
.con-items-one{
flex: 1;
}
.one-img{
width: (321rem /@besaFont);
height: (273rem /@besaFont);
img{
width: (321rem /@besaFont);
height: (273rem /@besaFont);
}
}
}
}
}
}3.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, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Document</title>
<!-- 引入初始化样式 -->
<!-- 此处一定注意：要把初始化样式放在上面，因为会有层叠性。 -->
<link rel="stylesheet" href="./css/normalize.css">
<!-- 引入自己的css样式 -->
<!-- 因为common已经导入在里面了所赖以不用再引用了 -->
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<!-- 头部 -->
<header>
<div class="hd">
<div class="hd-items">
<div class="hd-logo">
<div class="images">
</div>
</div>
<div class="hd-name">
<h3>Dior专营店</h3>
<p>来自日本 <span>11.2万关注</span></p>
</div>
<div class="hd-follow">
<span>领券</span>
<span>关注</span>
</div>
</div>
</div>
</header>
<!-- 内容部分 -->
<section>
<div class="content-hd">
<span class="classty">首页</span>
<span class="classty">商品</span>
<span class="classty">上新</span>
</div>
<div class="content">
<h3>店铺推荐 <span>店铺活动大促</span></h3>
<div class="content-items">
<div class="con-items-one">
<div class="items-one-1">
<div class="one-img">
<img src="./images/row2-pic01.png" alt="">
</div>
<div class="txt">
<h3>SEVELTY分解糖活酵母56粒</h3>
<span>
<i>￥25</i>
<i class="icon">
<img src="./images/shopcar.png" alt="">
</i>
</span>
</div>
</div>
<div class="items-one-1">
<div class="one-img">
<img src="./images/row2-pic01.png" alt="">
</div>
<div class="txt">
<h3>SEVELTY分解糖活酵母56粒</h3>
<span>
<i>￥25</i>
<i class="icon">
<img src="./images/shopcar.png" alt="">
</i>
</span>
</div>
</div>
<div class="items-one-1 one-last">
<div class="one-img">
<img src="./images/row2-pic01.png" alt="">
</div>
<div class="txt">
<h3>SEVELTY分解糖活酵母56粒</h3>
<span>
<i>￥25</i>
<i class="icon">
<img src="./images/shopcar.png" alt="">
</i>
</span>
</div>
</div>
</div>
<div class="con-items-tow">
<div class="con-items-one">
<div class="items-one-1">
<div class="one-img">
<img src="./images/row2-pic01.png" alt="">
</div>
<div class="txt">
<h3>SEVELTY分解糖活酵母56粒</h3>
<span>
<i>￥25</i>
<i class="icon">
<img src="./images/shopcar.png" alt="">
</i>
</span>
</div>
</div>
<div class="con-items-one">
<div class="items-one-1">
<div class="one-img">
<img src="./images/row2-pic01.png" alt="">
</div>
<div class="txt">
<h3>SEVELTY分解糖活酵母56粒</h3>
<span>
<i>￥25</i>
<i class="icon">
<img src="./images/shopcar.png" alt="">
</i>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="con-items-tow">
<div class="con-items-one">
<div class="items-one-1">
<div class="one-img">
<img src="./images/row2-pic01.png" alt="">
</div>
<div class="txt">
<h3>SEVELTY分解糖活酵母56粒</h3>
<span>
<i>￥25</i>
<i class="icon">
<img src="./images/shopcar.png" alt="">
</i>
</span>
</div>
</div>
<div class="con-items-one">
<div class="items-one-1">
<div class="one-img">
<img src="./images/row2-pic01.png" alt="">
</div>
<div class="txt">
<h3>SEVELTY分解糖活酵母56粒</h3>
<span>
<i>￥25</i>
<i class="icon">
<img src="./images/shopcar.png" alt="">
</i>
</span>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
好啦~今天的总结就写到这了~还有什么问题欢迎大家一起探讨交流，欢迎指正~感谢观看~
723
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
