手机端自适应rem&媒体查询

一、px

  • 在页面的布局当中,px是最常见的单位.
  • px是物理像素,根据电脑分辨率来进行计算
  • 不会存在继承问题

二、em

  • 根据字体大小来进行计算
  • 如果存在有嵌套->字体 = 父级字体大小 + 子级字体大小



    
    
    Document
    


    
心游于艺,道不远人

游于艺道不远人

  • p标签的父级是body(字体大小是20px),所以是2 x 20=40px
    span标签的父级是p(字体大小是40px),所以自己是2 x 40=80px.

三、rem

  • 字体大小默认根元素大小
  • 所有的rem中都是根据根元素设置的font-size来进行计算
  • 通过媒体查询或者通过js获取屏幕viewport来进行字体的计算
//媒体查询方式进行根元素字体大小的计算

//js获取viewport来进行根元素字体大小的计算

你可能感兴趣的:(手机端自适应rem&媒体查询)