移动WEB开发之rem适配布局

644 阅读7分钟

rem单位

  • rem(root em)是一个相对单位,类似于em,em是父元素字体大小
  • em与rem的不同
  • rem的基准是相对于<html>元素的字体大小 例如:根元素html设置font-size=12px;非根元素设置width: 2rem;转换成px表示24px
  • rem的优势:父元素文字大小可能不一致,但是整个页面只有一个<html>,可以很好的来控制整个页面的元素大小比例。

媒体查询

  • Media Query是css3新语法
    • 使用@media查询,可以针对不同的媒体类型定义不同的样式
    • @media可以针对不同的屏幕尺寸设置不同的样式
    • 当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面
    • 目前针对很多苹果手机、Android手机、平板等设备都用得到多媒体查询
  • 语法规范
    1. @media开头
    2. mediatype媒体类型
    • 将不同的终端设备划分成不同的类型,称为媒体类型 如下表所示:

      解释说明
      all所有设备
      print打印机和打印预览
      screen电脑屏幕、平板电脑、智能手机等
    1. 关键字 and not or only
    • 含义:将媒体类型或多个媒体特性连接到一起作为媒体查询的条件。
      1. and: 可以将多个媒体特性连接在一起,相当于“且”的意思

      2. not: 排除某个媒体类型,相当于“非”的意思,可以省略

      3. or: 可以测试多个媒体查询的条件,只要有一个条件成立,就执行,“或”的意思

      4. only: 指定某个特定的媒体类型,可省略

    1. media feature媒体特性 必需有小括号包着 如下表所示:

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

      举例:

          <!-- 注意:and后面一定要空格,不然显示不出来效果 -->
          @media screen and (min-width: 600px;){
              <!-- 内部和书写css样式的方法一样 -->
              body {
                  background-color: pink;
              }
          }
      
  • 案例:根据页面宽度改变背景变色
    • 实现思路:
      1. 推荐:从小到大
      2. 需要注意:最大值max-width 和 最小值min-width都是包含等于的
      3. 屏幕小于540像素,背景颜色为蓝色(x<=539)
      4. 屏幕大于等于540像素并且小于等于969像素的时候背景颜色为绿色(540 =< x >= 969)
      5. 屏幕大于等于970像素的时候,背景颜色为红色(x >= 970)
  • 总结:每个属性写完一定要打空格,例如:and后面要写空格,不然样式没法出来
  • 媒体查询和rem实现元素变化
    • rem单位是跟着<html>来走的,有了rem页面元素可以设置不同大小尺寸
    • 媒体查询可以根据不同设备宽度来修改样式
    • 媒体查询+rem可以实现不同设备宽度,实现页面元素大小的动态变化
    • 案例
  • 引入资源(理解)
    • 在<link>中判断设备的尺寸,然后引用不同的css文件 例如:
         <link rel="stylesheet" href="styleA.css" media="screen and (min-width: 400px)">
      

Less基础

  • 维护css的弊端
    • css是一门非程序式语言,没有变量、函数、SCOPE(作用域)等概念
      1. css需要书写大量看似没有逻辑的代码,css冗余度是比较高的。
      2. 不方便维护及拓展,不利于复用
      3. css没有很好的计算能力
      4. 非前端开发工程师来讲,往往会因为缺少css编写经验而很难写出组织良好且易于维护的css代码项目
  • Less介绍
    • Less(Leaner Style Sheets)是一门CSS扩展语言,也成为CSS预处理器
    • 作为CSS的一种形式的扩展,它并没有减少css的功能,而是现有的css语法上,为css加入程序式语言特性
    • 在css的语法基础之上,引入了变量,Mixin(混入),运算以及函数等功能,大大简化了css的编写.并且降低了css的维护成本,就像它的名称所说的那样,Less可以让我们用更少的代码做更多的事情
    • 中文网站: >lesscss.cn/
    • 常见的css预处理器: Sass,Less,Stylus
    • 总结:Less是一门css预处理语言,它拓展了css的动态特征
  • Less安装
    • 步骤
      1. 安装nodejs >nodejs.org/en/download…
      2. 检查是否安装成功
        • 使用cmd命令(widows+r) ,输入"node-v"查看版本即可
      3. 基于node.js在线安装Less,使用cmd命令"npm install -g less"即可
      4. 检查是否安装成功,使用cmd命令"lessc-v"查看版本即可
  • Less使用
    • Less变量(css中经常使用的一些颜色和数值等)

      1. @变量名:值
      2. 命名规范
        • 必须有@为前缀
        • 不包含特殊字符
        • 不能以数字开头
        • 大小写敏感
      3. 变量使用规范
        body {
          color: @color;
        }
        a:hover {
          color: @color;
        }
      
    • Less编译

      • 本质上,Less包含一套自定义的语法及一个解析器,用户根据这些语法定义自己的样式规则,这些规则最终会通过解析器,编译成对应的css文件.
      • 要把.less文件编译成.css文件,html页面才能使用
      • 推荐方法: (node.js)在当前文件夹使用cmd命令"lessc style.less > style.css" 如图所示:
      • VScode Less插件: Easy LESS 只要保存一下Less文件,会自动生成css文件
    • Less嵌套

      • 常见的嵌套
          <!-- 常用的选择器 -->
          #header .logo {
            width: 300px;
          }
          <!-- Less嵌套写法 -->
          #header {
            .logo {
              width: 300px;
            }
          }
        
      • 交集/伪类/伪元素选择器
        1. 内层选择器的前面没有&符号,则他被解析为父选择器的后代
        2. 如果有&符号,他就被解析为父元素自身或父元素的伪类. 例如:
             <!-- 常用的选择器 -->
               a:hover {
                 color: red;
               }
               <!-- Less嵌套写法 -->
               a {
                 &:hover {
                   color: red;
                 }
               }
          
    • Less运算

      • 含义: 任何数字\颜色或者变量都可以参与运算.Less提供了加(+)、减(-)、乘(*)、除(/)算术运算
      • 注意:
        1. 对于两个不同单位的值之间的运算,运算结果的值取第一个值的单位.
        2. 如果两个值之间只有一个值有单位,则运算结果取该单位
        3. 运算符中间左右有个空格隔开1px + 5rem

rem适配方案

  • 思考:

    1. 我们适配的目的是什么? 答:让一些不能等比自适应的元素,达到当设备尺寸发生改变的时候,等比例适配当前设备.

    2. 在实际开发中如何使用? 答:使用媒体查询根据不同设备按比例设置html字体大小,然后页面元素使用rem做尺寸单位,当html字体大小变化元素尺寸也会发生变化,从而达到等比缩放的适配.

  • rem实际开发适配方案

    1. 按照设计稿与设备宽度的比例,动态计算并设置HTML根标签的font-size大小;(媒体查询)
    2. css中,设计稿元素的宽、高、相对位置等取值,按照同等比例换算为rem为单位的值
  • rem适配方案技术使用(市场主流)

    1. 技术方案1

      • less
      • 媒体查询
      • rem
    2. 技术方案2

      • flexible.js
      • rem
  • 总结:方案2更简单,现阶段无需了解里面的js代码

  • rem+媒体查询+less技术

    1. 设计稿常见尺寸宽度(如下图所示) 一般情况下,我们以一套或两套效果图适应大部分的屏幕,放弃极端屏或对其优雅降级,牺牲一些效果。现在基本以750为准

    2. 动态设置html标签font-size大小(以750为标准设计稿举例) 如图所示

    3. 元素大小取值方法 * 最后的公式:页面元素的rem值 = 页面元素值(px) / (屏幕宽度 / 划分的份数) * 屏幕宽度 / 划分的份数 就是html的font-size大小 * 或者页面元素的rem值 = 页面元素值(px) / html的font-size字体大小

独立完成苏宁移动端首页

  • 给a标签一个定位,覆盖在搜索框之上就可以
  • 制作轮播图的方法:float\display\position\三位置法