移动web开发 16-1 rem布局 Jd优惠券案例1.使用<script></script>标签引入rem.js 2

前言:html,body{height:100%} 这句话的意思是
屏幕(可视窗口)的高度和html,body的高度一样

!!!rem布局四步核心!!!

1.使用<script></script>标签引入rem.js
2.设置cssrem根标签值 ui 图除以2 再除以10 换数据需要重启vscode
3.测量的尺寸 2倍图除以2
4.宽度使用百分比或者rem,内外边距,文字大小,高度等使用rem

1.rem单位

rem (root em)是一个相对单位，类似于em，em是当前盒子字体大小。

不同的是rem的基准是相对于html元素的字体大小。

比如，根元素（html）设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。

 根html 为 12px 
html {
   font-size: 12px;
}
 此时 div 的字体大小就是 24px     
div {
    font-size: 2rem;
}

rem的优势：父元素文字大小可能不一致，但是整个页面只有一个html，可以很好来控制整个页面的元素大小。

rem.js将html根标签文字大小(1rem的值)动态的设置为当前屏幕宽度的1/10
链接js用script标签 src="路径"千万不要用Link !!!

2. 媒体查询(实际没有学,后天学习)

2.1 媒体查询语法规范

用 @media开头注意@符号
mediatype 媒体类型 screen
关键字 and not only
media feature 媒体特性必须有小括号包含

@media screen and (max-width: 800px) {
        body {
          background-color: pink;
        }
      }

2.2 媒体查询引入资源(了解)

就是根据不同的屏幕大小,引入不同的样式文件

3.less 基础

安装easy less插件

3.1.Less 使用之变量

@变量名:值;
@color: pink;

3.2.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.3 Less 混合

混合语法.类名(); 点类名括号;
混合的调用只能调用类选择器和id选择器

.box{
	width:100px;
	height:200px;
	backgroud-color:pink;
}
.nav {
	.box();
	font-size:100px;
}

3.4.Less 嵌套

不建议超过3层嵌套,这样也不利于维护
如果超过三层,可以选择第三层的子集继续开始新的less结构

div{};
div p {};

// 将css改为less
#header .logo {
  width: 300px;
}

#header {
    .logo {
       width: 300px;
    }
}

如果遇见（交集|伪类|伪元素选择器），利用&进行连接

.father {
  p {
    float: left;
    font-size: 14px;
    color: skyblue;
    a {
      text-decoration: none;
      font-size: 16px;
      color: yellowgreen;
      &:hover{
      color:red;
      }
    }
    span {
      font-size: 20px;
      color: orange;
    }
  }
  ul {
    float: left;
    li {
      float: left;
      color: skyblue;
      list-style: none;
      font-size: 30px;
    }
  }
}

3.5.Less 导入

语法: @import "less文件" 注意@import 后面必须有控格
作用:提高了css文件的维护效率

3.6.Less 缺点(补充)

看见 / 符号就自动计算了
比如背景里面的背景定位和背景尺寸中间的/符号.

background:url(a.jpg) no-repeat  40px 50px / 200px 300px;

这种情况下 less会自动把/ 当作运算符

border-radius:200px 20px 100px 60px / 100px 200px 300px 60px;

这种情况下也会自动运算

解决方法:1.分开写 2.写完less,单独再css里面写.

3.7.flexible.js 简介 (补充)

阿里用的就是这个,后面js也要学到

4. jd优惠券案例(这里有个rem适配方案!!!)

4.1当屏幕宽度大于等于你设置的版心宽度最大宽度的时候,

注意:最后写完以后发现,不适配pc端,都乱了
这个时候用媒体查询,限制死最大rem值
这里最大值一定是最大值的1/10

4.11 如果设置15份 ,那就设置750 / 15份一份50px

如果设置10份,那就设置 750 / 10 份一份 75px

4.2 给body设置样式属性

	body{
	width:10rem;
	max-width:750px;
	min-width:320px;
	margin:0 auto;
	line-heigjt:1.5;
	background:#f2f2f2;
}

4.3媒体查询设置超过最大宽度以后的页面字体大小.

如果是750px,那就设置750px
font-size:75px;

@media (min-width:769px){
			html{
					font-size:76.8px !important;
			}
}

HTML

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 链入js适配文件 -->
    <script src="./js/rem.js"></script>
    <link rel="stylesheet" href="./css/style.css" />
    <!-- 页面只能链入css文件 -->
    <link rel="stylesheet" href="./css/index.css" />
    <!-- rem适配4步
    1.srcipt 2.cssrem设置为ui图/2/10  3.  2倍图测量尺寸/2  4.宽高都用百分比或者rem
    -->
  </head>
  <body>
    <!-- 版心 -->
    <div class="container">
      <!-- 顶部栏 -->
      <div class="top-bar">
        <img src="./images/topnav.png" alt="" />
      </div>
      <!-- 优惠部分 -->
      <div class="cheap">
        <div class="cheap-card">
          <div class="cheap-card-hd">
            <span>全场优惠</span>
            <span>0/1</span>
          </div>
          <div class="cheap-card-bd">
            <a href="#" class="icon-add">
              <p>添加优惠</p>
            </a>
          </div>
        </div>
        <div class="cheap-card">
          <div class="cheap-card-hd">
            <span>优惠券</span>
            <span>0/3</span>
          </div>
          <div class="cheap-card-bd">
            <a href="#" class="icon-add">
              <p>添加优惠</p>
            </a>
          </div>
        </div>
        <div class="tips">
          <h5>提示:</h5>
          <p>1.买家下单时只可选择其一(全场优惠或者优惠券)</p>
          <p>2.优惠券一旦设置后不可修改</p>
        </div>
      </div>
    </div>
  </body>
</html>

less


//先导入公共的base
@import "base";
body {
  background-color: #eee;
}
// 版心
.container {
  width: 100%;
  //   限制一下版心的最大宽度768px
  max-width: 768px;
  margin: 0 auto;
  .top-bar {
    width: 100%;
    img {
      width: 100%;
    }
  }
  .cheap {
    padding: 0 0.32rem;
    .cheap-card {
      width: 100%;
      .cheap-card-hd {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 1.066667rem;
        font-size: 0.373333rem;
        span {
          &:nth-child(2) {
            color: #888888;
          }
        }
      }
      .cheap-card-bd {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 2.986667rem;
        background-color: #fff;
        border: 0.08rem dashed #ccc;
        a {
          display: block;
          text-align: center;
          color: #ccc;
          font-weight: normal;
          p {
            font-size: 0.32rem;
            margin-top: 0.24rem;
          }
        }
        .icon-add {
          font-size: 1.333333rem;
          color: #aeaeae;
        }
      }
    }
    .tips {
      width: 100%;
      margin: 50px 0;
      color: #888888;
      p {
        margin: 5px 0;
      }
    }
  }
}

移动web开发 16-1 rem布局 Jd优惠券案例

!!!rem布局四步 核心!!!