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文件名"

你可能感兴趣的:(03-移动WEB开发_rem布局)