移动页面自适应手机屏幕宽度

网上关于这方面的文章有不少，重复的东西本文再也不赘述，仅提供思路，并解释一些其余文章讲述模糊的地方。

 转自:http://jingyan.baidu.com/article/656db918949b59e381249ce1.html

 

一、使用meta标签，这也是广泛使用的方法，理论上讲使用这个标签是能够适应全部尺寸的屏幕的，可是各设备对该标签的解释方式及支持程度不一样形成了不能兼容全部浏览器或系统。

首先解释该标签的含义：

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

若是你彻底不了解这个标签的使用须要先百度一下。

解释：content中的“width” 这个width指的是什么宽度，我看过的文章对这个都没有解释的很清楚，有几个备选：虚拟窗口的宽度、手机屏幕的宽度、仍是页面的宽度等等？经试验这个指的是虚拟窗口的宽度。了解宽度以后，对后续的各类scale，就应该知道是谁与谁的比例，是 虚拟窗口宽度 / 页面宽度，这样就会有问题出现安卓设备尺寸差别很大光主流的就有宽度为 320 480 720 1080 等各类尺寸而以上标签只能支持一种尺寸，固然有些浏览器会自动缩放使其适应屏幕，但这不是统一标准，正确的作法是用js动态生成此标签，固然，应该先获取屏幕尺寸。

对于此标签还有如下须要分享：

1)、user-scalable=no就必定能够保证页面不能够缩放吗？NO，有些浏览器不吃这一套，还有一招就是minimum-scale=1.0, maximum-scale=1.0 最大与最小缩放比例都设为1.0就能够了。

2)、initial-scale=1.0   初始缩放比例受user-scalable控制吗？不必定，有些浏览器会将user-scalable理解为用户手动缩放，若是user-scalable=no，initial-scale将没法生效。

3)、手机页面能够触摸移动，可是若是有须要禁止此操做，就是页面宽度等于屏幕宽度是页面正好适应屏幕才能够保证页面不能移动。

4)、若是页面是通过缩小适应屏幕宽度的，会出现一个问题，当文本框被激活（获取焦点）时，页面会放大至原来尺寸。

以上是使用viewport标签的一些小体会，分享给你们。

 

二、第二种自适应屏幕尺寸的方法是将页面作成980宽度，在没有viewport标签的状况下，移动设备屏幕范围会显示页面980的宽度，若是页面大于980，则在屏幕范围内显示页面一部分，若是页面小于980，则页面居中两侧显示空白，那么你猜，若是页面宽度等于980会出现什么状况呢？

 

三、百分比法，首先应明确一个概年，CSS中的百分比中的百指的是什么，我告诉你指的是父元素，全部百分比都是这样的。子元素宽度50%，那么父元素的宽度就是百，子元素的padding-left：50%，父元素的宽度是百，子元素的margin-top:20%，那么父元素的高是百。因此body默认宽度是屏幕宽度（PC中指的是浏览器宽度）子孙元素按百分比定位（或指定尺寸）就能够了，这只适合布局简单的页面，复杂的页面实现很困难。

 

四、使用css3单位rem，有人这样解释rem，root-em，就是根部的em，想必em你们都懂的，那么rem就是将根节点html的font-size的值做为整个页面的基准尺寸，默认html的font-size是16px，即1rem=16px，若是某div宽度为32px你能够设为2rem。当咱们把html的font-size设为20px时，1rem=20px，那么32px=1.6rem了。到这里咱们也就了解了rem的用法了，那么怎么用rem来实现不一样尺寸屏幕的自适应呢？在页面载入开始时首先判断window的宽度（是window的宽度($(window).width())，不是屏幕分辩率的宽度（screen.width），二者的差异请自行查阅），假设宽度为W，一个div在宽度为640px的设计稿的下的宽度为dW1，这样若是html的font-size为100px，那么这个div的宽度用rem表示是多少呢？计算：div宽度dW2=dW1/100,px与rem之间很好换算，除以100就能够，这是假定屏幕宽度为640的，而不一样宽度的屏幕怎么处理，为了能保证换算容易那就要为html设置一个合适的font-size，计算：100 / 640 = fontSize / W, fontSize = W / 640 * 100 = W / 6.4;

解释一下为何把100做为一个缩放比例，用10或1不是更方便吗，这是由于大多数浏览器font-size的最小值为12px，因此只能用100了。

 

五、媒体查询，媒体查询也是css3的方法，咱们要解决的问题是适应手机屏幕，这个媒体查询正是为解决这个问题而生，媒体查询的功能就是为不一样的媒体设置不一样的css样式，这里的“媒体”包括页面尺寸，设备屏幕尺寸等，好比咱们要为宽度小于480px的页面中的class="icon"的元素设置样式，能够这样写，@media screen and (max-width=480px) {.icon{ some styles }};这里仅介绍这种思路，关于媒体查询的详细用法请参阅css手册。

 

 

  以前介绍一篇文章是：响应式web实战总结 已经介绍了一些知识点，这里就很少介绍了；咱们这边来了解下如何使用媒体查询写不一样的css样式；针对响应式web设计开发，使用媒体查询来适应不一样的手机屏幕样式开发时，咱们须要写不一样的样式，为此咱们来分享下我我的开发响应式web页面的经验；针对目前手机的独立像素有320，360，384，400，还有iphone6+是414的独立像素，所以咱们只须要针对目前这几种匹配便可；以下:

1. 针对手机独立像素是360 ~399等屏幕的宽度

     /*

      * 可是边距 字体大小等仍是安装360px来计算

      */

     @media (min-width:360px) and (max-width: 399px) {}

     2. 针对手机独立像素是320~359之间的

     /* min-width:320px

      * 针对设备独立像素为320px 的css

      * min-width:320 和 max-width:359之间

      */

      @media (min-width: 320px) and (max-width:359px){}

      3. 针对设备独立像素为400px以上的样式。

      /*

       * 针对设备独立像素为400px，边距等等都按400px来计算

       */

      @media (min-width: 400px) and (max-width:450px){}

      4. 针对设备独立像素为640px ~ 999px的css

      /* min-width:640px

       * 针对设备独立像素为640px 的css

       * min-width:640 和 max-width:999之间

       * 边距等按640px来计算

       */

      @media (min-width: 640px) and (max-width:999px){}

      5. 可是在PC端，咱们为了适应PC端，因此针对宽度为1000以上也作一个显示处理。

     /* 最小宽度1000样式

      *为了适应PC端 因此PC端在设计时候 默认以1000px来设计的

      */

     @media screen and (min-width:1000px) {}

一：使用rem来设置字体

       为了方便计算字体，咱们来设置浏览器10px，咱们都知道浏览器默认的像素是16px，所以咱们须要对html{font-size:62.5%;} // 10 / 16 = 62.5%;

首先假如设计搞在移动端上是按照750px设计稿上的话，假如字体在750px下字体大小咱们使用rem来写大小；那么他们的字体大小在各个独立像素下以下计算：

1. 针对设备独立像素为640px ~ 999px的css

      @media (min-width:640px) and (max-width: 999px) {

           /* 750/640 = 1.17*/

            html{font-size: 53.42%;}  /*62.5% / 1.17 */

      }

     @media (min-width: 400px) and (max-width:450px){

          /*  750 / 400 = 1.875 */

         html{font-size:33.33% } /* 62.5% / 1.875 */

      }

      @media (min-width:360px) and (max-width: 399px) {

           /*  750 / 360 = 2.08 */

          html{font-size:30%}   /* 62.5% / 2.08  */

      }

     @media (min-width: 320px) and (max-width:359px){

          /*  750/320 = 2.34 */

         html{font-size: 26.7%}  /* 62.5 / 2.34 */

     }

二： 针对宽度，高度，background-size, margin及padding的计算方法；

     假如在750px下的宽度是132px；高度是132px；background-size:132px 132px; margin:20px;Padding:20px;

     针对设备独立像素为640px ~ 999px的css

     @media (min-width:640px) and (max-width: 999px) {

           /* 750/640 = 1.17*/

           html{font-size: 53.42%;}  /*62.5% / 1.17 */

           // 下面的属性都是 自己的像素 / 1.17 得来的

         width: 112.82px;      // 132 / 1.17

         height:112.82px;      // 132 / 1.17

         background-size:112.82px 112.82px;  // 132 / 1.17

         margin:17.09px;   // 20 / 1.17

         padding:17.09px;  // 20 / 1.17

     }

    @media (min-width: 400px) and (max-width:450px){

         /*  750 / 400 = 1.875 */

         html{font-size:33.33% } /* 62.5% / 1.875 */

         // 下面的属性都是 自己的像素 / 1.875 得来的

         width: 70.4px;      // 132 / 1.875

         height: 70.4px;      // 132 / 1.875

         background-size: 70.4px 70.4px;  // 132 / 1.875

         margin:10.67px;   // 20 / 1.875

         padding: 10.67px;  // 20 / 1.875

    }

   @media (min-width:360px) and (max-width: 399px) {

          /*  750 / 360 = 2.08 */

         html{font-size:30%}   /* 62.5% / 2.08  */

         // 下面的属性都是 自己的像素 / 2.08 得来的

         width: 63.46px;      // 132 / 2.08

         height: 63.46px;      // 132 / 2.08

         background-size: 63.46px  63.46px;  // 132 / 2.08

         margin:9.62px;   // 20 / 2.08

         padding: 9.62px;  // 20 / 2.08

    }

   @media (min-width: 320px) and (max-width:359px){

         /*  750/320 = 2.34 */

        html{font-size: 26.7%}  /* 62.5 / 2.34 */

        width: 56.41px;      // 132 / 2.34

        height: 56.41px;      // 132 / 2.34

        background-size: 56.41px  56.41px;  // 132 / 2.34

        margin:8.55px;   // 20 / 2.34

        padding: 8.55px;  // 20 / 2.34

   }

可是有时候在小屏幕下字体过小了，使用户看起来太吃力，咱们能够针对小屏幕下适当掉大一点便可；