移动Web——rem适配方案

1、rem适配方案

移动Web——rem适配方案_第1张图片




  
  
  
  体验rem
  


  

1.1 rem基本使用

  • rem单位,是相对单位
  • rem单位是相对于HTML标签的字号计算结果
  • 1rem = 1HTML字号大小


  
    
    
    
    rem基本使用
    
  

  
    

 1.2 思考 

(1) 手机屏幕大小不同,分辨率不同,如何设置不同的HTML标签字号?

  • 媒体查询
    • 媒体查询能够检测视口的宽度,然后编写差异化的CSS样式
    • 当某个条件成立,执行对应的CSS样式
    • 移动Web——rem适配方案_第2张图片



  
  
  
  媒体查询
  


  

(2)设备宽度不同,HTML标签字号设置多少合适?

  • 设备宽度大,元素尺寸大
  • 设备宽度小,元素尺寸小

移动Web——rem适配方案_第3张图片

目前rem布局方案中,将网页等分成10份,HTML标签的字号为视口宽度的1/10

移动Web——rem适配方案_第4张图片



  
    
    
    
    rem适配
    
  

  
    

 1.3 rem-flexible.js

flexible.js是手淘开发出的一个用来适配移动端的js库

核心原理就是根据不同的视口宽度给网页中html根节点设置不同的 font-size



  
    
    
    
    rem适配
    
  

  
    

1.4 rem-移动适配

工作中,书写代码的尺寸要参照设计稿尺寸,设计稿中的是px还是rem?

计算68px是多少个rem?(设计稿适配375px视口)

移动Web——rem适配方案_第5张图片

  • N*37.5=68
  • N=68 / 37.5

rem单位尺寸

1.确定基准根字号

  • 查看设计稿宽度---> 确定参考设备宽度(视口宽度)---> 确定基准根字号(1/10视口宽度)

2.rem单位的尺寸

  • rem单位的尺寸 = px单位数值 / 基准根字号



  
  
  
  rem布局
  


  

 

你可能感兴趣的:(HTML5+css3,前端)