rem布局_html-js-css

概述01-rem布局-rem单位 rem单位：代表HTML的字体大小； 1em = 父亲的字体大小px; 1rem = HTML 字体大小px；盒子的属性值，用到rem这个单位，那么HTML的字体大小发生改变，整体页面的盒子就会发生等比变化； 02-rem布局-媒体查询-01-语法媒体查询：响应屏幕变化 /* 查屏幕且最小宽度是500px 的时候 w>=500px 下面的CSS会生效*/@ @H_403_0@ @H_403_0@ 01-rem布局-rem单位

rem单位：代表HTML的字体大小；

1em = 父亲的字体大小px;

1rem = HTML 字体大小px；

盒子的属性值，用到rem这个单位，那么HTML的字体大小发生改变，整体页面的盒子就会发生等比变化；

02-rem布局-媒体查询-01-语法

媒体查询：响应屏幕变化

/* 查屏幕 且 最小宽度是500px 的时候 w>=500px 下面的CSS会生效*/@media screen and (min-wIDth:500px) {    css-code}?/* 查屏幕且宽度为500px的时候，下面css-code生效 *//* @media screen and (wIDth:500px) {    body {     background-color: red;    }} */?/* 宽度最大界值是500px  w<=500px CSScode生效 *//* @media screen and (max-wIDth:500px) {    body {     background-color: blue;    }} */

02-rem布局-媒体查询-02-档位划分

档位：划分的不同范围

 @media screen and (min-wIDth:0px) {      body {        background-color: red;      }    }    /* - 档位2 : 540px<=w and w< 640px; */        @media screen and (min-wIDth:540px) {      body {        background-color: blue;      }    }    /* - 档位3 : 640px<=w */        @media screen and (min-wIDth:640px) {      body {        background-color: green;      }    }

各个档位可以生效的图

03-rem布局-rem&媒体查询

rem：唯一控制，1rem背后代表的值变了，整个页面用到我rem单位的盒子都要跟着变；

媒体查询：响应屏幕的变化；

媒体查询+rem：不同的档位下，设置1rem背后代表的值不同，那么屏幕变化的时候，整个页面用到我rem单位的盒子都要跟着等比变；

问题：UI给我的图示设计的PX单位，需要把PX单位转化为rem,涉及到除法运算；

实际开发的步骤：

UI设计稿540px，在页面上测量出元素的高度是44px，如何转化为rem单位呢？

找到设计稿所在档位的1rem背后代表的值，1rem = 30px

44px = 44/30 rem = 44/ 30 *30px;

大家的问题：如何档位下1rem背后带不动额值变了：

找到设计稿所在档位的1rem背后代表的值，1rem = 35px

44px = 44/35 rem = 44/35 *35px = 44px;

04-rem布局-less-安装

less：预处理语言；不能直接在浏览器中使用；

.less文件需要VSC装插件 Easy LESS

05-rem布局-less-语法

语法：

// 1.变量  less变量的语法@color:blue;?.son_1 {  background-color: @color;}?.son_2 {  color: @color;}?.Box_3 {  border: 10px solID @color;}

?
?

?// 2.嵌套 // header {//   height: 44px;// }?// header .search {//   flex: 1;// }?header {  height: 44px;  .search {    flex: 1;    background-color: @color;    &::before {      content: "1";    }    // &:hover {    //   background-color: #222;    // }  }  // .search::before {  //   content: "";  // }  .search:hover {    background-color: #555;  }  a {    wIDth: 44px;    height: 44px;    background-color: blue;  }}


?
?
?
?

// 3.运算@base:75;div {  wIDth: 200px+356px;  wIDth: 486px*356px;  wIDth: 486px-356px;  wIDth: 44/30rem;  wIDth: 44/44rem;  height: (44-30)/2px;  background-color: #666-#222;?  // 单位问题：单位去选择，不参与运算；  // 1.使用同一个单位 ，最终确认为这个单位  height: 40+40px;  // 2.两个不同的单位，会选择前面的那个单位；  wIDth: 50px/30rem;  wIDth: 60rem/30px;  height: 75rem/@base;}

写所有的CSS都要用 less; webpack;

06-rem布局-rem&媒体查询&less方案

约定1：各个档位如何来的？UI的设计宽度，从小到大，当做我们各个档位下的最小界值

约定2：各个档位下的1rem背后代表的值是怎么来的？1rem = 各个档位下的最小界值 / 10;

// 320@media screen and (min-wIDth: 320px) {  HTML {    Font-size: 320px/10;  }}// 360@media screen and (min-wIDth: 360px) {  HTML {    Font-size: 360px/10;  }}// 375 iphone 678@media screen and (min-wIDth: 375px) {  HTML {    Font-size: 375px/10;  }}// 384@media screen and (min-wIDth: 384px) {  HTML {    Font-size: 384px/10;  }}// 400@media screen and (min-wIDth: 400px) {  HTML {    Font-size: 400px/10;  }}// 414@media screen and (min-wIDth: 414px) {   HTML {    Font-size: 414px/10;  }}// 424@media screen and (min-wIDth: 424px) {  HTML {    Font-size: 424px/10;  }}// 480@media screen and (min-wIDth: 480px) {  HTML {    Font-size: 480px/10;  }}// 540@media screen and (min-wIDth: 540px) {  HTML {    Font-size: 540px/10;  }}// 720@media screen and (min-wIDth: 720px) {  HTML {    Font-size: 720px/10;  }}// 750@media screen and (min-wIDth: 750px) {  HTML {    Font-size: 750px/10;  }}

07-rem布局-方案1-构建文件目录及初始化

第一步：原稿实现；UI给多大的设计稿，原稿实现；

08-rem布局-方案1-顶部栏

flex布局：

左右固定，中间随意拉伸；

固定定位：

header {  height: 88px;  display: flex;  background-color: #FFC001;  position: fixed;  wIDth: 750px;  // row  .left {    wIDth: 40px;    height: 70px;    margin: 9px 15px;    // background-color: blue;    background: url(‘../imgs/classify.png‘) no-repeat;    background-size: 100%;  }  .mID {    flex: 1;    background-color: #fff;    margin: 10px 0;    border-radius: (88-20)/2px;    line-height: 88-20px;    padding-left: 50px;  }  .right {    wIDth: 88px;    // background-color: red;    line-height: 88px;    text-align: center;    color: #fff;  }}

<div class="header">    <div class="left"></div>    <div class="mID"></div>    <div class="right"></div>  </div>

09-rem布局-方案1-rem替换及小结

第二步：把所有的PX值替换为rem;

// 2.0 所有档位准备好；OK 
// 2.1 找当前设计稿750px 所在的档位，拿到这个档位下 1rem 代表的值是多少；1rem = 75px
// 2.2 88px = 88/75rem = 88/75 * 75px = 88px
// 2.3 其他档位720档位下 88/75rem = 1.36rem = 1.36*72px = 82.3px;

方案：档位划分不够细致，看起来变化不是连续的；方案不推荐使用；

10-rem布局-rem&flexible.Js方案

flexible.Js：手机淘宝团队出的一个适配Js文件；

效果：把页面的当前的宽度/10 = 1rem值；形成连续变化的特点；

11-rem布局-方案2-介绍及 *** 作-rem替换小结

HTML引入：需要把Js文件引入，不需要在引入common.CSS文件。（原因：common.CSS是比较粗的档位文件，找一个划分比较细的文件 Js文件）

第一步：原稿实现；不能加max-wIDth:750px; wIDth:100%;

第二步：

// 第二步：PX单位换rem;
// 2.0 准备了一个Js文件，达到连续变化的特点，把屏幕的宽度/10 = 1rem值；
// 2.1 找当前设计稿750px 设计稿屏幕下，拿到屏幕下 1rem 代表的值是多少；1rem = 750/10 = 75px;
// 2.2 88px = 88/75rem = 88/75 * 75px = 88px
// 2.3 其他屏幕720px   88/75rem = 88/75*72px = 82.3px;

第三步：问题：

// 问题1：Js在body上设置了Font-size大小，标签内的样式的权重比CSS文件样式权重高，需要在CSS文件样式提高权重；
?
body {
  wIDth: 750/75rem;
  margin: 0 auto;
  Font-size: 24/75rem!important;
}
?
?
// 问题2：Js在超过750px 和 小于320px 范围内还在变 设置1rem背后代表的值还在变化；限制；
// 解决方案：超过750px 以后，1rem代表的值不再变；--->媒体查询
@media screen and (min-wIDth:750px) {
  HTML {
    Font-size: 75px!important;
 }
}
// 小于320px 
@media screen and (max-wIDth:319px) {
  HTML {
    Font-size: 32px!important;
 }
}
?