開發響應式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頁面的示例分析，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。