开发响应式web页面的示例分析

本篇文章给大家分享的是有关开发响应式web页面的示例分析，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

   响应式 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) {}

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

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

• 6.针对设备独立像素为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 */

     }

• 7.针对宽度，高度，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

   }

但是有时候在小屏幕下字体太小了，使用户看起来太吃力，我们可以针对小屏幕下适当掉大一点即可；

以上就是开发响应式web页面的示例分析，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注亿速云行业资讯频道。