移动web开发适配利器—rem

移动web开发与适配

image.png

image.png

• meadia也可以写在link里面：

  
//当屏幕小于等于320时，所使用的link

• 使用media时注意

/*当同时小于360px和320px时,应定义一个区间,否则将会覆盖*/
        @media screen and (max-width:360px) and (min-width:321px){
            /*code*/
        }

        @media screen and (max-width:320px){
            /*code*/
        }

rem

• rem是 font size of the root element

  
  
  

  image.png
• rem和根元素的font-size有关
• 浏览器默认的1rem = 16px;

动态修改font-size

• 使用media

    @media screen and (max-width:360px) and (min-width:321px){
            html{
                                  font-size:22px;
                              }
        }

        @media screen and (max-width:320px){
            html{
                                  font-size:30px;
                              }
        }

• 使用js