移动端页面自适应解决方案 rem布局

移动端rem布局

  前言

目前网络上移动端布局方法有很多，初次接触者也许会搞不清楚到底怎么用，在此介绍rem布局方法，使移动端能够做到自适应大小，包简单包会。

 viewport的概念

通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，移动设备上的浏览器都会把自己默认的viewport设为980px或1024px（也可能是其它值，这个是由设备自己决定的），但带来的后果就是浏览器会出现横向滚动条，因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。下图列出了一些设备上浏览器的默认viewport的宽度。

所以在html页中需设定

<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"> 

这段话意为定义在屏幕上可显示的宽度为设备宽度，不可手动缩放，初始缩放与最大缩放比例皆为1

 @media的概念

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。

@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

     在css中引入如下代码即可

html{font-size: 100px;} 
@media screen and (min-width:320px){html{font-size:42.667px;}}
@media screen and (min-width:360px){html{font-size:48px;}}
@media screen and (min-width:375PX){html{font-size:50px;}}
@media screen and (min-width:384px){html{font-size:51.2px;}}
@media screen and (min-width:400px){html{font-size:53.3px;}}
@media screen and (min-width:412px){html{font-size:54.9px;}} 
@media screen and (min-width:414px){html{font-size:55.2px;}}
@media screen and (min-width:424px){html{font-size:56.5px;}}
@media screen and (min-width:480px){html{font-size:64px;}}
@media screen and (min-width:540px){html{font-size:72px;}}
@media screen and (min-width:720px){html{font-size:96px;}}
@media screen and (min-width:750px){html{font-size:100px;}}
@media screen and (min-width:768px){html{font-size: 102.4px;}}
@media screen and (min-width:800px){html{font-size: 106.7px;}}
@media screen and (min-width:980px){html{font-size: 130.7px;}}
@media screen and (min-width:1080px){html{font-size: 144px;}}
@media screen and (min-width:1152px){html{font-size: 153.6px;}}
@media screen and (min-width:1366px){html{font-size: 182.1px;}}
@media screen and (min-width:1440px){html{font-size: 192px;}}
@media screen and (min-width:2160px){html{font-size: 288px;}}

  rem

  一般情况移动端的设计稿的宽度为750px；7.5rem  =  750px  ，这样算的话，根据屏幕除以7.5得到的font-size基本上高度不会差别太大，切图就不用再转换高度了，只用除以100就可以得到元素宽高~

  注意此时单位rem设定的大小会适应屏幕的大小而单位为px时是固定大小

  所以在书写移动端代码时一定注意什么情况需要适应大小 什么时候需要固定大小

 rem 的算法

 

1 首先设置html的font-size:100px;

    html{
           font-size:100px;
        }

    2在写媒体查询

 @media screen and (min-width:320px){//大于320px
     html{
        font-size:42.667px;                          //320/750=0.42667,0.42667*100px=42.667px;,                                                              
     }
  }
 
 @media screen and (min-width:360px){
     html{
         font-size:48px;             //360/750= 0.48 ; 0.48*100px = 48px;
     }
 }

    3写你自己的样式

  比如有个盒子的大小为400x300，那么他在移动端的尺寸就为 4x3rem

  .box{

      width:4rem;

      heighr:3rem;

  }

       所有的单位都使用rem, rem = 实际尺寸 /100  

关于更多rem布局中的问题，可以继续收看

移动端rem布局如何使用精灵图及图片问题