菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 陈紫怡-20221027-web移动端rem布局 [打印本页]

---

作者: Dasmondlicht    时间: 2022-10-27 00:29
标题: 陈紫怡-20221027-web移动端rem布局
一、今日学习内容：

• 什么是rem
  
  • rem（root em）是一个相对单位，和em不同的是rem相对基准是对于html元素的字体大小来说的
    
  • 比如：
    
    • html设置的字体大小font-size:12px;   非根元素设置的具体的单位是 width:2rem;  换算成px单位就是24px。
      
  • 优点：
    
    • 父元素的字体大小可能不一样，但是整个页面只有一个html标签，可以很好的控制整个页面的元素大小。
      
• 媒体查询
  
  • 什么是媒体查询
    
    • 媒体查询是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}；
      
• LESS
  
  • 维护CSS的弊端
    
    • CSS是一门非程序式语言，没有变量、函数、作用域的概念。
      
    • CSS书写的时候会写大量的看似没哟逻辑代码，冗余程度比较高。
      
    • 不方便扩展和复用
      
    • CSS没有很好的计算能力
      
  • Less介绍
    
    • less是一门css扩展语言，也称为css预处理器
      
    • 作为css的一种形式的扩展，它并没有减少css的功能，而且在现有的css语法上，为其增加了程序式语言的特性。
      
    • 常见的css预处理器：
      
      • Sass、Less、Stylus等等
        
  • Less的编译
    
    • 下载插件Easy Less 将 less文件编译为css文件
      
  • Less的嵌套
    
  • Less的运算
    
    • 任何的数字、颜色或者变量都可以参与运算
      
    • 基本的运算符有：加（+）、减（-）、乘（*）、除（/）
      
    • 语法规范：
      
      • 运算符左右两边要有空格隔开
        
      • 除法运算需要在运算外加括号，否则不生效
        
      • 对于两个不同的单位的值之间的运算，运算结果取前面的值的单位
        
      • 如果两个参与计算的数值，只有一个值有单位，那么就用有单位的值的单位
        
• Rem的适配方案
  
  • less+rem+媒体查询
    
    • 原理
      
      • 让一些不能等比例自适应的元素，达到不同的尺寸时，根据html字体的大小变化来用rem作为单位，控制元素进行自适应变化。
        
    • rem的实际开发适配方案
      
      • ①假设设计稿是750px
        
      • ②假设我们把整个屏幕划分为15等份（划分标准不一可以是20份也可以是10等份）
        
      • ③每一份作为html字体大小，这里就是50px
        
      • ④那么在320px设备的时候，字体大小为320/15就是 21.33px
        
      • ⑤用我们页面元素的大小除以不同的 html字体大小会发现他们比例还是相同的
        
      • ⑥比如我们以750为标准设计稿
        
      • ⑦一个100*100像素的页面元素在  750屏幕下，  就是 100/ 50  转换为rem 是  2rem*2rem  比例是1比1
        
      • ⑧320屏幕下，  html字体大小为21.33   则 2rem=  42.66px 此时宽和高都是42.66  但是宽和高的比例还是 1比1
        
      • ⑨但是已经能实现不同屏幕下  页面元素盒子等比例缩放的效果
        
    • 总结：
      
      • 公式：页面元素的rem值 = 页面元素的px值  /  html 的字体大小
        
        • html的字体大小 = 屏幕的宽度 / 划分的份数
          
  • flexible.js+rem
    
    • flexble.js+rem适配方案
      
      • 手机淘宝团队出的简洁高效 移动端适配库
        
      • 我们再也不需要在写不同屏幕的媒体查询，因为里面js做了处理
        
      • 它的原理是把当前设备划分为10等份，但是不同设备下，比例还是一致的。
        
      • 我们要做的，就是确定好我们当前设备的html 文字大小就可以了
        
      • 比如当前设计稿是 750px， 那么我们只需要把 html 文字大小设置为 75px(750px / 10) 就可以
        
      • 里面页面元素rem值： 页面元素的px 值 /  75  剩余的，让flexible.js来去算
        
    • 下载css rem插件并且设置VScode的字体为75px（vscode的默认字体大小是16px，所以必须先进行设置）
      

---

欢迎光临 菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)

Powered by Discuz! X3.4