03-移动WEB开发_rem布局

移动WEB开发_rem布局

01-rem单位

rem (root em)是一个相对单位

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

02-媒体查询

• 媒体查询（Media Query）是CSS3新语法
• 从小往大写，具有：“向上兼容，向下覆盖”
• @media 可以针对不同的屏幕尺寸设置不同的样式
• 语法规范
  • 用 @media开头
  • mediatype：媒体查询类型
    • all：所有设备
    • print：打印机和打印预览
    • screen：电脑屏幕、平板电脑、智能手机等
  • and|not|only：关键字
    • and：且
    • not：非
    • only：仅仅
  • media feature： 媒体特性，必须用小括号包含
    • width：宽度
    • min-width：最小宽度
    • max-width：最大宽度
• 示范：

@media mediatype and|not|only (media feature) {
     
    CSS-Code;
}
@media screen and (max-width:640px) {
     
    html {
     
		font-size:18px;
    }
}

• 注：媒体查询书写规则
  • 从小到大书写，易于观察代码

03-媒体查询引入资源

• 当样式复杂时，可以针对不同的屏幕引入不同的css文件
• 原理：直接在link标签中判断设备尺寸
• 示范：

/*当屏幕大于320px，引入1.css文件*/
"stylesheet" href="1.css" media="screen and (min-width:320px)">
/*当屏幕大于640px，引入2.css文件*/
"stylesheet" href="2.css" media="screen and (min-width:640px)">

04-维护CSS时的弊端

• CSS 是一门非编程式语言，没有变量、函数、SCOPE（作用域）等概念。
  • 冗余代码多
  • 没有计算能力
  • 组织结构差，不方便维护、扩展，不利于复用

05-less简介以及使用变量

• less（LeanerStyle Sheets 的缩写）

  • 让我们用更少的代码做更多的事情
  • less是一门 CSS 预处理语言，扩展了CSS的动态特性
  • 在CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS的维护成本

• 变量，指没有固定的值，可以改变的量

  • 语法：@变量名: 值;
  • 命名规范：
    • 不能有特殊字符
    • 不能以数字开头
    • 区分大小写

• 示范：

  @color: pink;/* 定义 */
  body {
      background-color: @color;/* 调用 */
  }
  div {
      color: @color;
  }
  

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

• 常见的CSS预处理器：Sass、Less、Stylus

06-less嵌套

• css写法：

div {
     
  width: 100px;
}
div:hover {
     
  width: 200px;
}
div p {
     
  color: red;
}
div p:hover {
     
  color: yellow;
}

• less写法：

div {
     
  width: 100px;
  &:hover {
     
    width: 200px;
  }
  > p {
     
    color: red;
    &:hover {
     
      color: yellow;
    }
  }
}

07-less运算

• 加+ 减- 乘* 除/
• 运算符的左右必须敲一个空格
• 如果只有一个数有单位，最后的结果就以这个单位为准
• 如果都有单位，最后的结果以第一个为准

08-rem适配方案

• 使用媒体查询根据不同的设备来设置html元素的font-size大小，然后页面其他元素全部采用rem单位，当html的font-size变化时，其他元素也会跟着变化，从而达到等比缩放的适配

09-rem最终适配方案

• 媒体查询 + Less + rem
  • Easy LESS 插件：保存自动生成出 css 文件。
  • 首先我们选一套标准尺寸 750为准。
  • 我们用屏幕尺寸（750） 除以 我们划分的份数（15） 得到了 html 里面的文字大小 （50）这个文字大小其实也就是1rem的大小。
  • 再根据设计稿里的元素尺寸计算出元素的rem值。
  • 然后在用媒体查询根据不同屏幕尺寸得到相应的html的font-size值，因为屏幕大小不一样，但是划分的份数一样，所以最后html的文字大小也就不一样，那么1rem在不同的屏幕下也就不一样。
• flexible.js + rem (推荐)
  • flexible.js 库，根据当前屏幕尺寸划分为10份，动态计算并设置html的font-size值。
  • cssrem：px 转 rem 的插件，注意：默认是16px，我们要手动修改，改完之后注意要重启VS Code。

10-在less文件导入另一个less文件

/*可以不加.less后缀名*/
@import "less文件名"