開發響應式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及 的計算方法；

     假如在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

   }

但是有時候在小螢幕下字型太小了，使使用者看起來太吃力，我們可以針對小螢幕下適當掉大一點即可；