rem布局，less基础，媒体查询

rem 单位

rem（root em）是一个相对单位，类似于em，em是父元素字体大小；

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

比如，根元素（html）设置 font-size: 12px; 非根元素设置 width: 2rem; 此时换算成px表示 24px；

rem优点：就是可以通过修改html里面文字大小来改变页面中元素的大小可以整体控制；

媒体查询

媒体查询（Media Query）是 CSS3 新语法；

使用 @media 查询，可以针对不同的媒体类型定义不同的样式；
@media 可以针对不同的屏幕尺寸设置不同的样式；
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面；
目前针对很多苹果手机，Android手机，平板等设备都用得到多媒体查询；

@media mediatype and|not|only (media feature) {
  css-code;
}
/* 
  @media：关键字；
  mediatype：媒体类型；
  and|not|only：关键字；
  media feature：媒体特性 必须有小括号包含
*/

mediatype 查询类型

将不同的终端设备划分为不同的类型，称为媒体类型

值	解释说明
all	用于所有设备
print	用于打印机和打印预览
scree	用于电脑屏幕，平板电脑，只能手机等

关键字

关键字将媒体类型或多个媒体特性链接到一起作为媒体查询的条件

and：可以将多个媒体特性连接在一起，相当于且的意思；
not：排除某个媒体特性，相当于非的意思，可以省略；
only：指定某个特性的媒体类型，可以省略；

媒体特性

每种媒体类型都具有各自不同的属性，根据不同媒体类型的媒体特性设置不同的展示风格，注意要加小括号

值	解释说明
width	定义输出设备页面可见区域宽度
min-width	定义输出设备页面最小可见区域宽度
max-width	定义输出设备页面最大可见区域宽度

示例

/* 建议从小往大开始写 */
@media screen and (max-width: 539px) {
  body {
    background-color: pink;
  }
}
/* 这里最后一个条件可以去掉，为了演示多个写法故而加上 */
@media screen and (min-width: 540px) and (max-width: 7990px) {
  body {
    background-color: hotpink;
  }
}
@media screen and (min-width: 800px) {
  body {
    background-color: plum;
  }
}

引入资源

当样式比较繁多的时候，我们可以针对不同的媒体使用不同的stylesheets（样式表）；

原理：就是直接在link标签中判断设备尺寸，然后引入不同的css文件；建议从小到大书写；

<link rel="stylesheet" href="./width320.css" media="screen and (min-width: 320px)" />
<link rel="stylesheet" href="./width640.css" media="screeb and (min0-width: 640px)" />

less 基础

less 介绍

Less (Leaner Style Sheets 的缩写) 是一门css扩展语言，也称为 css预处理器；

作为css一种形式的拓展，它并没有减少css的功能，而是在现有的语法上，为css加入程序式的语言特性；

它在css的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了css的编写，并且降低了css的维护成本；

Less中文网：http://lesscss.cn/

常见的css预处理器：Less， Sass， Stylus

less 安装

安装 node.js
npm install -g less
lessc -v 检查 less 版本

less 编译

.less 文件是无法被html识别的，这里推荐一个 vscode 插件 easy Less，此插件可以把less文件编译成css文件

less 变量

// @变量名: 值;
// 上面引用，下面调用，开头必须是@
@color: pink;
body {
  background-color: @color;
}

less 嵌套

子元素的样式直接写到父元素里面
```
.nav {
  .logo {
    color: pink;
  }
}
```
伪类，交集选择器，伪元素选择器，内层选择器前加 &
```
a {
  &:hover {
    content: "";  
  }
}
```

less 运算

@border: 5px + 1;
body {
  width: 200px - 50;
  height: 200px * 0.5;
  // 如果前后运算的值都存在单位，那么以第一个为准
  border: (@border + 1) / 7 + 1rem;
}

rem适配方案

1，让一些不能等比例自适应的元素，达到当设备尺寸发生改变的时候，等比例适配当前设备

2，使用媒体查询根据不同设备按照比例设置html字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化，元素尺寸也会跟着变化，从而达到等比缩放的效果；

实际开发适配方案

1，按照设计稿与设备宽度的比例，动态计算并设置html根标签的font-size大小；（媒体查询）

2，css中，设计稿元素的宽，高，相对位置等取值，按照同等比例换算为 rem 为单位的值；

动态设置html标签 font-size 大小

1，假设设计稿是750px

2，假设我们把整个屏幕划分为15等份（可以是20也可以是10）

3，每一份作为html字体的大小，这里就是50px

4，那么320px设置的时候，字体大小为 320 / 15 就是 21.33px

5，用我们元素的大小除以不同的html字体大小会发现他们的比例还是相同的

6，比如以750为标准的设计稿，一个100 * 100的盒子就是100/50转换为rem就是 2rem * 2rem；320的屏幕下，html的字体大小为21.33 则 2rem = 42.66px 此时宽和高还是等比例缩放；但是已经实现了不同屏幕下，元素盒子等比例缩放

元素大小的取值方法

1，最后的公式：页面的rem值 = 页面元素（px） / （屏幕宽度 / 划分的份数）

2，屏幕宽度 / 划分的份数就是 html font-size 的大小

3，或者页面元素的 rem = 页面元素值 / html font-size大小

rem + flexible 布局 (搜索框案例)

flexible项目地址：https://github.com/amfe/lib-flexible

// less 部分
@media screen and (min-width: 750px) {
  html {
    font-size: 75px !important;
  }
}

body {
  min-width: 320px;
  max-width: 750px;
  width: 10rem;
  margin: 0 auto;
  line-height: 1.5;
  font-family: Arial, Helvetica, sans-serif;
  background-color: #F2F2F2;
  a {
    text-decoration: none;
  }
  .search-content {
    display: flex;
    position: fixed;
    top: 0;
    left: 50%;
    width: 10rem;
    height: 88rem / 75;
    background-color: #FFC001;
    transform: translate(-50%);
    .classify {
      width: 44rem / 75;
      height: 70rem / 75;
      margin: 11rem / 75 25rem / 75 10rem / 75;
      background: url(../images/classify.png) no-repeat;
      background-size: 44rem / 75 70rem / 75;
    }
    .search {
      flex: 1;
      input {
        width: 100%;
        height: 66rem / 75;
        margin-top: 10rem / 75;
        padding-left: 55rem / 75;
        background-color: #FFF2CC;
        border-radius: 33rem / 75;
        box-sizing: border-box;
        outline: none;
        border: 0;
        font-size: 25rem / 75;
        color: #757575;
      }
    }
    .login {
      width: 75rem / 75;
      height: 70rem / 75;
      margin: 10rem / 75;
      color: #fff;
      font-size: 25rem / 75;
      line-height: 70rem / 75;
      text-align: center;
    }
  }
}

<!-- html 部分 -->
<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>

rem + 媒体查询布局（苏宁首页案例）

// less 部分
@number: 15;
html {
  font-size: 50px;
}
@media screen and (min-width: 320px) {
  html {
    font-size: 320px / @number;
  }
}
@media screen and (min-width: 360px) {
  html {
    font-size: 360px / @number;
  }
}
@media screen and (min-width: 375px) {
  html {
    font-size: 375px / @number;
  }
}
@media screen and (min-width: 384px) {
  html {
    font-size: 384px / @number;
  }
}
@media screen and (min-width: 400px) {
  html {
    font-size: 400px / @number;
  }
}
@media screen and (min-width: 424px) {
  html {
    font-size: 480px / @number;
  }
}
@media screen and (min-width: 480px) {
  html {
    font-size: 480px / @number;
  }
}
@media screen and (min-width: 540px) {
  html {
    font-size: 540px / @number;
  }
}
@media screen and (min-width: 720px) {
  html {
    font-size: 720px / @number;
  }
}
@media screen and (min-width: 750px) {
  html {
    font-size: 750px / @number;
  }
}
a {
  text-decoration: none;
}
body {
  min-width: 320px;
  width: 15rem;
  margin: 0 auto;
  background-color: #F2F2F2;
  line-height: 1.5;
  font-family: Arial, Helvetica, sans-serif;
  .search-content {
    display: flex;
    position: fixed;
    top: 0;
    left: 50%;
    width: 15rem;
    height: 88rem / 50;
    background-color: #FFC001;
    transform: translate(-50%);
    .classify {
      width: 44rem / 50;
      height: 70rem / 50;
      margin: 11rem / 50 25rem / 50 7rem / 50 24rem / 50;
      background: url(../images/classify.png) no-repeat;
      background-size: 44rem / 50 70rem / 50;
    }
    .search {
      flex: 1;
      input {
        width: 100%;
        height: 66rem / 50;
        margin-top: 12rem / 50;
        padding-left: 55rem / 50;
        border-radius: 33rem / 50;
        box-sizing: border-box;
        outline: none;
        background-color: #FFF2CC;
        border: 0;
        font-size: 25rem / 50;
        color: #757575;
      }
    }
    .login {
      width: 75rem / 50;
      width: 70rem / 50;
      margin: 10rem / 50;
      font-size: 25rem / 50;
      color: #fff;
      text-align: center;
      line-height: 70rem / 50;
    }
  }
  .banner {
    width: 750rem / 50;
    height: 368rem / 50;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .ad {
    display: flex;
    a {
      flex: 1;
      img {
        width: 100%;
      }
    }
  }
  nav {
    width: 750rem / 50;
    a {
      float: left;
      width: 150rem / 50;
      height: 140rem / 50;
      text-align: center;
      img {
        display: block;
        width: 82rem /  50;
        height: 82rem / 50;
        margin: 10rem / 50 auto 0;
      }
      span {
        display: block;
        margin-top: 8rem / 50;
        font-size: 25rem / 50;
        color: #333;
      }
    }
  }
}

<!-- html 部分 -->
<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="./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>
  <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>

posted @ 2020-03-18 00:48 计算机相关人员阅读(437) 评论(0) 收藏举报

刷新页面返回顶部

Hello World

look up very good.

rem布局，less基础，媒体查询

rem 单位

媒体查询

mediatype 查询类型

关键字

媒体特性

引入资源

less 基础

less 介绍

less 安装

less 编译

less 变量

less 嵌套

less 运算

rem适配方案

实际开发适配方案

rem + flexible 布局 (搜索框案例)

rem + 媒体查询布局（苏宁首页案例）

公告

Hello World

look up very good.

rem布局，less基础，媒体查询

rem 单位

媒体查询

mediatype 查询类型

关键字

媒体特性

引入资源

less 基础

less 介绍

less 安装

less 编译

less 变量

less 嵌套

less 运算

rem适配方案

实际开发适配方案

rem + flexible 布局 (搜索框案例)

rem + 媒体查询布局 （苏宁首页案例）

公告

rem + 媒体查询布局（苏宁首页案例）